GeoJSON sources
Quick answer
This tutorial covers adding GeoJSON through addSource with either an inline object or a URL, choosing a layer type per geometry, and refreshing data with setData instead of rebuilding layers. It also explains client-side clustering via cluster, clusterRadius and clusterMaxZoom, feature-state highlighting with promoteId or generateId, and click queries on layers. You will be able to load business data and update it in place.
Key points
- Add the source with type: 'geojson' and set data to an object or a URL, both in WGS84 [lng, lat] order.
- Call map.getSource(id).setData(fc) to replace features without touching the layer.
- Add promoteId or generateId to the source so setFeatureState has stable feature ids.
Example
/* 内联对象 */
map.addSource('stations', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{ type: 'Feature', properties: { name: 'A' },
geometry: { type: 'Point', coordinates: [116.39, 39.90] } }
]
}
});
/* 远程文件 */
map.addSource('zones', {
type: 'geojson',
data: '/data/zones.geojson'
});map.addLayer({
id: 'station-dots',
type: 'circle',
source: 'stations',
paint: {
'circle-radius': ['interpolate', ['linear'], ['zoom'], 3, 3, 7, 8],
'circle-color': '#1f5fd0',
'circle-stroke-color': '#fff',
'circle-stroke-width': 1.5
}
});Notes
- Passing data: JSON.stringify(fc) does not error but produces an empty source with nothing drawn.
- Mutating the FeatureCollection in place never refreshes the map because MapLibre does not watch object internals.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). GeoJSON sources. https://www.jingweizhi.com/en/maplibre/tutorials/geojson-source.html (accessed 2026-11-03).