Mapbox-gl-js-template

by khrome

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<div id='map' class="myMap"></div>
<div id='features'>Wait for it!</div>

CSS

html,
body {
  height: 100%;
}

#map {
  height: 61%;
  width: 100%;
}

JavaScript

// Mapboxgl demo app
'use strict';

var map;

mapboxgl.accessToken = 'pk.eyJ1Ijoia2hyb21lLWNhcGUiLCJhIjoiY2pvaHN6OXRyMDFzYzNscGJ3Zm1henUxeSJ9.1H0sY7c5dMGVwOzy2yk_jw';

// init the map
map = new mapboxgl.Map({
  container: 'map',
  style: 'https://api.mapbox.com/styles/v1/khrome-cape/cjoht1b9m1ql02rri621fmusr.html?fresh=true&title=true&access_token=pk.eyJ1Ijoia2hyb21lLWNhcGUiLCJhIjoiY2pmeDA4emVkMDFuZzJ4cnFuNGVlOXcydSJ9.WNx2Yp9iPJvVdwRASThq8Q#13.0/33.750013/-118.410600/0',
  center: [-1.83, -78.183],
  zoom: 5.5,
});

map.on('style.load', function() {
  map.addSource("tom", {
    "type": "geojson",
    "data": 'https://raw.githubusercontent.com/bwyss/template-mapbox-gl-js-v8/master/app/data/losses-poly.json'
  });
  /*
// style for point data
	map.addLayer({
        'id': 'foobar',
        'type': 'symbol',
        'source': 'tom',
        'interactive': true,
    	'layout': {
    	  	'icon-image': '{marker-symbol}-12',
    	  	'text-field': '{title}',
    	  	'text-font': 'Open Sans Semibold, Arial Unicode MS Bold',
    	  	'text-offset': [0, 0.6],
    	  	'text-anchor': 'top'
    	},
    	'paint': {
    	  	'text-size': 12
    	}
    });
*/

  document.getElementById('features').innerHTML = "click on the map!";
  console.log('map:');
  console.log(map);

  map.on('click', function(e) {
    map.featuresAt(e.point, {
      radius: 6
    }, function(err, features) {
      if (err) throw err;
      document.getElementById('features').innerHTML = 'Data value from JSON: ' + JSON.stringify(features[0].properties.LOG_AV_SVI, null, 2);
      // Hard coded attributes list
      var keys = ["QWKHOME", "QPOVERTY", "GM_ECONOMY", "AV_ECONOMY", "QFEMALE", "QAGEDEP", "QDISABLED", "QINDIGINOU", "QHRENTERS", "QNOHEALTHI", "QNONATID", "QNOSTATREG", "QGRPHMDOM", "PPUNIT", "GM_VPOP", "AV_VPOP", "AV_EDU", "GM_EDU1", "AV_EDU1", "GM_SVI", "AV_SVI", "LOG_AV_SVI"];
      var values = [];
      var name = 'Hover over the chart!';

      for (var i = 0; i < keys.length; i++) {
        var...