Skip to content

Instantly share code, notes, and snippets.

Created August 4, 2016 01:54
Show Gist options
  • Save anonymous/d48faa19435c7f10183ad687ef7f94c4 to your computer and use it in GitHub Desktop.
Save anonymous/d48faa19435c7f10183ad687ef7f94c4 to your computer and use it in GitHub Desktop.

Revisions

  1. @invalid-email-address Anonymous created this gist Aug 4, 2016.
    146 changes: 146 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,146 @@
    <!DOCTYPE html>
    <html>
    <head>
    <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.21.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
    <script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
    <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    </head>
    <body>

    <style>
    #menu {
    position: absolute;
    background: #fff;
    padding: 10px;
    font-family: 'Open Sans', sans-serif;
    }
    </style>

    <div id='map'></div>

    <script id="jsbin-javascript">
    mapboxgl.accessToken = 'pk.eyJ1IjoiaHUtbWFuIiwiYSI6ImNpcmZldHRnbDAwOXZnNW5rNGo3ZWFzMzMifQ.ueq_GdVWBB-xcHbPcA9HOQ';
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 19,
    pitch: 60,
    bearing: -50,
    center: [-71.0899, 42.372]
    });
    map.scrollZoom.disable();

    var source = null;
    map.on('load', function () {
    const { lng, lat } = map.getCenter();
    const url = `https://localhost/test?lng=${lng}&lat=${lat}`;
    source = new mapboxgl.GeoJSONSource({
    data: url
    });

    map.addSource('dots', source);
    map.addLayer({
    "id": "dots",
    "type": "symbol",
    "source": "dots",
    "layout": {
    "icon-image": "circle-11"
    },
    // "paint": {
    // "fill-color": "#337fff"
    // }
    });
    });

    map.on('moveend',function(move) {
    const { lng, lat } = map.getCenter();
    const url = `https://localhost/test?lng=${lng}&lat=${lat}`;

    map.getSource('dots').setData(url);
    });

    console.log(map);
    </script>

    <script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
    <html>
    <head>
    <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.21.0/mapbox-gl.js'><\/script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
    <script src="https://npmcdn.com/[email protected]/dist/leaflet.js"><\/script>
    <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
    </head>
    <body>

    <style>
    #menu {
    position: absolute;
    background: #fff;
    padding: 10px;
    font-family: 'Open Sans', sans-serif;
    }
    </style>

    <div id='map'></div>

    </body>
    </html>
    </script>


    <script id="jsbin-source-javascript" type="text/javascript">mapboxgl.accessToken = 'pk.eyJ1IjoiaHUtbWFuIiwiYSI6ImNpcmZldHRnbDAwOXZnNW5rNGo3ZWFzMzMifQ.ueq_GdVWBB-xcHbPcA9HOQ';
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 19,
    pitch: 60,
    bearing: -50,
    center: [-71.0899, 42.372]
    });
    map.scrollZoom.disable();

    var source = null;
    map.on('load', function () {
    const { lng, lat } = map.getCenter();
    const url = `https://localhost/test?lng=${lng}&lat=${lat}`;
    source = new mapboxgl.GeoJSONSource({
    data: url
    });

    map.addSource('dots', source);
    map.addLayer({
    "id": "dots",
    "type": "symbol",
    "source": "dots",
    "layout": {
    "icon-image": "circle-11"
    },
    // "paint": {
    // "fill-color": "#337fff"
    // }
    });
    });

    map.on('moveend',function(move) {
    const { lng, lat } = map.getCenter();
    const url = `https://localhost/test?lng=${lng}&lat=${lat}`;

    map.getSource('dots').setData(url);
    });

    console.log(map);
    </script></body>
    </html>
    41 changes: 41 additions & 0 deletions jsbin.wuwugu.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    mapboxgl.accessToken = 'pk.eyJ1IjoiaHUtbWFuIiwiYSI6ImNpcmZldHRnbDAwOXZnNW5rNGo3ZWFzMzMifQ.ueq_GdVWBB-xcHbPcA9HOQ';
    var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 19,
    pitch: 60,
    bearing: -50,
    center: [-71.0899, 42.372]
    });
    map.scrollZoom.disable();

    var source = null;
    map.on('load', function () {
    const { lng, lat } = map.getCenter();
    const url = `https://localhost/test?lng=${lng}&lat=${lat}`;
    source = new mapboxgl.GeoJSONSource({
    data: url
    });

    map.addSource('dots', source);
    map.addLayer({
    "id": "dots",
    "type": "symbol",
    "source": "dots",
    "layout": {
    "icon-image": "circle-11"
    },
    // "paint": {
    // "fill-color": "#337fff"
    // }
    });
    });

    map.on('moveend',function(move) {
    const { lng, lat } = map.getCenter();
    const url = `https://localhost/test?lng=${lng}&lat=${lat}`;

    map.getSource('dots').setData(url);
    });

    console.log(map);