mapbox / mapbox/mapbox-maps-flutter
Tapped layer color change using layer's id within properties
Nessuno ha ancora preso questa issue.
- Lingua principale
- Dart
- Stelle
- 380
- Fork
- 204
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
I am trying to change the tapped layer color only using pond_id inside my layer response.. when i tap the feature state returns true but the color is not changing "#E27E1E", my featuredata of tapped layer id :
Tapped feature ID: {type: Feature, id: 22, geometry: {type: Polygon, coordinates: [[[81.4860383, 16.5046304], [81.4888948, 16.5045532], [81.4888412, 16.5036197], [81.4868027, 16.5036557], [81.4862716, 16.5036248], [81.4860383, 16.5046304]]]}, properties: {pond_id: 16108c29-e6eb-4ee6-94a1-56c8a16cc167}}
`await mapboxMap?.style.addLayer(
FillLayer(
id: 'pond_boundary_tile1_fill',
sourceId: 'pond_boundary_tile1_source',
sourceLayer: 'ponds_WG_b2-2ttlya',
fillColorExpression: [
'case',
[
'boolean',
['feature-state', 'selected'],
false
],
"#E27E1E",
[
"in",
["get", "pond_id"],
["literal", allPondIds]
],
"#004fbb",
"#DBDBDB",
],
),
);
Future onTapListener(MapContentGestureContext context,
Function(bool) onFeatureSelected) async {
final touchPosition = context.touchPosition;
// print("Coordinates: (${touchPosition.x}, ${touchPosition.y})");
final List<QueriedRenderedFeature?> features =
await mapboxMap!.queryRenderedFeatures(
RenderedQueryGeometry(
value: jsonEncode(touchPosition.encode()),
type: Type.SCREEN_COORDINATE,
),
RenderedQueryOptions(
layerIds: ['pond_boundary_tile1_fill'], filter: null),
);
if (features.isNotEmpty) {
final QueriedFeature selectedFeature = features.first!.queriedFeature;
final featureData = selectedFeature.feature;
final featureModel = FeatureModel.fromJson(
Map<String, dynamic>.from(featureData),
);
isLoading.value = true;
final pondId = featureModel.tappedId;
print("Tapped feature properties ID: $pondId");
featureId.value = selectedFeature.feature['id'].toString();
print("Tapped feature ID: $featureData");
appController.setFeatureId = submittedId;
// selectedFeatureId = featureId.value;
if (selectedFeatureId != null && selectedFeatureId != pondId) {
mapboxMap?.setFeatureState(
'pond_boundary_tile1_source',
'ponds_WG_b2-2ttlya',
selectedFeatureId!,
jsonEncode({'selected': false}),
);
}
print("Setting feature state for pondId: $pondId");
mapboxMap?.setFeatureState(
'pond_boundary_tile1_source',
'ponds_WG_b2-2ttlya',
pondId,
jsonEncode({'selected': true}),
);
final featureState = await mapboxMap?.getFeatureState(
'pond_boundary_tile1_source',
'ponds_WG_b2-2ttlya',
pondId,
);
print("Updated Feature state: $featureState");
}
}
}`
please help me to fix asap.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia dal punto di ingresso onTapListener e segui FillLayer fillColorExpression insieme alle chiamate a setFeatureState per pond_boundary_tile1_source e ponds_WG_b2-2ttlya. Verifica che l'identificatore della feature toccata utilizzato per lo stato corrisponda all'identificatore previsto dal layer, quindi conferma che lo stagno selezionato cambi in #E27E1E mentre gli altri stagni mantengono i loro colori.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- dart, flutter
- Ambito
- mobile-dev
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 42/100