Skip to content

Instantly share code, notes, and snippets.

@danswick
Created November 8, 2019 22:09
Show Gist options
  • Save danswick/ac169adbc18a6e73f5f668c74a246b98 to your computer and use it in GitHub Desktop.
Save danswick/ac169adbc18a6e73f5f668c74a246b98 to your computer and use it in GitHub Desktop.

Revisions

  1. danswick created this gist Nov 8, 2019.
    28 changes: 28 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8' />
    <title>Display a map</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.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.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.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og';
    var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
    });
    </script>

    </body>
    </html>