mike-marcacci/index.html

## index.html
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=2000, initial-scale=1">

  <!-- Mapbox -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.46.0/mapbox-gl.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.46.0/mapbox-gl.css">

  <!-- Demo Styles -->
  <style type="text/css">
    body {
      margin: 0;
    }

    #map {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>

  <!-- Demo Script -->
  <script type="text/javascript">
    window.onload = function() {
      mapboxgl.accessToken = 'pk.eyJ1IjoibWlrZS1tYXJjYWNjaSIsImEiOiIwZWRmYTVmNTQ5ODcwZjYzYTdmNjQ2NWY3NWY4OWZlOCJ9.vXAlv2QqEUkMrlDEaUY33w';

      // Create a mapbox map
      const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/dark-v9',
        center: [-120, 50],
        zoom: 2
      });

      // Apply downloaded data & create heatmap layers
      window.applyData = function(data) {
        map.addSource('earthquakes', {
          type: "geojson",
          data: data
        });

        map.addLayer({
          "id": "earthquakes-heat",
          "type": "heatmap",
          "source": "earthquakes",
          "maxzoom": 18,
          paint: {
            "heatmap-intensity": {
              stops: [
                [0, 1],
                [14, 3]
              ]
            },
            "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)"
            ],
            "heatmap-radius": {
              stops: [
                [0, 2],
                [14, 20]
              ]
            },
            "heatmap-opacity": {
              default: 1,
              stops: [
                [9, 1],
                [14, 1],
                [18, 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');
      }

      // Once the map is loaded, download the data using a JSON-P proxy
      map.on('load', function() {
        const script = document.createElement('script');
        script.src = "https://jsonp.afeld.me/?callback=applyData&url=https%3A%2F%2Fwww.mapbox.com%2Fmapbox-gl-js%2Fassets%2Fearthquakes.geojson";
        document.getElementsByTagName('head')[0].appendChild(script);
      });
    }
  </script>
</head>

<body>
  <div id="map" />
</body>

</html>
	<html>

	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title></title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="robots" content="noindex, nofollow">
	<meta name="googlebot" content="noindex, nofollow">
	<meta name="viewport" content="width=2000, initial-scale=1">

	<!-- Mapbox -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.46.0/mapbox-gl.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.46.0/mapbox-gl.css">

	<!-- Demo Styles -->
	<style type="text/css">
	body {
	margin: 0;
	}

	#map {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	</style>

	<!-- Demo Script -->
	<script type="text/javascript">
	window.onload = function() {
	mapboxgl.accessToken = 'pk.eyJ1IjoibWlrZS1tYXJjYWNjaSIsImEiOiIwZWRmYTVmNTQ5ODcwZjYzYTdmNjQ2NWY3NWY4OWZlOCJ9.vXAlv2QqEUkMrlDEaUY33w';

	// Create a mapbox map
	const map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/dark-v9',
	center: [-120, 50],
	zoom: 2
	});

	// Apply downloaded data & create heatmap layers
	window.applyData = function(data) {
	map.addSource('earthquakes', {
	type: "geojson",
	data: data
	});

	map.addLayer({
	"id": "earthquakes-heat",
	"type": "heatmap",
	"source": "earthquakes",
	"maxzoom": 18,
	paint: {
	"heatmap-intensity": {
	stops: [
	[0, 1],
	[14, 3]
	]
	},
	"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)"
	],
	"heatmap-radius": {
	stops: [
	[0, 2],
	[14, 20]
	]
	},
	"heatmap-opacity": {
	default: 1,
	stops: [
	[9, 1],
	[14, 1],
	[18, 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');
	}

	// Once the map is loaded, download the data using a JSON-P proxy
	map.on('load', function() {
	const script = document.createElement('script');
	script.src = "https://jsonp.afeld.me/?callback=applyData&url=https%3A%2F%2Fwww.mapbox.com%2Fmapbox-gl-js%2Fassets%2Fearthquakes.geojson";
	document.getElementsByTagName('head')[0].appendChild(script);
	});
	}
	</script>
	</head>

	<body>
	<div id="map" />
	</body>

	</html>