malwoodsantoro · November 19, 2020 22:34
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <title>Create and style clusters</title>
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
 <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
 <style>
 	body { margin: 0; padding: 0; }
 	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
 </style>
 </head>
 <body>
 <div id="map"></div>

 <script>
 	mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/dark-v10',
        center: [-66.43115813529761, 8.013243458239344],
        zoom: 3
    });

    map.on('load', function () {
        // Add a new source from our GeoJSON data and
        // set the 'cluster' option to true. GL-JS will
        // add the point_count property to your source data.
        map.addSource('earthquakes', {
            type: 'geojson',
            // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
            // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
            data: {
            "features": [
              {
                "type": "Feature",
                "properties": {
                  "value": { "count": 4 }
                },
                "geometry": {
                  "coordinates": [
                    -66.049148,
                    7.522043
                  ],
                  "type": "Point"
                },
                "id": "50842faeb1333d778df5bb5a44e13b7b"
              },
              {
                "type": "Feature",
                "properties": {
                  "value": { "count": 2 }
                },
                "geometry": {
                  "coordinates": [
                    -65.990963,
                    7.76672
                  ],
                  "type": "Point"
                },
                "id": "9669891f74448001c07c230409ca1050"
              },
              {
                "type": "Feature",
                "properties": {
                  "value": { "count": 10 }
                },
                "geometry": {
                  "coordinates": [
                    -65.762379,
                    7.519571
                  ],
                  "type": "Point"
                },
                "id": "cc78b2222ab4227ced7d11b7dec1a839"
              }
            ],
            "type": "FeatureCollection"
          },
            cluster: true,
            clusterMaxZoom: 14,
            clusterRadius: 50, 
            clusterProperties: {sum: ["+", ["get", "count", ["object", ["get", "value"]]]]}
        });

        map.addLayer({
            id: 'clusters',
            type: 'circle',
            source: 'earthquakes',
            filter: ['has', 'point_count'],
            paint: {
                'circle-color': "pink",
                'circle-radius': 50
            }
        });

        map.addLayer({
            id: 'cluster-count',
            type: 'symbol',
            source: 'earthquakes',
            filter: ['has', 'point_count'],
            layout: {
                'text-field': ["get", "sum"],
                'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
                'text-size': 12
            }
        });

        map.addLayer({
            id: 'unclustered-point',
            type: 'circle',
            source: 'earthquakes',
            filter: ['!', ['has', 'point_count']],
            paint: {
                'circle-color': '#11b4da',
                'circle-radius': 4,
                'circle-stroke-width': 1,
                'circle-stroke-color': '#fff'
            }
        });
    });
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Create and style clusters</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
	</style>
	</head>
	<body>
	<div id="map"></div>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/dark-v10',
	center: [-66.43115813529761, 8.013243458239344],
	zoom: 3
	});

	map.on('load', function () {
	// Add a new source from our GeoJSON data and
	// set the 'cluster' option to true. GL-JS will
	// add the point_count property to your source data.
	map.addSource('earthquakes', {
	type: 'geojson',
	// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
	// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
	data: {
	"features": [
	{
	"type": "Feature",
	"properties": {
	"value": { "count": 4 }
	},
	"geometry": {
	"coordinates": [
	-66.049148,
	7.522043
	],
	"type": "Point"
	},
	"id": "50842faeb1333d778df5bb5a44e13b7b"
	},
	{
	"type": "Feature",
	"properties": {
	"value": { "count": 2 }
	},
	"geometry": {
	"coordinates": [
	-65.990963,
	7.76672
	],
	"type": "Point"
	},
	"id": "9669891f74448001c07c230409ca1050"
	},
	{
	"type": "Feature",
	"properties": {
	"value": { "count": 10 }
	},
	"geometry": {
	"coordinates": [
	-65.762379,
	7.519571
	],
	"type": "Point"
	},
	"id": "cc78b2222ab4227ced7d11b7dec1a839"
	}
	],
	"type": "FeatureCollection"
	},
	cluster: true,
	clusterMaxZoom: 14,
	clusterRadius: 50,
	clusterProperties: {sum: ["+", ["get", "count", ["object", ["get", "value"]]]]}
	});

	map.addLayer({
	id: 'clusters',
	type: 'circle',
	source: 'earthquakes',
	filter: ['has', 'point_count'],
	paint: {
	'circle-color': "pink",
	'circle-radius': 50
	}
	});

	map.addLayer({
	id: 'cluster-count',
	type: 'symbol',
	source: 'earthquakes',
	filter: ['has', 'point_count'],
	layout: {
	'text-field': ["get", "sum"],
	'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
	'text-size': 12
	}
	});

	map.addLayer({
	id: 'unclustered-point',
	type: 'circle',
	source: 'earthquakes',
	filter: ['!', ['has', 'point_count']],
	paint: {
	'circle-color': '#11b4da',
	'circle-radius': 4,
	'circle-stroke-width': 1,
	'circle-stroke-color': '#fff'
	}
	});
	});
	</script>

	</body>
	</html>