Mapbox-gl-js-template

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'>Click on the map!</div>

CSS

html, body{
    height: 100%;
}

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

JavaScript

// Mapboxgl demo app
'use strict';

var map;

mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuamFtaW4td3lzcyIsImEiOiJVcm5FdEw4In0.S8HRIEq8NqdtFVz2-BwQog';

// init the map
map = new mapboxgl.Map({
    container: 'map',
    style: 'https://www.mapbox.com/mapbox-gl-styles/styles/outdoors-v7.json',
    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
    	}
    });
*/

// style for polygon data
    map.addLayer({
        'id': 'foobar1',
        'type': 'fill',
        'source': 'tom',
        'interactive': true,
        'paint': {
            'fill-color': '#ffffb2',
            'fill-opacity': 0.8,
            //'fill-outline-color': '#CCCCFF'
        },
        'filter': [
            '<=', 'GM_EDU', 0.49
        ]
    });

    map.addLayer({
        'id': 'foobar2',
        'type': 'fill',
        'source': 'tom',
        'interactive': true,
        'paint': {
            'fill-color': '#fecc5c',
            'fill-opacity': 0.8,
            //'fill-outline-color': '#CCCCFF'
        },
        'filter': ['all',['>', 'GM_EDU', 0.49], ['<=', 'GM_EDU', 0.815]]
    });

    map.addLayer({
        'id': 'foobar3',
        'type': 'fill',
        'source': 'tom',
        'interactive': true,
        'paint': {
            'fill-color': '#fd8d3c',
            'fill-opacity': 0.8,
            //'fill-outline-color': '#CCCCFF'
        },
        'filter': ['all',['>',...