Remove / Edit specific geojson point on click in mapbox

Question

Accessing geojson point on click is easy however it seems that mapbox does not return reference to the clicked element, it returns its copy. Probably because adding source does JSON.stringify as I believe.

I would like to access geojson specific feature on element click, modify/delete/move it and rerender.

One way of doing that is passing property "id" to feature, looping over features, find the one with proper id, modify it and rerender however that might be very slow when working with large number of points, like 100 000 of them. That is also why I am not considering usage of new Marker() as it creates DOM element and it's an overkill for big marker amounts.

Another way of doing that is probably making a map <id, FeatureObject> with references to geojson Features but I am still wondering, is there a native mapbox way of easy and performant geojson feature edition.

const geoJson = { ... }

map.addSource('points', {
  type: 'geojson',
  data: geoJson
});

map.addLayer({
  'id': 'points',
  'type': 'symbol',
  'source': 'points',
  'layout': {
    'icon-image': 'logger_green',
    'icon-allow-overlap': true
  }
});

map.on('mousedown', 'points', function (e) {
  e.preventDefault();

  // feature here is a copy, not reference so updating geojson would require looping 
  // over geojson, finding clicked element by is passed in feature property, editing it and 
  // rerendering which may be slow for bigger geojson data
  console.log(e, e.features, e.features[0]); 
});

Dolly Dolly · Accepted Answer · 2020-09-14T18:12:34

So, What I can recommend is,You can use a highly performed JS library for this usecase:

Rbush

If you have large number of geojson point's. You can arrange/categorize them under bbox using Rbush. Later on whenever you click on a geojson point, you just have to grab bbox in which that point lies and update your data accordingly!

Remove / Edit specific geojson point on click in mapbox

1 Answers