TEST Canvas Explorer

by sk_urbanfootprint

HTML

</!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Demo National Canvas</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.mapbox.com/mapbox-gl-js/v0.42.1/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v0.42.1/mapbox-gl.css' rel='stylesheet' />
  <link href='map.css' rel='stylesheet' />
</head>

<body>

  <nav id="menu"></nav>
  <div id='map'></div>
  <br/>
  <button id='flyBAL' class='fly'>Baltimore</button>
  <button id='flyMIA' class='fly'>Miami</button>
  <button id='flySEA' class='fly'>Seattle</button>
  <button id='flyBOI' class='fly'>Boise</button>
  <button id='flyLOU' class='fly'>Louisville</button>
  <button id='flySAN' class='fly'>San Diego</button>

  <script type="text/javascript">

    mapboxgl.accessToken = 'pk.eyJ1Ijoic3RlcGhlbi11ZiIsImEiOiJjampvdWZzaW4wMDdvM2xudjVwZnExNTEzIn0.-6VCCwVvY9EOmr77pb-njw';
    var map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/stephen-uf/cjokbvc9z1gye2smns03lhytp',
      center: [ -117.1500, 32.7150 ], // starting position
      zoom: 14, // starting zoom
      maxZoom: 16,
      minZoom: 14
    });

    // Add zoom and rotation controls to the map.
    map.addControl(new mapboxgl.NavigationControl());


    document.getElementById('flyBAL').addEventListener('click', function () {
      map.jumpTo({
        center: [-76.6122, 39.2750],
        zoom: 14
      });
    });
    document.getElementById('flyMIA').addEventListener('click', function () {
      map.jumpTo({
        center: [ -80.2200, 25.7617 ],
        zoom: 14
      });
    });
    document.getElementById('flySEA').addEventListener('click', function () {
      map.jumpTo({
        center: [ -122.3321, 47.6062 ],
        zoom: 14
      });
    });
    document.getElementById('flyBOI').addEventListener('click', function () {
      map.jumpTo({
        center: [ -116.2023, 43.6150 ],
        zoom: 14
   ...

CSS

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

.fly {
    display: block;
    position: relative;
    margin-top: 8px;
    margin-left: 24px;
    padding: 10px 12px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    letter-spacing: 1px;
    color: #fff;
    background: #000;
    font-family: 'Open Sans', sans-serif;
}