Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update an icon of a feature when selected #781

Open
ludovicjamet opened this issue Nov 19, 2024 · 0 comments
Open

Update an icon of a feature when selected #781

ludovicjamet opened this issue Nov 19, 2024 · 0 comments

Comments

@ludovicjamet
Copy link

ludovicjamet commented Nov 19, 2024

I'm a bit lost with the poor documentation regarding the feature-state so I don't know if it's a bug or a wrong implementation.

I have this function that does set the feature-state

  Future<void> _changeSelectedMarker({ExtendedActivity? previousSelection, ExtendedActivity? newSelection}) async {
    if (previousSelection != null) {
      LoggingService.instance.debug('Deselecting marker with ID: ${previousSelection.activity.firebaseId}');
      map.setFeatureState(
        "activity-source",
        null,
        previousSelection.activity.firebaseId,
        jsonEncode({"selected": false}),
      );
    }
    if (newSelection != null) {
      LoggingService.instance.debug('Selecting marker with ID: ${newSelection.activity.firebaseId}');
      map.setFeatureState(
        "activity-source",
        null,
        newSelection.activity.firebaseId,
        jsonEncode({"selected": true}),
      );
    }
  }

My layer is init like that

Future<void> _initSymbolLayer() async {
    await map.style.addStyleSource(
        "activity-source",
        jsonEncode({
          'type': 'geojson',
          'data': {
            'type': 'FeatureCollection',
            'features': [],
          },
        }));

    await map.style.addStyleLayer(
      jsonEncode(
        {
          'id': "activity-layer",
          'type': 'symbol',
          'source': "activity-source",
          'layout': {
            'text-field': ['get', 'title'],
            'text-size': OGDims.dim4,
            'text-variable-anchor': ['left', 'top', 'right'],
            'text-radial-offset': 1,
            'text-offset': [2, 0],
            'icon-image': [
              'case',
              [
                'boolean',
                ['feature-state', 'selected'],
                false
              ],
              ['get', 'selectedIcon'],
              ['get', 'icon'],
            ],
            'icon-size': 7,
            'icon-allow-overlap': true,
            'icon-ignore-placement': true,
            'text-allow-overlap': false,
            'text-ignore-placement': false,
            'text-justify': "auto",
          },
          'paint': {
            'text-color': "#000000",
            'text-halo-color': "#FFFFFF",
            'text-halo-width': 1.75,
            'icon-opacity': [
              'coalesce',
              ['feature-state', 'opacity'],
              0.0
            ]
          }
        },
      ),
      LayerPosition(at: 0),
    );

    addMarkerImagesToMap();
  }

But I can't make it works. Is it a bad implementation or a bug?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant