malwoodsantoro · March 4, 2022 04:40
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/v2.7.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.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: [-119.85731620368927, 39.49178075110618],
      zoom: 6
    });

    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: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
        cluster: true,
        clusterMaxZoom: 14, // 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: "earthquakes",
        filter: ["has", "point_count"],
        paint: {
          "circle-color": [
            "step",
            ["get", "point_count"],
            "#51bbd6",
            100,
            "#f1f075",
            750,
            "#f28cb1"
          ],
          "circle-radius": [
            "step",
            ["get", "point_count"],
            20,
            100,
            30,
            750,
            40
          ]
        }
      });

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

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

      // inspect a cluster on click
      map.on('click', 'clusters', function (e) {

        var features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
        var coordinates = e.features[0].geometry.coordinates.slice();
        var clusterId = features[0].properties.cluster_id,
          point_count = features[0].properties.point_count,
          clusterSource = map.getSource('earthquakes');

        // Get all points under a cluster
        clusterSource.getClusterLeaves(clusterId, point_count, 0, function (err, aFeatures) {
          var popupString = "";
          var childrenCount = Object.keys(aFeatures).length
          aFeatures.forEach((feature) => {
            popupString += feature.properties.mag + "<br>";
            console.log(popupString)
          })
          new mapboxgl.Popup()
            .setLngLat(coordinates)
            .setHTML("<h1>Number of cluster children</h1>" + childrenCount + "<h1>Magnitudes of cluster children</h1>" + popupString)
            .addTo(map);
        })

      });

      map.on('mouseenter', 'clusters', function () {
        map.getCanvas().style.cursor = 'pointer';
      });
      map.on('mouseleave', 'clusters', function () {
        map.getCanvas().style.cursor = '';
      });
    });
  </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/v2.7.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.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: [-119.85731620368927, 39.49178075110618],
	zoom: 6
	});

	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: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
	cluster: true,
	clusterMaxZoom: 14, // 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: "earthquakes",
	filter: ["has", "point_count"],
	paint: {
	"circle-color": [
	"step",
	["get", "point_count"],
	"#51bbd6",
	100,
	"#f1f075",
	750,
	"#f28cb1"
	],
	"circle-radius": [
	"step",
	["get", "point_count"],
	20,
	100,
	30,
	750,
	40
	]
	}
	});

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

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

	// inspect a cluster on click
	map.on('click', 'clusters', function (e) {

	var features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
	var coordinates = e.features[0].geometry.coordinates.slice();
	var clusterId = features[0].properties.cluster_id,
	point_count = features[0].properties.point_count,
	clusterSource = map.getSource('earthquakes');

	// Get all points under a cluster
	clusterSource.getClusterLeaves(clusterId, point_count, 0, function (err, aFeatures) {
	var popupString = "";
	var childrenCount = Object.keys(aFeatures).length
	aFeatures.forEach((feature) => {
	popupString += feature.properties.mag + "<br>";
	console.log(popupString)
	})
	new mapboxgl.Popup()
	.setLngLat(coordinates)
	.setHTML("<h1>Number of cluster children</h1>" + childrenCount + "<h1>Magnitudes of cluster children</h1>" + popupString)
	.addTo(map);
	})

	});

	map.on('mouseenter', 'clusters', function () {
	map.getCanvas().style.cursor = 'pointer';
	});
	map.on('mouseleave', 'clusters', function () {
	map.getCanvas().style.cursor = '';
	});
	});
	</script>

	</body>

	</html>