Skip to content

Instantly share code, notes, and snippets.

@stevage

stevage/index.html

Created November 19, 2018 05:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stevage/745ab0b757555800839f0211a85fe386 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stevage/745ab0b757555800839f0211a85fe386 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. stevage created this gist Nov 19, 2018.
    53 changes: 53 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8' />
    <title>Animating a user highlight</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.51.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
    <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    </head>
    <body>

    <div id='map'></div>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoic3RldmFnZSIsImEiOiJGcW03aExzIn0.QUkUmTGIO3gGt83HiRIjQw';
    var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/stevage/cjonudzz83h3z2rlewmb82lb0', // stylesheet location
    center: [144.96, -37.82], // starting position [lng, lat]
    zoom: 16 // starting zoom
    });
    map.on('load', () => {
    map.addSource('highlight', {
    type: 'geojson',
    data: { type: 'FeatureCollection', features: [] }
    });
    map.on('click', 'poi-label', e => {
    if (!e.features) return;
    if (map.getLayer('highlight-point')) map.removeLayer('highlight-point');
    map.addLayer({
    id: 'highlight-point',
    source: 'highlight',
    type: 'circle',
    paint: {
    'circle-color': 'transparent',
    'circle-stroke-color': 'green',
    'circle-stroke-width': 3,
    'circle-radius': 0
    }
    });

    map.getSource('highlight').setData(e.features[0])
    map.setPaintProperty('highlight-point', 'circle-radius', 20);

    });
    });
    </script>

    </body>
    </html>