map.on('load', () => {
map.addSource([SOURCE ID], {
type: 'geojson',
data: [ADD FEATURE GEO JSON DATA]
cluster: true, // Set the 'cluster' option to true
clusterMaxZoom: [ADD CLUSTER ZOOM ], // Max zoom to cluster points on
clusterRadius: [ADD CLUSTER RADIUS], // Radius of each cluster when clustering points (defaults to 50)
})
map.addLayer({
id: [LAYER ID],
type: 'circle',
source: [SOURCE ID],
filter: ['has', [FILTER DATA SOURCE]], // Add the data source which you want to cluster
paint: {
'circle-color': ['step',
['get', [FILTER DATA SOURCE]],
[COLOR], // Color for clusters with < M points
M, [COLOR], // Color for clusters with M to N-1 points
N, [COLOR] // Color for clusters with N or more points
],
'circle-radius': ['step',
['get', [FILTER DATA SOURCE]],
R1, // Radius for clusters with < M points
M, R2, // Radius for clusters with M to N-1 points
N, R3 // Radius for clusters with N or more points
],
},
})
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: [SOURCE ID],
filter: ['has', [FILTER DATA SOURCE]],
layout: {
'text-field': ['get', [FILTER DATA SOURCE]],
'text-size': [ADD FONT SIZE],
},
})
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: [SOURCE ID],
filter: ['!', ['has', [FILTER DATA SOURCE]]],
paint: {
'circle-color': [ADD COLOR FOR UNCLUSTERED POINTS],
'circle-radius': [ADD POINT RADIUS],
'circle-stroke-width': [ADD STROKE WIDTH],
'circle-stroke-color': [ADD STROKE COLOR],
},
})
})data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {}, // Add your properties
geometry: {
type: 'Point',
coordinates: [ADD COORDINATES],
},
},
{
type: 'Feature',
properties: {}, // Add your properties
geometry: {
type: 'Point',
coordinates: [ADD COORDINATES],
},
},...
]
}map.on('load', () => {
map.addSource('earthquakes', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
mag: 5.1,
time: '2024-08-01T10:00:00Z',
place: 'Delhi, India',
},
geometry: {
type: 'Point',
coordinates: [77.1025, 28.7041],
},
},
{
type: 'Feature',
properties: {
mag: 4.7,
time: '2024-08-05T14:30:00Z',
place: 'Mumbai, India',
},
geometry: {
type: 'Point',
coordinates: [72.8777, 19.076],
},
},
{
type: 'Feature',
properties: {
mag: 6.2,
time: '2024-08-10T08:15:00Z',
place: 'Chennai, India',
},
geometry: {
type: 'Point',
coordinates: [80.2707, 13.0827],
},
},
{
type: 'Feature',
properties: {
mag: 5.9,
time: '2024-08-12T12:45:00Z',
place: 'Kolkata, India',
},
geometry: {
type: 'Point',
coordinates: [88.3639, 22.5726],
},
},
{
type: 'Feature',
properties: {
mag: 5.5,
time: '2024-08-02T09:20:00Z',
place: 'Bengaluru, India',
},
geometry: {
type: 'Point',
coordinates: [77.5946, 12.9716],
},
},
{
type: 'Feature',
properties: {
mag: 4.9,
time: '2024-08-07T16:40:00Z',
place: 'Hyderabad, India',
},
geometry: {
type: 'Point',
coordinates: [78.4867, 17.385],
},
},
{
type: 'Feature',
properties: {
mag: 6.1,
time: '2024-08-09T13:10:00Z',
place: 'Pune, India',
},
geometry: {
type: 'Point',
coordinates: [73.8567, 18.5204],
},
},
{
type: 'Feature',
properties: {
mag: 5.7,
time: '2024-08-11T11:25:00Z',
place: 'Ahmedabad, India',
},
geometry: {
type: 'Point',
coordinates: [72.5714, 23.0225],
},
},
{
type: 'Feature',
properties: {
mag: 4.8,
time: '2024-08-03T08:50:00Z',
place: 'Jaipur, India',
},
geometry: {
type: 'Point',
coordinates: [75.7873, 26.9124],
},
},
{
type: 'Feature',
properties: {
mag: 6.3,
time: '2024-08-06T18:35:00Z',
place: 'Lucknow, India',
},
geometry: {
type: 'Point',
coordinates: [80.9462, 26.8467],
},
},
{
type: 'Feature',
properties: {
mag: 5.0,
time: '2024-08-08T14:20:00Z',
place: 'Bhopal, India',
},
geometry: {
type: 'Point',
coordinates: [77.4126, 23.2599],
},
},
{
type: 'Feature',
properties: {
mag: 6.0,
time: '2024-08-04T09:50:00Z',
place: 'Nagpur, India',
},
geometry: {
type: 'Point',
coordinates: [79.0882, 21.1458],
},
},
{
type: 'Feature',
properties: {
mag: 5.2,
time: '2024-08-13T07:30:00Z',
place: 'Kanpur, India',
},
geometry: {
type: 'Point',
coordinates: [80.3319, 26.4499],
},
},
{
type: 'Feature',
properties: {
mag: 4.6,
time: '2024-08-15T15:00:00Z',
place: 'Patna, India',
},
geometry: {
type: 'Point',
coordinates: [85.1376, 25.5941],
},
},
{
type: 'Feature',
properties: {
mag: 4.5,
time: '2024-08-16T08:00:00Z',
place: 'Thiruvananthapuram, India',
},
geometry: {
type: 'Point',
coordinates: [76.9366, 8.5241],
},
},
{
type: 'Feature',
properties: {
mag: 6.4,
time: '2024-08-17T12:15:00Z',
place: 'Kochi, India',
},
geometry: {
type: 'Point',
coordinates: [76.2711, 9.9312],
},
},
{
type: 'Feature',
properties: {
mag: 5.8,
time: '2024-08-18T14:30:00Z',
place: 'Visakhapatnam, India',
},
geometry: {
type: 'Point',
coordinates: [83.2185, 17.6868],
},
},
{
type: 'Feature',
properties: {
mag: 5.4,
time: '2024-08-19T16:00:00Z',
place: 'Coimbatore, India',
},
geometry: {
type: 'Point',
coordinates: [76.9558, 11.0168],
},
},
{
type: 'Feature',
properties: {
mag: 6.2,
time: '2024-08-20T09:40:00Z',
place: 'Mysore, India',
},
geometry: {
type: 'Point',
coordinates: [76.6394, 12.2958],
},
},
{
type: 'Feature',
properties: {
mag: 5.6,
time: '2024-08-21T10:20:00Z',
place: 'Vadodara, India',
},
geometry: {
type: 'Point',
coordinates: [73.1812, 22.3072],
},
},
{
type: 'Feature',
properties: {
mag: 4.9,
time: '2024-08-22T13:10:00Z',
place: 'Indore, India',
},
geometry: {
type: 'Point',
coordinates: [75.8577, 22.7196],
},
},
{
type: 'Feature',
properties: {
mag: 5.3,
time: '2024-08-23T14:30:00Z',
place: 'Raipur, India',
},
geometry: {
type: 'Point',
coordinates: [81.6296, 21.2514],
},
},
{
type: 'Feature',
properties: {
mag: 5.7,
time: '2024-08-24T15:45:00Z',
place: 'Ranchi, India',
},
geometry: {
type: 'Point',
coordinates: [85.3096, 23.3441],
},
},
{
type: 'Feature',
properties: {
mag: 6.0,
time: '2024-08-25T08:50:00Z',
place: 'Guwahati, India',
},
geometry: {
type: 'Point',
coordinates: [91.7362, 26.1445],
},
},
{
type: 'Feature',
properties: {
mag: 5.1,
time: '2024-08-26T11:15:00Z',
place: 'Agra, India',
},
geometry: {
type: 'Point',
coordinates: [78.0081, 27.1767],
},
},
{
type: 'Feature',
properties: {
mag: 5.9,
time: '2024-08-27T13:40:00Z',
place: 'Varanasi, India',
},
geometry: {
type: 'Point',
coordinates: [83.0076, 25.3176],
},
},
{
type: 'Feature',
properties: {
mag: 6.5,
time: '2024-08-28T07:00:00Z',
place: 'Madurai, India',
},
geometry: {
type: 'Point',
coordinates: [78.1198, 9.9252],
},
},
{
type: 'Feature',
properties: {
mag: 4.7,
time: '2024-08-29T09:20:00Z',
place: 'Surat, India',
},
geometry: {
type: 'Point',
coordinates: [72.8311, 21.1702],
},
},
{
type: 'Feature',
properties: {
mag: 6.3,
time: '2024-08-30T11:40:00Z',
place: 'Udaipur, India',
},
geometry: {
type: 'Point',
coordinates: [73.7125, 24.5854],
},
},
],
},
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50,
})
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'earthquakes',
filter: ['has', 'point_count'],
paint: {
'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 3, '#f1f075', 5, '#f28cb1'],
'circle-radius': ['step', ['get', 'point_count'], 20, 2, 30, 4, 40],
},
})
map.addLayer({
id: 'cluster-count',
type: 'symbol',
source: 'earthquakes',
filter: ['has', 'point_count'],
layout: {
'text-field': ['get', 'point_count'],
'text-size': 12,
},
})
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'earthquakes',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#11b4da',
'circle-radius': 10,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff',
},
})
})