I am trying to create an html cluster map using Mapbox, but “cluster”: true is not creating a “point_count” attribute. I can confirm that the geojson is loaded correctly and individual point markers appeared when “cluster”:true was removed.
Current approach
var geoData = {
"type": 'FeatureCollection',
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-72.4050504,40.90369252]
},
"properties": {
"title": "title",
"description": "description"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-72.40584471,40.89771544]
},
"properties": {
"title": "title",
"description": "description"
}
}
]
};
map.addSource('crash', {
type: 'geojson',
data: geoData,
cluster: true,
clusterMaxZoom: 10, // Max zoom to cluster points on
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'crash',
filter: ['has', 'point_count'],
paint: {
'circle-color': "#f1f075",
'circle-radius': 40
}
});
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'crash',
filter: ['has', 'point_count'],
layout: {
'text-field': '{point_count_abbreviated}',
'text-font': ['Arial Unicode MS Bold'],
'text-size': 12
}
});
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'crash',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#11b4da',
'circle-radius': 5,
'circle-stroke-width': 0.8,
'circle-stroke-color': '#fff'
}
});
Desired approach
I was expecting hoping to recreate the styles in this mapbox example: https://docs.mapbox.com/mapbox-gl-js/example/cluster/