`geojson.updateData()` cause existing points disappear
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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