mapbox / mapbox/mapbox-gl-js

`geojson.updateData()` cause existing points disappear

Open
#13,279 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**mapbox-gl-js version**: 3.6.0

**browser**: chrome 128.0.6613.137

### Steps to Trigger Behavior

1. Add a geojson data source with `dynamic: true`
2. Add a layer with the geojson data as source
3. Add 1000 points to the source with `geojson.updateData()`
4. Update one point of the source with `geojson.updateData()` burstly.

### Expected Behavior

The step 4 sometimes may cause the existing points disappear.

Reproduce Code:

```js
const map = new mapboxgl.Map({
container: 'map', // container ID
style: "mapbox://styles/mapbox/streets-v12",
zoom: 12, // starting zoom
center: [-77.432, 25.0306] // starting position
});

map.on('load', () => {
// Add a data source containing one point feature.
map.addSource('points', {
type: 'geojson',
data: {
type: "FeatureCollection",
features: [],
},
dynamic: true, // allow data to be updated
});

// Add a layer to use the image to represent the data.
map.addLayer({
id: 'points',
type: "circle",
source: 'points',
paint: {
'circle-color': ['coalesce', ["get", "color"], ['to-color', "#000"]],
'circle-radius': ["get", "size"],
},
});

map.on('render', () => {
console.log('render', Date.now(), map.querySourceFeatures("points").length);
});
const points = new Array(1000).fill(0).map((_, i) => ({
id: i,
lat: 25.0306 + Math.random() * 0.1,
lon: -77.432 + Math.random() * 0.1,
notes: `Point ${i}`,
}));

map.getSource('points').updateData({
"type": "FeatureCollection",
"features": points.map(point => ({
"id": point.id,
"type": "Feature",
"properties": {
"description": point.notes || "",
"color": point.color || "#000",
"size": point.size || 4,
},
"geometry": {
"type": "Point",
"coordinates": [point.lon, point.lat],
},
})),
});

function update() {
let s = map.getSource('points');

console.log('source', Date.now(), {
_coalesce: s._coalesce,
size: s._data.features.length,
}, map.querySourceFeatures("points").length);

s.updateData({
"type": "FeatureCollection",
"features": [
{
"id": points.length,
"type": "Feature",
"properties": {
"description": "",
"color": "#000",
"size": Math.random() * 10,
},
"geometry": {
"type": "Point",
"coordinates": [-77.432 + Math.random() * 0.1, 25.0306 + Math.random() * 0.1],
},
}
],
});
}
for (let i = 0; i < 30; i++) {
update();
}

setTimeout(() => {
update();
}, 1);
});
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied browser reproduction and the GeoJSON source's updateData() entry point, focusing on the burst of updates after the initial 1,000 points. Verify the behavior in the stated Mapbox GL JS 3.6.0 and Chrome versions; done means updating one point no longer causes existing points to disappear.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.