malwoodsantoro · July 31, 2020 00:29
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <title>Create a heatmap layer</title>
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
 <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
 <style>
 	body { margin: 0; padding: 0; }
 	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
  #menu {
    background: #fff;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    border-radius: 3px;
    width: 120px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    font-family: 'Open Sans', sans-serif;
  }

  #menu a {
    font-size: 13px;
    color: #404040;
    display: block;
    margin: 0;
    padding: 0;
    padding: 10px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    text-align: center;
  }

  #menu a.active {
    background-color: #3887be;
    color: #ffffff;
  }
 
 </style>
 </head>
 <body>
 <nav id="menu"></nav>
 <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: [-120, 50],
        zoom: 2
    });

    map.on('load', function() {
        // Add a geojson point source.
        // Heatmap layers also work with a vector tile source.
        map.addSource('earthquakes', {
            'type': 'geojson',
            'data':
                'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson'
        });

        map.addLayer(
            {
                'id': 'earthquakes-heat',
                'type': 'heatmap',
                'source': 'earthquakes',
                'maxzoom': 9,
                'paint': {
                    // Increase the heatmap weight based on frequency and property magnitude
                    'heatmap-weight': [
                        'interpolate',
                        ['linear'],
                        ['get', 'mag'],
                        0,
                        0,
                        6,
                        1
                    ],
                    // Increase the heatmap color weight weight by zoom level
                    // heatmap-intensity is a multiplier on top of heatmap-weight
                    'heatmap-intensity': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        0,
                        1,
                        9,
                        3
                    ],
                    'heatmap-opacity-transition': {
                      "duration": 2000,
                      "delay": 0
                    },
                    // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
                    // Begin color ramp at 0-stop with a 0-transparancy color
                    // to create a blur-like effect.
                    'heatmap-color': [
                        'interpolate',
                        ['linear'],
                        ['heatmap-density'],
                        0,
                        'rgba(33,102,172,0)',
                        0.2,
                        'rgb(103,169,207)',
                        0.4,
                        'rgb(209,229,240)',
                        0.6,
                        'rgb(253,219,199)',
                        0.8,
                        'rgb(239,138,98)',
                        1,
                        'rgb(178,24,43)'
                    ],
                    // Adjust the heatmap radius by zoom level
                    'heatmap-radius': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        0,
                        2,
                        9,
                        20
                    ],
                    // Transition from heatmap to circle layer by zoom level
                    'heatmap-opacity': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        7,
                        1,
                        9,
                        0
                    ]
                }
            },
            'waterway-label'
        );

        map.addLayer(
            {
                'id': 'earthquakes-point',
                'type': 'circle',
                'source': 'earthquakes',
                'minzoom': 7,
                'paint': {
                    // Size circle radius by earthquake magnitude and zoom level
                    'circle-radius': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        7,
                        ['interpolate', ['linear'], ['get', 'mag'], 1, 1, 6, 4],
                        16,
                        ['interpolate', ['linear'], ['get', 'mag'], 1, 5, 6, 50]
                    ],
                    // Color circle by earthquake magnitude
                    'circle-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'mag'],
                        1,
                        'rgba(33,102,172,0)',
                        2,
                        'rgb(103,169,207)',
                        3,
                        'rgb(209,229,240)',
                        4,
                        'rgb(253,219,199)',
                        5,
                        'rgb(239,138,98)',
                        6,
                        'rgb(178,24,43)'
                    ],
                    'circle-stroke-color': 'white',
                    'circle-stroke-width': 1,
                    // Transition from heatmap to circle layer by zoom level
                    'circle-opacity': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        7,
                        0,
                        8,
                        1
                    ]
                }
            },
            'waterway-label'
        );

      var link = document.createElement('a');
      link.href = '#';
      link.className = 'active';
      link.textContent = 'Toggle visibility';

      link.onclick = function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (this.className === 'active') {
            var opacity = map.getPaintProperty('earthquakes-heat', 'heatmap-opacity');
            map.setPaintProperty('earthquakes-heat', 'heatmap-opacity', 0);
            this.className = '';
          } else {
            map.setPaintProperty('earthquakes-heat', 'heatmap-opacity', opacity);
            this.className = 'active';
          }
      }
        var layers = document.getElementById('menu');
        layers.appendChild(link);
    });

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Create a heatmap layer</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
	#menu {
	background: #fff;
	position: absolute;
	z-index: 1;
	top: 10px;
	right: 10px;
	border-radius: 3px;
	width: 120px;
	border: 1px solid rgba(0, 0, 0, 0.4);
	font-family: 'Open Sans', sans-serif;
	}

	#menu a {
	font-size: 13px;
	color: #404040;
	display: block;
	margin: 0;
	padding: 0;
	padding: 10px;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	text-align: center;
	}

	#menu a.active {
	background-color: #3887be;
	color: #ffffff;
	}

	</style>
	</head>
	<body>
	<nav id="menu"></nav>
	<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: [-120, 50],
	zoom: 2
	});

	map.on('load', function() {
	// Add a geojson point source.
	// Heatmap layers also work with a vector tile source.
	map.addSource('earthquakes', {
	'type': 'geojson',
	'data':
	'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson'
	});

	map.addLayer(
	{
	'id': 'earthquakes-heat',
	'type': 'heatmap',
	'source': 'earthquakes',
	'maxzoom': 9,
	'paint': {
	// Increase the heatmap weight based on frequency and property magnitude
	'heatmap-weight': [
	'interpolate',
	['linear'],
	['get', 'mag'],
	0,
	0,
	6,
	1
	],
	// Increase the heatmap color weight weight by zoom level
	// heatmap-intensity is a multiplier on top of heatmap-weight
	'heatmap-intensity': [
	'interpolate',
	['linear'],
	['zoom'],
	0,
	1,
	9,
	3
	],
	'heatmap-opacity-transition': {
	"duration": 2000,
	"delay": 0
	},
	// Color ramp for heatmap. Domain is 0 (low) to 1 (high).
	// Begin color ramp at 0-stop with a 0-transparancy color
	// to create a blur-like effect.
	'heatmap-color': [
	'interpolate',
	['linear'],
	['heatmap-density'],
	0,
	'rgba(33,102,172,0)',
	0.2,
	'rgb(103,169,207)',
	0.4,
	'rgb(209,229,240)',
	0.6,
	'rgb(253,219,199)',
	0.8,
	'rgb(239,138,98)',
	1,
	'rgb(178,24,43)'
	],
	// Adjust the heatmap radius by zoom level
	'heatmap-radius': [
	'interpolate',
	['linear'],
	['zoom'],
	0,
	2,
	9,
	20
	],
	// Transition from heatmap to circle layer by zoom level
	'heatmap-opacity': [
	'interpolate',
	['linear'],
	['zoom'],
	7,
	1,
	9,
	0
	]
	}
	},
	'waterway-label'
	);

	map.addLayer(
	{
	'id': 'earthquakes-point',
	'type': 'circle',
	'source': 'earthquakes',
	'minzoom': 7,
	'paint': {
	// Size circle radius by earthquake magnitude and zoom level
	'circle-radius': [
	'interpolate',
	['linear'],
	['zoom'],
	7,
	['interpolate', ['linear'], ['get', 'mag'], 1, 1, 6, 4],
	16,
	['interpolate', ['linear'], ['get', 'mag'], 1, 5, 6, 50]
	],
	// Color circle by earthquake magnitude
	'circle-color': [
	'interpolate',
	['linear'],
	['get', 'mag'],
	1,
	'rgba(33,102,172,0)',
	2,
	'rgb(103,169,207)',
	3,
	'rgb(209,229,240)',
	4,
	'rgb(253,219,199)',
	5,
	'rgb(239,138,98)',
	6,
	'rgb(178,24,43)'
	],
	'circle-stroke-color': 'white',
	'circle-stroke-width': 1,
	// Transition from heatmap to circle layer by zoom level
	'circle-opacity': [
	'interpolate',
	['linear'],
	['zoom'],
	7,
	0,
	8,
	1
	]
	}
	},
	'waterway-label'
	);

	var link = document.createElement('a');
	link.href = '#';
	link.className = 'active';
	link.textContent = 'Toggle visibility';

	link.onclick = function (e) {
	e.preventDefault();
	e.stopPropagation();
	if (this.className === 'active') {
	var opacity = map.getPaintProperty('earthquakes-heat', 'heatmap-opacity');
	map.setPaintProperty('earthquakes-heat', 'heatmap-opacity', 0);
	this.className = '';
	} else {
	map.setPaintProperty('earthquakes-heat', 'heatmap-opacity', opacity);
	this.className = 'active';
	}
	}
	var layers = document.getElementById('menu');
	layers.appendChild(link);
	});

	</script>

	</body>
	</html>