CODEWITHSUNDEEP
javascriptvue.jsmapbox
Ezr0
Ezr0

Reputation: 170

setFeatureState not updating value in mapbox?

I am trying to update the stroke of a circle when a circle is clicked in mapbox. I've followed the documentation from mapbox but it doesnt seem to be updating the values. Console is all clear too.

  t.map.addLayer({
    id: id,
    type: 'circle',
    source: id,
    paint: {
      'circle-radius': 100,
      'circle-opacity': 0.5,
      'circle-color': 'rgba(20, 106, 181, 0.11)',
      'circle-stroke-color': [
        'case', ['boolean', ['feature-state', 'clicked'], false],
          'rgba(20, 106, 181, 0.11)',
          '#146ab5',
      ],
      'circle-stroke-width': [
        'case', ['boolean', ['feature-state', 'clicked'], false],
          2,
          0,
      ],
    },
  });

Im then trying to update the state:

  t.map.on('click', id, (e) => {
    t.map.setFeatureState({ source: id, id: id }, { clicked: true });
  });

I've slowely stepped through but the values do not update. Thanks

Upvotes: 2

Views: 1723

Answers (1)

CSib
CSib

Reputation: 66

Reviewing your example it appears that your id reference is not correct. For each element in the layer, a unique ID must exist, this can easily be added to the source data.

t.map.addSource('sourceId', {
    'type': 'dataType',
    'data': yourData,
    'generateId': true // This ensures that all features have unique IDs
});

Furthermore once this has been added you must then locate and reference this unique id in each setFeatureState update:

t.map.on('click', id, (e) => {
    let uniqueId = e.features[0]['id'];
    t.map.setFeatureState({ source: id, id: uniqueId }, { clicked: true });
  });

I myself am struggling away at a similar issue right now, hope that this input has helped (I am by no means an expert with MapBox GL JS). The above examples are adopted from Interactive Hover Effects, and Create Hover Effect in the MapBox documentation.

Upvotes: 5

Related Questions