Skip to content

Instantly share code, notes, and snippets.

@ryanbaumann

ryanbaumann/index.html

Last active February 3, 2023 08:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ryanbaumann/04c442906638e27db9da243f29195592 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ryanbaumann/04c442906638e27db9da243f29195592 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ryanbaumann revised this gist Jan 27, 2022. 1 changed file with 254 additions and 245 deletions.
    499 changes: 254 additions & 245 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,123 +5,126 @@
    <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/v2.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body {
    margin: 0;
    padding: 0;
    }

    #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    }

    .map-overlay {
    position: absolute;
    width: 180px;
    top: 0;
    left: 10px;
    padding: 10px;
    margin-left: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 5px;
    z-index: 1;
    }

    .map-overlay .map-overlay-inner {
    background: rgba(0, 0, 0, .8);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
    z-index: 1;
    }

    .map-overlay-inner fieldset {
    border: none;
    padding: 0;
    margin: 0 0 10px;
    z-index: 1;
    }
    /* Dark attribution */

    .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
    background: rgba(0, 0, 0, .8);
    }

    .mapboxgl-ctrl.mapboxgl-ctrl-attrib a {
    color: #fff;
    }
    /* Dark popup */

    .mapboxgl-popup-content {
    background-color: #202020;
    color: #fff;
    margin-left: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 5px;
    z-index: 1000;
    }

    .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
    .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
    .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-top-color: #202020;
    }

    .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
    .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
    .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-bottom-color: #202020;
    }

    .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: #202020;
    }

    .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: #202020;
    }

    #popup-menu ul,
    #menu li {
    margin: 0;
    padding: 0;
    z-index: 100;
    }

    .mapboxgl-ctrl-group {
    -webkit-filter: invert(100%);
    }

    .loader {
    margin: -10px 0 0 -250px;
    height: 100px;
    width: 20%;
    position: fixed;
    text-align: center;
    padding: 1em;
    top: 50%;
    left: 50%;
    margin: 0 auto 1em;
    z-index: 9999;
    }
    /*
    body {
    margin: 0;
    padding: 0;
    }

    #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    }

    .map-overlay {
    position: absolute;
    width: 180px;
    top: 0;
    left: 10px;
    padding: 10px;
    margin-left: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 5px;
    z-index: 1;
    }

    .map-overlay .map-overlay-inner {
    background: rgba(0, 0, 0, .8);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
    z-index: 1;
    }

    .map-overlay-inner fieldset {
    border: none;
    padding: 0;
    margin: 0 0 10px;
    z-index: 1;
    }

    /* Dark attribution */

    .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
    background: rgba(0, 0, 0, .8);
    }

    .mapboxgl-ctrl.mapboxgl-ctrl-attrib a {
    color: #fff;
    }

    /* Dark popup */

    .mapboxgl-popup-content {
    background-color: #202020;
    color: #fff;
    margin-left: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 5px;
    z-index: 1000;
    }

    .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
    .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
    .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-top-color: #202020;
    }

    .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
    .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
    .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-bottom-color: #202020;
    }

    .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: #202020;
    }

    .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: #202020;
    }

    #popup-menu ul,
    #menu li {
    margin: 0;
    padding: 0;
    z-index: 100;
    }

    .mapboxgl-ctrl-group {
    -webkit-filter: invert(100%);
    }

    .loader {
    margin: -10px 0 0 -250px;
    height: 100px;
    width: 20%;
    position: fixed;
    text-align: center;
    padding: 1em;
    top: 50%;
    left: 50%;
    margin: 0 auto 1em;
    z-index: 9999;
    }

    /*
    Set the color of the icon
    */
    svg path,
    svg rect {
    fill: #FF6700;
    }

    svg path,
    svg rect {
    fill: #FF6700;
    }
    </style>
    </head>

    @@ -138,156 +141,162 @@
    <option value='PED_KIL'>Pedestrian Fatalities</option>
    </select>
    </fieldset>
    <b><a href="https://data.cityofnewyork.us/Public-Safety/NYPD-Motor-Vehicle-Collisions/h9gi-nx95" target="_blank">NYC Open Data</a></b>
    <b><a href="https://data.cityofnewyork.us/Public-Safety/NYPD-Motor-Vehicle-Collisions/h9gi-nx95"
    target="_blank">NYC Open Data</a></b>
    </div>
    </div>
    <div class="loader loader--style1" title="0" id="loader">
    <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
    <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
    <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40"
    xml:space="preserve">
    <path opacity="0.2" fill="#000"
    d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
    s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
    c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
    <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
    C22.32,8.481,24.301,9.057,26.013,10.047z">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite" />
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20"
    to="360 20 20" dur="0.5s" repeatCount="indefinite" />
    </path>
    </svg>
    </div>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoicnNiYXVtYW5uIiwiYSI6ImNqNmhkZnhkZDA4M3Yyd3AwZDR4cmdhcDIifQ.TGKKAC6pPP0L-uMDJ5xFAA';
    var bounds = [
    [-75.04728500751165, 39.68392799015035],
    [-72.91058699000139, 41.87764500765852]
    ];
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [-74.0059, 40.7128],
    zoom: 10,
    minZoom: 9,
    maxZoom: 18,
    pitch: 40,
    maxBounds: bounds
    });

    function init() {
    map.addSource('veh-incidents-1', {
    type: 'geojson',
    data: 'https://data.cityofnewyork.us/resource/h9gi-nx95.geojson',
    buffer: 0,
    maxzoom: 16
    mapboxgl.accessToken = 'pk.eyJ1IjoicnNiYXVtYW5uIiwiYSI6ImNqNmhkZnhkZDA4M3Yyd3AwZDR4cmdhcDIifQ.TGKKAC6pPP0L-uMDJ5xFAA';
    var bounds = [
    [-75.04728500751165, 39.68392799015035],
    [-72.91058699000139, 41.87764500765852]
    ];
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v10',
    center: [-74.0059, 40.7128],
    zoom: 10,
    minZoom: 9,
    maxZoom: 18,
    pitch: 40,
    maxBounds: bounds
    });

    if (window.location.search.indexOf('embed') !== -1) map.scrollZoom.disable();

    map.addLayer({
    'id': 'veh-incd-1',
    'type': 'circle',
    'source': 'veh-incidents-1',
    'paint': {
    'circle-color': {
    property: 'CYC_INJ',
    type: 'interval',
    stops: [
    [1, 'orange'],
    [2, 'red']
    ]
    function init() {
    map.addSource('veh-incidents-1', {
    type: 'geojson',
    data: 'https://data.cityofnewyork.us/resource/h9gi-nx95.geojson',
    buffer: 0,
    maxzoom: 16
    });

    if (window.location.search.indexOf('embed') !== -1) map.scrollZoom.disable();

    map.addLayer({
    'id': 'veh-incd-1',
    'type': 'circle',
    'source': 'veh-incidents-1',
    'paint': {
    'circle-color': {
    property: 'CYC_INJ',
    type: 'interval',
    stops: [
    [1, 'orange'],
    [2, 'red']
    ]
    },
    'circle-radius': {
    property: 'CYC_INJ',
    base: 3,
    type: 'interval',
    stops: [
    [1, 3],
    [2, 8],
    [3, 12]
    ]
    },
    'circle-opacity': 0.8,
    'circle-blur': 0.5
    },
    'circle-radius': {
    property: 'CYC_INJ',
    base: 3,
    type: 'interval',
    stops: [
    [1, 3],
    [2, 8],
    [3, 12]
    ]
    'filter': ['>=', 'CYC_INJ', 1]
    }, 'waterway-label');

    map.addLayer({
    'id': 'veh-incd-base-1',
    'type': 'circle',
    'source': 'veh-incidents-1',
    'paint': {
    'circle-color': 'yellow',
    'circle-radius': 3,
    'circle-opacity': 0.3,
    'circle-blur': 1
    },
    'circle-opacity': 0.8,
    'circle-blur': 0.5
    },
    'filter': ['>=', 'CYC_INJ', 1]
    }, 'waterway-label');

    map.addLayer({
    'id': 'veh-incd-base-1',
    'type': 'circle',
    'source': 'veh-incidents-1',
    'paint': {
    'circle-color': 'yellow',
    'circle-radius': 3,
    'circle-opacity': 0.3,
    'circle-blur': 1
    },
    'filter': ['<', 'CYC_INJ', 1]
    }, 'waterway-label');



    map.once('style.load', function(e) {
    init();
    map.addControl(new mapboxgl.NavigationControl());
    map.on('click', function(e) {
    var features = map.queryRenderedFeatures(e.point, {
    layers: ['veh-incd-1', 'veh-incd-2']
    });
    if (!features.length) {
    return;
    }
    var feature = features[0];

    var popup = new mapboxgl.Popup()
    .setLngLat(map.unproject(e.point))
    .setHTML('<h3>Collision Detail</h3>' +
    '<ul>' +
    '<li>Year: <b>' + feature.properties.YEAR + '</b></li>' +
    '<li>Pedestrian Injuries: <b>' + feature.properties.PED_INJ + '</b></li>' +
    '<li>Pedestrian Fatalities: <b>' + feature.properties.PED_KIL + '</b></li>' +
    '<li>Cyclist Injuries: <b>' + feature.properties.CYC_INJ + '</b></li>' +
    '<li>Cyclist Fatalities: <b>' + feature.properties.CYC_KIL + '</b></li>' +
    '</ul>')
    .addTo(map);
    });
    'filter': ['<', 'CYC_INJ', 1]
    }, 'waterway-label');

    //Hide loading bar once tiles from geojson are loaded
    map.on('data', function(e) {
    if (e.dataType === 'source' && e.sourceId === 'veh-incidents-1') {
    document.getElementById("loader").style.visibility = "hidden";
    }
    })

    // Use the same approach as above to indicate that the symbols are clickable
    // by changing the cursor style to 'pointer'.
    map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, {
    layers: ['veh-incd-1', 'veh-incd-2']
    });
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
    });
    var prop = document.getElementById('prop');
    prop.addEventListener('change', function() {
    map.setPaintProperty('veh-incd-1', 'circle-color', {
    property: prop.value,
    type: 'interval',
    stops: [
    [1, 'orange'],
    [2, 'red']
    ]
    });

    map.setPaintProperty('veh-incd-1', 'circle-radius', {
    property: prop.value,
    base: 3,
    type: 'interval',
    stops: [
    [1, 3],
    [2, 6],
    [3, 9]
    ]
    });

    map.setFilter('veh-incd-1', ['>=', prop.value, 1])
    });
    });
    map.once('style.load', function (e) {
    init();
    map.addControl(new mapboxgl.NavigationControl());
    map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, {
    layers: ['veh-incd-1', 'veh-incd-2']
    });
    if (!features.length) {
    return;
    }
    var feature = features[0];

    var popup = new mapboxgl.Popup()
    .setLngLat(map.unproject(e.point))
    .setHTML('<h3>Collision Detail</h3>' +
    '<ul>' +
    '<li>Year: <b>' + feature.properties.YEAR + '</b></li>' +
    '<li>Pedestrian Injuries: <b>' + feature.properties.PED_INJ + '</b></li>' +
    '<li>Pedestrian Fatalities: <b>' + feature.properties.PED_KIL + '</b></li>' +
    '<li>Cyclist Injuries: <b>' + feature.properties.CYC_INJ + '</b></li>' +
    '<li>Cyclist Fatalities: <b>' + feature.properties.CYC_KIL + '</b></li>' +
    '</ul>')
    .addTo(map);
    });

    //Hide loading bar once tiles from geojson are loaded
    map.on('data', function (e) {
    if (e.dataType === 'source' && e.sourceId === 'veh-incidents-1') {
    document.getElementById("loader").style.visibility = "hidden";
    }
    })

    // Use the same approach as above to indicate that the symbols are clickable
    // by changing the cursor style to 'pointer'.
    map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point, {
    layers: ['veh-incd-1', 'veh-incd-2']
    });
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
    });
    var prop = document.getElementById('prop');
    prop.addEventListener('change', function () {
    map.setPaintProperty('veh-incd-1', 'circle-color', {
    property: prop.value,
    type: 'interval',
    stops: [
    [1, 'orange'],
    [2, 'red']
    ]
    });

    map.setPaintProperty('veh-incd-1', 'circle-radius', {
    property: prop.value,
    base: 3,
    type: 'interval',
    stops: [
    [1, 3],
    [2, 6],
    [3, 9]
    ]
    });

    map.setFilter('veh-incd-1', ['>=', prop.value, 1]);
    });
    });
    }
    </script>
    </body>

  2. ryanbaumann revised this gist Mar 3, 2021. 1 changed file with 5 additions and 70 deletions.
    75 changes: 5 additions & 70 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -172,14 +172,7 @@
    function init() {
    map.addSource('veh-incidents-1', {
    type: 'geojson',
    data: 'https://raw.githubusercontent.com/iisstizzy/Example-Large-geojson-in-Mapbox-GL-JS/main/nyc-crash-data-a.geojson',
    buffer: 0,
    maxzoom: 16
    });

    map.addSource('veh-incidents-2', {
    type: 'geojson',
    data: 'https://raw.githubusercontent.com/iisstizzy/Example-Large-geojson-in-Mapbox-GL-JS/main/nyc-crash-data-b.geojson',
    data: 'https://data.cityofnewyork.us/resource/h9gi-nx95.geojson',
    buffer: 0,
    maxzoom: 16
    });
    @@ -214,36 +207,7 @@
    },
    'filter': ['>=', 'CYC_INJ', 1]
    }, 'waterway-label');

    map.addLayer({
    'id': 'veh-incd-2',
    'type': 'circle',
    'source': 'veh-incidents-2',
    'paint': {
    'circle-color': {
    property: 'CYC_INJ',
    type: 'interval',
    stops: [
    [1, 'orange'],
    [2, 'red']
    ]
    },
    'circle-radius': {
    property: 'CYC_INJ',
    base: 3,
    type: 'interval',
    stops: [
    [1, 3],
    [2, 8],
    [3, 12]
    ]
    },
    'circle-opacity': 0.8,
    'circle-blur': 0.5
    },
    'filter': ['>=', 'CYC_INJ', 1]
    }, 'waterway-label');


    map.addLayer({
    'id': 'veh-incd-base-1',
    'type': 'circle',
    @@ -257,19 +221,7 @@
    'filter': ['<', 'CYC_INJ', 1]
    }, 'waterway-label');

    map.addLayer({
    'id': 'veh-incd-base-2',
    'type': 'circle',
    'source': 'veh-incidents-2',
    'paint': {
    'circle-color': 'yellow',
    'circle-radius': 3,
    'circle-opacity': 0.3,
    'circle-blur': 1
    },
    'filter': ['<', 'CYC_INJ', 1]
    }, 'waterway-label');
    };


    map.once('style.load', function(e) {
    init();
    @@ -321,14 +273,7 @@
    [2, 'red']
    ]
    });
    map.setPaintProperty('veh-incd-2', 'circle-color', {
    property: prop.value,
    type: 'interval',
    stops: [
    [1, 'orange'],
    [2, 'red']
    ]
    });

    map.setPaintProperty('veh-incd-1', 'circle-radius', {
    property: prop.value,
    base: 3,
    @@ -339,18 +284,8 @@
    [3, 9]
    ]
    });
    map.setPaintProperty('veh-incd-2', 'circle-radius', {
    property: prop.value,
    base: 3,
    type: 'interval',
    stops: [
    [1, 3],
    [2, 6],
    [3, 9]
    ]
    });

    map.setFilter('veh-incd-1', ['>=', prop.value, 1])
    map.setFilter('veh-incd-2', ['>=', prop.value, 1])
    });
    });
    </script>
  3. ryanbaumann revised this gist Mar 3, 2021. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -174,14 +174,14 @@
    type: 'geojson',
    data: 'https://raw.githubusercontent.com/iisstizzy/Example-Large-geojson-in-Mapbox-GL-JS/main/nyc-crash-data-a.geojson',
    buffer: 0,
    maxzoom: 12
    maxzoom: 16
    });

    map.addSource('veh-incidents-2', {
    type: 'geojson',
    data: 'https://raw.githubusercontent.com/iisstizzy/Example-Large-geojson-in-Mapbox-GL-JS/main/nyc-crash-data-b.geojson',
    buffer: 0,
    maxzoom: 12
    maxzoom: 16
    });

    if (window.location.search.indexOf('embed') !== -1) map.scrollZoom.disable();
  4. ryanbaumann revised this gist Mar 3, 2021. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,8 @@
    <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/v1.7.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body {
    @@ -172,14 +172,14 @@
    function init() {
    map.addSource('veh-incidents-1', {
    type: 'geojson',
    data: 'https://dl.dropbox.com/s/z4hajzr32e59kv4/nyc_pedcyc_collisions_1.geojson?dl=0',
    data: 'https://raw.githubusercontent.com/iisstizzy/Example-Large-geojson-in-Mapbox-GL-JS/main/nyc-crash-data-a.geojson',
    buffer: 0,
    maxzoom: 12
    });

    map.addSource('veh-incidents-2', {
    type: 'geojson',
    data: 'https://dl.dropbox.com/s/prxhl4whif6tstt/nyc_pedcyc_collisions_2.geojson?dl=0',
    data: 'https://raw.githubusercontent.com/iisstizzy/Example-Large-geojson-in-Mapbox-GL-JS/main/nyc-crash-data-b.geojson',
    buffer: 0,
    maxzoom: 12
    });
  5. ryanbaumann revised this gist Feb 4, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,8 @@
    <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/v1.4.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body {
  6. ryanbaumann revised this gist Oct 8, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,8 @@
    <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.54.0-beta.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0-beta.1/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body {
  7. ryanbaumann revised this gist May 28, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -153,7 +153,7 @@
    </svg>
    </div>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoicnNiYXVtYW5uIiwiYSI6IjdiOWEzZGIyMGNkOGY3NWQ4ZTBhN2Y5ZGU2Mzg2NDY2In0.jycgv7qwF8MMIWt4cT0RaQ';
    mapboxgl.accessToken = 'pk.eyJ1IjoicnNiYXVtYW5uIiwiYSI6ImNqNmhkZnhkZDA4M3Yyd3AwZDR4cmdhcDIifQ.TGKKAC6pPP0L-uMDJ5xFAA';
    var bounds = [
    [-75.04728500751165, 39.68392799015035],
    [-72.91058699000139, 41.87764500765852]
  8. ryanbaumann revised this gist Apr 15, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,8 @@
    <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.42.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0-beta.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0-beta.1/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body {
  9. ryanbaumann revised this gist Dec 5, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,8 @@
    <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.41.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body {
  10. ryanbaumann revised this gist Nov 10, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,8 @@
    <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.39.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body {
  11. ryanbaumann revised this gist Sep 2, 2017. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -173,14 +173,14 @@
    map.addSource('veh-incidents-1', {
    type: 'geojson',
    data: 'https://dl.dropbox.com/s/z4hajzr32e59kv4/nyc_pedcyc_collisions_1.geojson?dl=0',
    buffer: 1,
    buffer: 0,
    maxzoom: 12
    });

    map.addSource('veh-incidents-2', {
    type: 'geojson',
    data: 'https://dl.dropbox.com/s/prxhl4whif6tstt/nyc_pedcyc_collisions_2.geojson?dl=0',
    buffer: 1,
    buffer: 0,
    maxzoom: 12
    });

    @@ -271,7 +271,7 @@
    }, 'waterway-label');
    };

    map.once('load', function(e) {
    map.once('style.load', function(e) {
    init();
    map.addControl(new mapboxgl.NavigationControl());
    map.on('click', function(e) {
  12. ryanbaumann revised this gist Aug 7, 2017. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    # Example - Large geojson in Mapbox GL JS
    * Load svg icon appears while data is loading
    * Uncompressed geojson file is 29 MB on dropbox
    * Total time to load depends on client internet speed & client GPU
    * Total time to load depends on client internet speed & client GPU
    * Geojson source is split into two parts to optimize load and render time
  13. ryanbaumann revised this gist Aug 7, 2017. 1 changed file with 82 additions and 16 deletions.
    98 changes: 82 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,8 @@
    <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.38.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body {
    @@ -170,19 +170,26 @@
    });

    function init() {
    map.addSource('veh-incidents', {
    map.addSource('veh-incidents-1', {
    type: 'geojson',
    data: 'https://dl.dropboxusercontent.com/s/m4rg8k8l3odz7ma/nyc_pedcyc_collisions_161004.geojson',
    data: 'https://dl.dropbox.com/s/z4hajzr32e59kv4/nyc_pedcyc_collisions_1.geojson?dl=0',
    buffer: 1,
    maxzoom: 12
    });

    map.addSource('veh-incidents-2', {
    type: 'geojson',
    data: 'https://dl.dropbox.com/s/prxhl4whif6tstt/nyc_pedcyc_collisions_2.geojson?dl=0',
    buffer: 1,
    maxzoom: 12
    });

    if (window.location.search.indexOf('embed') !== -1) map.scrollZoom.disable();

    map.addLayer({
    'id': 'veh-incd',
    'id': 'veh-incd-1',
    'type': 'circle',
    'source': 'veh-incidents',
    'source': 'veh-incidents-1',
    'paint': {
    'circle-color': {
    property: 'CYC_INJ',
    @@ -209,9 +216,51 @@
    }, 'waterway-label');

    map.addLayer({
    'id': 'veh-incd-base',
    'id': 'veh-incd-2',
    'type': 'circle',
    'source': 'veh-incidents',
    'source': 'veh-incidents-2',
    'paint': {
    'circle-color': {
    property: 'CYC_INJ',
    type: 'interval',
    stops: [
    [1, 'orange'],
    [2, 'red']
    ]
    },
    'circle-radius': {
    property: 'CYC_INJ',
    base: 3,
    type: 'interval',
    stops: [
    [1, 3],
    [2, 8],
    [3, 12]
    ]
    },
    'circle-opacity': 0.8,
    'circle-blur': 0.5
    },
    'filter': ['>=', 'CYC_INJ', 1]
    }, 'waterway-label');

    map.addLayer({
    'id': 'veh-incd-base-1',
    'type': 'circle',
    'source': 'veh-incidents-1',
    'paint': {
    'circle-color': 'yellow',
    'circle-radius': 3,
    'circle-opacity': 0.3,
    'circle-blur': 1
    },
    'filter': ['<', 'CYC_INJ', 1]
    }, 'waterway-label');

    map.addLayer({
    'id': 'veh-incd-base-2',
    'type': 'circle',
    'source': 'veh-incidents-2',
    'paint': {
    'circle-color': 'yellow',
    'circle-radius': 3,
    @@ -227,12 +276,11 @@
    map.addControl(new mapboxgl.NavigationControl());
    map.on('click', function(e) {
    var features = map.queryRenderedFeatures(e.point, {
    layers: ['veh-incd']
    layers: ['veh-incd-1', 'veh-incd-2']
    });
    if (!features.length) {
    return;
    }
    console.log('click')
    var feature = features[0];

    var popup = new mapboxgl.Popup()
    @@ -250,8 +298,7 @@

    //Hide loading bar once tiles from geojson are loaded
    map.on('data', function(e) {
    console.log(e)
    if (e.dataType === 'source' && e.sourceId === 'veh-incidents') {
    if (e.dataType === 'source' && e.sourceId === 'veh-incidents-1') {
    document.getElementById("loader").style.visibility = "hidden";
    }
    })
    @@ -260,21 +307,39 @@
    // by changing the cursor style to 'pointer'.
    map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, {
    layers: ['veh-incd']
    layers: ['veh-incd-1', 'veh-incd-2']
    });
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
    });
    var prop = document.getElementById('prop');
    prop.addEventListener('change', function() {
    map.setPaintProperty('veh-incd', 'circle-color', {
    map.setPaintProperty('veh-incd-1', 'circle-color', {
    property: prop.value,
    type: 'interval',
    stops: [
    [1, 'orange'],
    [2, 'red']
    ]
    });
    map.setPaintProperty('veh-incd', 'circle-radius', {
    map.setPaintProperty('veh-incd-2', 'circle-color', {
    property: prop.value,
    type: 'interval',
    stops: [
    [1, 'orange'],
    [2, 'red']
    ]
    });
    map.setPaintProperty('veh-incd-1', 'circle-radius', {
    property: prop.value,
    base: 3,
    type: 'interval',
    stops: [
    [1, 3],
    [2, 6],
    [3, 9]
    ]
    });
    map.setPaintProperty('veh-incd-2', 'circle-radius', {
    property: prop.value,
    base: 3,
    type: 'interval',
    @@ -284,7 +349,8 @@
    [3, 9]
    ]
    });
    map.setFilter('veh-incd', ['>=', prop.value, 1])
    map.setFilter('veh-incd-1', ['>=', prop.value, 1])
    map.setFilter('veh-incd-2', ['>=', prop.value, 1])
    });
    });
    </script>
  14. ryanbaumann revised this gist Jul 20, 2017. 1 changed file with 1 addition and 4 deletions.
    5 changes: 1 addition & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -152,9 +152,6 @@
    </path>
    </svg>
    </div>
    <a class='pin-bottomleft z1 pad1' target='_blank' href='https://www.mapbox.com/'>
    <img src='data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjU5LjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCA1OS4xIDE4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1OS4xMTkgMTgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik0xLjQgMEMwLjYgMC4xIDAgMC44IDAgMS41TDAgMTMuNEMwIDE0LjIgMC43IDE0LjggMS41IDE0LjhMMy4zIDE0LjhDNCAxNC44IDQuNyAxNC4yIDQuOCAxMy40TDQuOCA5LjEgNS41IDEwLjNDNiAxMS4yIDcuNSAxMS4yIDggMTAuM0w4LjggOS4xIDguOCAxMy40QzguOCAxNC4xIDkuNSAxNC44IDEwLjIgMTQuOEwxMiAxNC44QzEyLjggMTQuOCAxMy41IDE0LjIgMTMuNSAxMy40TDEzLjUgMTMuMkMxNC41IDE0LjMgMTUuOSAxNSAxNy42IDE1TDIxLjcgMTUgMjEuNyAxNi41QzIxLjcgMTcuMyAyMi4zIDE4IDIzLjEgMThMMjQuOSAxOEMyNS43IDE4IDI2LjQgMTcuMyAyNi40IDE2LjVMMjYuNCAxNUMyOC4xIDE1IDI5LjUgMTQuNCAzMC41IDEzLjNMMzAuNSAxMy41QzMwLjUgMTMuOSAzMC43IDE0LjMgMzEgMTQuNiAzMS4zIDE0LjkgMzEuNiAxNSAzMiAxNUwzNS4zIDE1QzM3LjQgMTUgMzkuMiAxNCA0MC4zIDEyLjMgNDEuMyAxMy45IDQzLjEgMTUgNDUuMSAxNSA0Ni4yIDE1IDQ3LjEgMTQuOCA0Ny45IDE0LjMgNDguMiAxNC42IDQ4LjcgMTQuOCA0OS4xIDE0LjhMNTEuMyAxNC44QzUxLjcgMTQuOCA1Mi4yIDE0LjYgNTIuNSAxNC4yTDUzLjQgMTIuOSA1NC4zIDE0LjJDNTQuNiAxNC42IDU1LjEgMTQuOCA1NS41IDE0LjhMNTcuNyAxNC44QzU4LjggMTQuOCA1OS41IDEzLjQgNTguOSAxMi41TDU2LjMgOC45IDU4LjcgNS41QzU5LjQgNC42IDU4LjYgMy4xIDU3LjUgMy4xTDU1LjMgMy4xQzU0LjkgMy4xIDU0LjQgMy40IDU0LjEgMy44TDUzLjQgNC44IDUyLjcgMy44QzUyLjQgMy40IDUxLjkgMy4xIDUxLjQgMy4xTDQ5LjMgMy4xQzQ4LjggMy4xIDQ4LjMgMy40IDQ4IDMuOCA0Ny4yIDMuMyA0Ni4yIDMgNDUuMSAzIDQzLjEgMyA0MS4zIDQuMSA0MC4yIDUuNyAzOS4yIDQgMzcuNCAzIDM1LjMgM0wzNS4zIDEuNUMzNS4zIDEuMSAzNS4xIDAuNyAzNC44IDAuNCAzNC42IDAuMiAzNC4yIDAgMzMuOCAwTDMyIDBDMzEuMyAwIDMwLjUgMC44IDMwLjUgMS41TDMwLjUgNC43QzI5LjUgMy42IDI4LjEgMyAyNi41IDNMMjMuMSAzQzIyLjQgMyAyMS43IDMuNyAyMS43IDQuNUwyMS43IDQuOEMyMC42IDMuNyAxOS4yIDMgMTcuNiAzIDE1LjkgMyAxNC41IDMuNyAxMy41IDQuOEwxMy41IDEuNUMxMy41IDAuNyAxMi44IDAgMTIgMEwxMC42IDBDOS42IDAgOC40IDAuNCA3LjggMS40TDYuOCAzLjEgNS44IDEuNEM1LjEgMC40IDMuOSAwIDIuOSAwTDEuNSAwIDEuNCAwek0xLjUgMS41TDIuOSAxLjVDMy42IDEuNSA0LjIgMS43IDQuNSAyLjJMNi44IDYuMSA5IDIuMkM5LjMgMS43IDkuOSAxLjUgMTAuNiAxLjVMMTIgMS41IDEyIDEzLjUgMTAuMiAxMy41IDEwLjIgMy42IDYuOCA5LjUgMy4zIDMuNiAzLjMgMTMuNSAxLjUgMTMuNSAxLjUgMS41ek0zMi4xIDEuNUwzMy44IDEuNSAzMy44IDQuNUMzNC40IDQuNSAzNC44IDQuNSAzNS4zIDQuNSAzNy44IDQuNSAzOS43IDYuNCAzOS43IDkgMzkuNyAxMS42IDM3LjggMTMuNSAzNS4zIDEzLjVMMzIuMSAxMy41IDMyLjEgMS41ek0xNy42IDQuNUMyMCA0LjUgMjEuOCA2LjQgMjEuOCA5TDIxLjggMTMuNSAxNy42IDEzLjVDMTUuMSAxMy41IDEzLjQgMTEuNiAxMy40IDkgMTMuNCA2LjQgMTUuMSA0LjUgMTcuNiA0LjV6TTQ1LjEgNC41QzQ3LjUgNC41IDQ5LjUgNi41IDQ5LjUgOSA0OS41IDExLjUgNDcuNSAxMy41IDQ1LjEgMTMuNSA0Mi43IDEzLjUgNDAuNyAxMS41IDQwLjcgOSA0MC43IDYuNSA0Mi43IDQuNSA0NS4xIDQuNXpNMjMuMSA0LjVMMjYuNSA0LjVDMjguOSA0LjUgMzAuOCA2LjQgMzAuOCA5IDMwLjggMTEuNiAyOC45IDEzLjUgMjYuNSAxMy41TDI0LjkgMTMuNSAyNC45IDE2LjUgMjMuMSAxNi41IDIzLjEgNC41ek00OS4zIDQuNUw1MS40IDQuNSA1My40IDcuMyA1NS4zIDQuNSA1Ny41IDQuNSA1NC41IDguOSA1Ny43IDEzLjUgNTUuNSAxMy41IDUzLjQgMTAuNCA1MS4yIDEzLjUgNDkuMSAxMy41IDUyLjMgOC45IDQ5LjMgNC41ek0xNy42IDYuMkMxNi4yIDYuMiAxNS4xIDcuNCAxNS4xIDkgMTUuMSAxMC42IDE2LjIgMTEuOCAxNy42IDExLjhMMjAgMTEuOCAyMCA5QzIwIDcuNCAxOSA2LjIgMTcuNiA2LjJ6TTQ1LjEgNi4yQzQzLjcgNi4yIDQyLjUgNy41IDQyLjUgOSA0Mi41IDEwLjUgNDMuNyAxMS44IDQ1LjEgMTEuOCA0Ni42IDExLjggNDcuNyAxMC41IDQ3LjcgOSA0Ny43IDcuNSA0Ni42IDYuMiA0NS4xIDYuMnpNMjQuOSA2LjNMMjQuOSAxMS44IDI2LjUgMTEuOEMyNy45IDExLjggMjkuMSAxMC41IDI5LjEgOSAyOS4xIDcuNSAyOC4xIDYuMyAyNi41IDYuM0wyNC45IDYuM3pNMzMuOCA2LjNMMzMuOCAxMS44IDM1LjMgMTEuOEMzNi45IDExLjggMzggMTAuNSAzOCA5IDM4IDcuNSAzNi44IDYuMyAzNS4zIDYuM0wzMy44IDYuM3pNMTcuNiA3LjdDMTguMSA3LjcgMTguNSA4LjEgMTguNSA5TDE4LjUgMTAuMyAxNy42IDEwLjNDMTcgMTAuMyAxNi42IDkuOSAxNi42IDkgMTYuNiA4LjEgMTcgNy43IDE3LjYgNy43ek0yNi40IDcuN0MyNy4yIDcuNyAyNy42IDguNCAyNy42IDkgMjcuNiA5LjkgMjYuOSAxMC4zIDI2LjQgMTAuM0wyNi40IDcuN3pNMzUuMSA3LjdDMzUuOCA3LjcgMzYuNSA4LjMgMzYuNSA5IDM2LjUgOS44IDM1LjkgMTAuMyAzNS4xIDEwLjNMMzUuMSA3Ljd6TTQ1LjEgNy43QzQ1LjcgNy43IDQ2LjIgOC4yIDQ2LjIgOSA0Ni4yIDkuOCA0NS43IDEwLjMgNDUuMSAxMC4zIDQ0LjUgMTAuMyA0NCA5LjggNDQgOSA0NCA4LjIgNDQuNSA3LjcgNDUuMSA3Ljd6IiBvcGFjaXR5PSIwLjMiLz48cGF0aCBkPSJtMS41IDEuNSAwIDEyIDEuOCAwIDAtOS45IDMuNSA1LjkgMy41LTUuOSAwIDkuOSAxLjggMCAwLTEyLTEuNCAwQzkuOSAxLjUgOS4zIDEuNyA5IDIuMkw2LjggNi4xIDQuNSAyLjJDNC4yIDEuNyAzLjYgMS41IDIuOSAxLjVMMS41IDEuNVptMzAuNiAwIDAgMTIgMy4zIDBjMi40IDAgNC40LTEuOSA0LjQtNC41IDAtMi42LTEuOS00LjUtNC40LTQuNS0wLjUgMC0wLjkgMC0xLjUgMGwwLTMtMS43IDB6TTE3LjYgNC41Yy0yLjQgMC00LjIgMS45LTQuMiA0LjUgMCAyLjYgMS44IDQuNSA0LjIgNC41bDQuMiAwTDIxLjggOWMwLTIuNi0xLjctNC41LTQuMi00LjV6bTI3LjYgMGMtMi40IDAtNC40IDItNC40IDQuNSAwIDIuNSAyIDQuNSA0LjQgNC41IDIuNCAwIDQuMy0yIDQuMy00LjUgMC0yLjUtMS45LTQuNS00LjMtNC41em0tMjIgMCAwIDEyIDEuOCAwIDAtMyAxLjYgMGMyLjQgMCA0LjMtMS45IDQuMy00LjUgMC0yLjYtMS45LTQuNS00LjMtNC41bC0zLjMgMHptMjYuMiAwIDMgNC40LTMuMiA0LjYgMi4xIDAgMi4yLTMuMSAyLjEgMy4xIDIuMiAwTDU0LjUgOC45IDU3LjUgNC41IDU1LjMgNC41IDUzLjQgNy4zIDUxLjQgNC41IDQ5LjMgNC41Wk0xNy42IDYuMkMxOSA2LjIgMjAgNy40IDIwIDlsMCAyLjgtMi40IDBjLTEuNCAwLTIuNC0xLjItMi40LTIuOCAwLTEuNiAxLTIuOCAyLjQtMi44em0yNy42IDBjMS40IDAgMi42IDEuMiAyLjYgMi44IDAgMS41LTEuMiAyLjgtMi42IDIuOEM0My43IDExLjggNDIuNSAxMC41IDQyLjUgOWMwLTEuNSAxLjItMi44IDIuNi0yLjh6bS0yMC4yIDAgMS42IDBjMS42IDAgMi42IDEuMyAyLjYgMi44IDAgMS41LTEuMSAyLjgtMi42IDIuOGwtMS42IDAgMC01LjV6bTkgMCAxLjUgMGMxLjUgMCAyLjYgMS4zIDIuNiAyLjggMCAxLjUtMSAyLjgtMi42IDIuOGwtMS41IDAgMC01LjV6IiBmaWxsPSIjZmZmIi8+PC9zdmc+' alt='Mapbox' />
    </a>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoicnNiYXVtYW5uIiwiYSI6IjdiOWEzZGIyMGNkOGY3NWQ4ZTBhN2Y5ZGU2Mzg2NDY2In0.jycgv7qwF8MMIWt4cT0RaQ';
    var bounds = [
    @@ -177,7 +174,7 @@
    type: 'geojson',
    data: 'https://dl.dropboxusercontent.com/s/m4rg8k8l3odz7ma/nyc_pedcyc_collisions_161004.geojson',
    buffer: 1,
    maxZoom: 12
    maxzoom: 12
    });

    if (window.location.search.indexOf('embed') !== -1) map.scrollZoom.disable();
  15. ryanbaumann revised this gist Jul 20, 2017. No changes.
  16. ryanbaumann revised this gist Jul 20, 2017. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -175,7 +175,9 @@
    function init() {
    map.addSource('veh-incidents', {
    type: 'geojson',
    data: 'https://dl.dropboxusercontent.com/s/m4rg8k8l3odz7ma/nyc_pedcyc_collisions_161004.geojson'
    data: 'https://dl.dropboxusercontent.com/s/m4rg8k8l3odz7ma/nyc_pedcyc_collisions_161004.geojson',
    buffer: 1,
    maxZoom: 12
    });

    if (window.location.search.indexOf('embed') !== -1) map.scrollZoom.disable();
  17. ryanbaumann revised this gist Jul 20, 2017. No changes.
  18. ryanbaumann revised this gist Jul 20, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,8 @@
    <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.34.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body {
  19. ryanbaumann revised this gist Mar 28, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -252,7 +252,7 @@
    //Hide loading bar once tiles from geojson are loaded
    map.on('data', function(e) {
    console.log(e)
    if (e.dataType === 'tile' && e.sourceId === 'veh-incidents') {
    if (e.dataType === 'source' && e.sourceId === 'veh-incidents') {
    document.getElementById("loader").style.visibility = "hidden";
    }
    })
  20. ryanbaumann revised this gist Mar 28, 2017. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -213,7 +213,6 @@
    'id': 'veh-incd-base',
    'type': 'circle',
    'source': 'veh-incidents',
    'source-layer': 'rsbaumann.nyc_veh_raw',
    'paint': {
    'circle-color': 'yellow',
    'circle-radius': 3,
  21. ryanbaumann revised this gist Mar 28, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,8 @@
    <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.31.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body {
  22. ryanbaumann revised this gist Jan 23, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -252,8 +252,8 @@

    //Hide loading bar once tiles from geojson are loaded
    map.on('data', function(e) {

    if (e.dataType === 'tile' && e.sourceID === 'veh-incidents') {
    console.log(e)
    if (e.dataType === 'tile' && e.sourceId === 'veh-incidents') {
    document.getElementById("loader").style.visibility = "hidden";
    }
    })
  23. ryanbaumann revised this gist Jan 23, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -252,8 +252,8 @@

    //Hide loading bar once tiles from geojson are loaded
    map.on('data', function(e) {
    console.log(e)
    if (e.dataType === 'source' && e.source.id === 'veh-incidents') {

    if (e.dataType === 'tile' && e.sourceID === 'veh-incidents') {
    document.getElementById("loader").style.visibility = "hidden";
    }
    })
  24. ryanbaumann revised this gist Jan 23, 2017. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -252,7 +252,8 @@

    //Hide loading bar once tiles from geojson are loaded
    map.on('data', function(e) {
    if (e.dataType === 'tile' && e.source.id === 'veh-incidents') {
    console.log(e)
    if (e.dataType === 'source' && e.source.id === 'veh-incidents') {
    document.getElementById("loader").style.visibility = "hidden";
    }
    })
  25. ryanbaumann revised this gist Jan 23, 2017. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -208,7 +208,8 @@
    },
    'filter': ['>=', 'CYC_INJ', 1]
    }, 'waterway-label');
    map.addLayer({

    map.addLayer({
    'id': 'veh-incd-base',
    'type': 'circle',
    'source': 'veh-incidents',
    @@ -222,7 +223,7 @@
    'filter': ['<', 'CYC_INJ', 1]
    }, 'waterway-label');
    };

    map.once('load', function(e) {
    init();
    map.addControl(new mapboxgl.NavigationControl());
    @@ -290,4 +291,4 @@
    </script>
    </body>

    </html>
    </html>
  26. ryanbaumann revised this gist Jan 23, 2017. 1 changed file with 13 additions and 0 deletions.
    13 changes: 13 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -208,6 +208,19 @@
    },
    'filter': ['>=', 'CYC_INJ', 1]
    }, 'waterway-label');
    map.addLayer({
    'id': 'veh-incd-base',
    'type': 'circle',
    'source': 'veh-incidents',
    'source-layer': 'rsbaumann.nyc_veh_raw',
    'paint': {
    'circle-color': 'yellow',
    'circle-radius': 3,
    'circle-opacity': 0.3,
    'circle-blur': 1
    },
    'filter': ['<', 'CYC_INJ', 1]
    }, 'waterway-label');
    };

    map.once('load', function(e) {
  27. ryanbaumann revised this gist Jan 23, 2017. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -208,7 +208,8 @@
    },
    'filter': ['>=', 'CYC_INJ', 1]
    }, 'waterway-label');

    };

    map.once('load', function(e) {
    init();
    map.addControl(new mapboxgl.NavigationControl());
  28. ryanbaumann revised this gist Jan 23, 2017. 1 changed file with 1 addition and 18 deletions.
    19 changes: 1 addition & 18 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -209,26 +209,9 @@
    'filter': ['>=', 'CYC_INJ', 1]
    }, 'waterway-label');

    map.addLayer({
    'id': 'veh-incd-base',
    'type': 'circle',
    'source': 'veh-incidents',
    'source-layer': 'rsbaumann.nyc_veh_raw',
    'paint': {
    'circle-color': 'yellow',
    'circle-radius': 3,
    'circle-opacity': 0.3,
    'circle-blur': 1
    },
    'filter': ['<', 'CYC_INJ', 1]
    }, 'waterway-label');
    };

    map.once('load', function(e) {
    init();
    map.addControl(new mapboxgl.Navigation({
    position: 'bottom-right'
    }));
    map.addControl(new mapboxgl.NavigationControl());
    map.on('click', function(e) {
    var features = map.queryRenderedFeatures(e.point, {
    layers: ['veh-incd']
  29. ryanbaumann revised this gist Jan 23, 2017. 2 changed files with 3 additions and 3 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,8 @@
    <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.25.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.1/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
    <style>
    body {
    2 changes: 1 addition & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # Example - Large geojson in Mapbox GL JS
    * Load svg icon appears while data is loading
    * Uncompressed geojson file is 29 MB on dropbox
    * Total time to load depends on client internet speed & browser GPU memory
    * Total time to load depends on client internet speed & client GPU
  30. ryanbaumann revised this gist Oct 20, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    # Example - Display large geojson in Mapbox GL JS
    # Example - Large geojson in Mapbox GL JS
    * Load svg icon appears while data is loading
    * Uncompressed geojson file is 29 MB on dropbox
    * Total time to load depends on client internet speed & browser GPU memory