mapbox / mapbox/mapbox-maps-flutter
Update an icon of a feature when selected
Nobody has claimed this yet.
- Dominant language
- Dart
- Stars
- 380
- Forks
- 204
- PR merge metrics
- No merged PRs in 30d
Description
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 _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 _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?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with _changeSelectedMarker and _initSymbolLayer in the issue, then check the Flutter Mapbox setFeatureState API and feature-state support for symbol-layer icon-image expressions. Reproduce the selection and deselection flow with the provided activity source and layer configuration. Done means determining whether the state is applied and the icon changes, or documenting a confirmed SDK bug with the relevant reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100