Saturday, 14 September 2019

Mapbox JS: Efficient and simple way to change a property of a feature

I am trying to change the property (value) of a feature (based upon id) in a layer. I cannot use setFeatureState, because I need to cluster the features based on the value property and clusterProperties does not support feature-state aggregation. The current way I'm using to set the value property of a feature with a specific id is the following (every 2 seconds, I iterate through every feature and set the property):

setTimeout(() => {
  const newGeojson = {
    ...geojson,
    features: geojson.features.map(feature => {
      if ([0, 1].includes(feature.id)) { // update features selectively
        feature.properties.value= 1;
      }
      return feature;
    })
  };
  map.getSource('geom').setData(newGeojson);
}, 2000);

This is terribly inefficient with a time complexity of O(n)—I have around 130,000 features. In fact, it causes my browser to crash. I tried using mapbox-gl-js's MapboxDraw (mapbox-gl-js has a setFeaturePropertymethod), but it takes too long to load the 130,000 features (crashing the browser), so that didn't work as an option. Is there a more feasible option where I can set the property of a feature without it taking forever?



from Mapbox JS: Efficient and simple way to change a property of a feature

No comments:

Post a Comment