mapbox-gl-js
mapbox-gl-js copied to clipboard
`geojson.updateData()` cause existing points disappear
mapbox-gl-js version: 3.6.0
browser: chrome 128.0.6613.137
Steps to Trigger Behavior
- Add a geojson data source with
dynamic: true - Add a layer with the geojson data as source
- Add 1000 points to the source with
geojson.updateData() - Update one point of the source with
geojson.updateData()burstly.
Expected Behavior
The step 4 sometimes may cause the existing points disappear.
Reproduce Code:
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);
});
Hi @WeiminWangKolmostar,
Have you tried adding data via setData in step 3? cc @mourner
@stepankuzmin it should work with only updateData in any case. Must be some kind of a race condition, need to look into it...
I've been having the exact same problem.... Using setData did solve the problem though