nickpeihl · September 2, 2016 00:00
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.js'></script>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.css' rel='stylesheet' />
        <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }
        </style>
    </head>
    <body>
        <!-- Based on https://www.mapbox.com/mapbox-gl-js/example/heatmap/ -->
        <div id='map'></div>

        <script>
         mapboxgl.accessToken = 'pk.eyJ1IjoibnBlaWhsIiwiYSI6InVmU21qeVUifQ.jwa9V6XsmccKsEHKh5QfmQ';
         var map = new mapboxgl.Map({
             container: 'map',
             style: 'mapbox://styles/mapbox/dark-v9',
             center: [-123.09124, 48.53300], // starting position
             zoom: 11 // starting zoom
         });

         map.on('load', function() {

             // Add a new source from our GeoJSON data and set the
             // 'cluster' option to true.
             map.addSource("addresses", {
                 type: "geojson",
                 // Point to GeoJSON data. This example generates a heatmap for
                 // all addresses in San Juan County, WA.
                 // Find the addresses dataset at http://data.sjcgis.org/.
                 // The URL is copied from the GeoJSON box under Full Dataset in
                 // the API button.
                 data: "http://data.sjcgis.org/datasets/1669f3152e2c4f4c8dd4228e240a9b7e_0.geojson",
                 cluster: true,
                 clusterMaxZoom: 14, // Max zoom to cluster points on
                 clusterRadius: 20 // Radius of each cluster when clustering points (defaults to 50)
             });

             // Use the addresses source to create four layers:
             // three for each cluster category, and one for unclustered points

             // Each point range gets a different fill color.
             var layers = [
                 [0, 'green'],
                 [30, 'orange'],
                 [200, 'red']
             ];

             layers.forEach(function (layer, i) {
                 map.addLayer({
                     "id": "cluster-" + i,
                     "type": "circle",
                     "source": "addresses",
                     "paint": {
                         "circle-color": layer[1],
                         "circle-radius": 70,
                         "circle-blur": 1 // blur the circles to get a heatmap look
                     },
                     "filter": i === layers.length - 1 ?
                     [">=", "point_count", layer[0]] :
                     ["all",
                      [">=", "point_count", layer[0]],
                      ["<", "point_count", layers[i + 1][0]]]
                 }, 'waterway-label');
             });

             map.addLayer({
                 "id": "unclustered-points",
                 "type": "circle",
                 "source": "addresses",
                 "paint": {
                     "circle-color": 'rgba(0,255,0,0.5)',
                     "circle-radius": 20,
                     "circle-blur": 1
                 },
                 "filter": ["!=", "cluster", true]
             }, 'waterway-label');
         });
        </script>

    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.23.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<!-- Based on https://www.mapbox.com/mapbox-gl-js/example/heatmap/ -->
	<div id='map'></div>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibnBlaWhsIiwiYSI6InVmU21qeVUifQ.jwa9V6XsmccKsEHKh5QfmQ';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/dark-v9',
	center: [-123.09124, 48.53300], // starting position
	zoom: 11 // starting zoom
	});

	map.on('load', function() {

	// Add a new source from our GeoJSON data and set the
	// 'cluster' option to true.
	map.addSource("addresses", {
	type: "geojson",
	// Point to GeoJSON data. This example generates a heatmap for
	// all addresses in San Juan County, WA.
	// Find the addresses dataset at http://data.sjcgis.org/.
	// The URL is copied from the GeoJSON box under Full Dataset in
	// the API button.
	data: "http://data.sjcgis.org/datasets/1669f3152e2c4f4c8dd4228e240a9b7e_0.geojson",
	cluster: true,
	clusterMaxZoom: 14, // Max zoom to cluster points on
	clusterRadius: 20 // Radius of each cluster when clustering points (defaults to 50)
	});

	// Use the addresses source to create four layers:
	// three for each cluster category, and one for unclustered points

	// Each point range gets a different fill color.
	var layers = [
	[0, 'green'],
	[30, 'orange'],
	[200, 'red']
	];

	layers.forEach(function (layer, i) {
	map.addLayer({
	"id": "cluster-" + i,
	"type": "circle",
	"source": "addresses",
	"paint": {
	"circle-color": layer[1],
	"circle-radius": 70,
	"circle-blur": 1 // blur the circles to get a heatmap look
	},
	"filter": i === layers.length - 1 ?
	[">=", "point_count", layer[0]] :
	["all",
	[">=", "point_count", layer[0]],
	["<", "point_count", layers[i + 1][0]]]
	}, 'waterway-label');
	});

	map.addLayer({
	"id": "unclustered-points",
	"type": "circle",
	"source": "addresses",
	"paint": {
	"circle-color": 'rgba(0,255,0,0.5)',
	"circle-radius": 20,
	"circle-blur": 1
	},
	"filter": ["!=", "cluster", true]
	}, 'waterway-label');
	});
	</script>

	</body>
	</html>