src/examples/mapbox/index.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.39.1/mapbox-gl.js'></script>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }

        h2, h3 {
          margin: 10px;
          font-size: 1.2em;
        }
        h3 {
          font-size: 1em;
        }

        p {
          font-size: 0.85em;
          margin: 10px;
          text-align: left;
        }

        /**
        * Create a position for the map
        * on the page */
        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }

        /**
        * Set rules for how the map overlays
        * (info box and legend) will be displayed
        * on the page. */
        .map-overlay {
          position: absolute;
          bottom: 0;
          right: 0;
          background: rgba(255, 255, 255, 0.8);
          margin-right: 20px;
          font-family: Arial, sans-serif;
          overflow: auto;
          border-radius: 3px;
        }
        #features {
          top: 0;
          height: 100px;
          margin-top: 20px;
          width: 250px;
        }

        #legend {
          padding: 10px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          line-height: 18px;
          height: 200px;
          margin-bottom: 40px;
          width: 125px;
        }

        .legend-key {
          display: inline-block;
          border-radius: 20%;
          width: 10px;
          height: 10px;
          margin-right: 5px;
        }
    </style>
</style>
</head>
<body>

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

<div class='map-overlay' id='features'><h2>Age of Burlington Buildings</h2><div id='pd'><p>Hover over a building!</p></div></div>

<div class='map-overlay' id='legend'>Legend</div>


<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZnJpbmdlZGdlbnRpYW4iLCJhIjoiY2o2NnAxOXBkMmZvcDJ3cTdhaDRmazE2dyJ9.RFzxwRRu5jeFggeuVzW12w';

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/fringedgentian/cj6i96tyh546i2rnkozhmqj67', // stylesheet location
    center: [-73.20, 44.48], // starting position [lng, lat]
    zoom: 13.5 // starting zoom
});

map.on('load', function () {

    //get the map style (as defined through mapbox interface)
    var style = map.getStyle();

    //get the one layer we are interested in, the one with building polygons with year built information.  The name is visible in the mapbox interface.
    var buildingsLayer = $.grep(style.layers, function(e){ return e.id == 'burlingtonbldgswyears-305ib6'; });

    //get the segments as defined through the mapbox interface
    var segments = buildingsLayer[0]["paint"]["fill-color"]["stops"];


    //create legend based on segments set in mapbox interface
    for (i = 0; i < segments.length; i++) {
        var segment = segments[i];
        var color = segment[1];

        if (segments[i+1]) {
            var year = segment[0] + ' to ' + (segments[i+1][0]-1);
        } else {
            var year = "over " + segment[0];
        }

        var item = document.createElement('div');
        var key = document.createElement('span');
        key.className = 'legend-key';
        key.style.backgroundColor = color;

        var value = document.createElement('span');

        value.innerHTML = year;
        item.appendChild(key);
        item.appendChild(value);
        legend.appendChild(item);
    }

    map.on('mousemove', function(e) {
        var buildings = map.queryRenderedFeatures(e.point, {
            layers: ['burlingtonbldgswyears-305ib6']
        });

        if (buildings.length > 0) {
            document.getElementById('pd').innerHTML = 'This building was built in ' + buildings[0].properties.filtered_Y;
        } else {
            document.getElementById('pd').innerHTML = '<p>Hover over a building!</p>';
        }
    });

     map.on('mouseenter', 'burlingtonbldgswyears-305ib6', function(e) {
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = 'pointer';
    });

    map.on('mouseleave', 'burlingtonbldgswyears-305ib6', function() {
        map.getCanvas().style.cursor = '';
    });
});

</script>

</body>
</html>