Skip to content

Instantly share code, notes, and snippets.

@mike-marcacci

mike-marcacci/index.html

Created July 4, 2018 21:47
Show Gist options
  • Save mike-marcacci/8b426afeb8cc809cd122afcd391930a6 to your computer and use it in GitHub Desktop.
Save mike-marcacci/8b426afeb8cc809cd122afcd391930a6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mike-marcacci created this gist Jul 4, 2018.
    154 changes: 154 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,154 @@
    <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>