WWSD #3: Getting started Mapbox-gl by almccon

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="//d3js.org/d3.v3.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/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.eyJ1IjoibWFwcGluZ21hc2h1cHMiLCJhIjoiV3FPMW01ayJ9.T4MWb-43AlNKowzsTFmrhw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mappingmashups/cjf78si473rkh2rnxleegwa6s',
    center: [-120, 33],
    zoom: 3
});

map.on('load', function () {
  var url = "https://gist.githubusercontent.com/almccon/2dbd9323833b2d9e06d3fe08154e3de9/raw/70a778b97168f75822e1564879d95a69b906e521/2.5_day.geojson"
  d3.json(url, function(err, earthquakes) {
    

    map.addSource('earthquakes', {
      'type': 'geojson',
      'data': earthquakes
    });

    map.addLayer({
      'id': 'earthquakes',
      'type': 'circle',
      'source': 'earthquakes',
      'layout': {},
      'paint': {
        'circle-radius': {
		  	"base": 0.2,
		  	"type": "exponential",
		  	"property": "mag",
		  	"stops": [
			    [0, 0.5],
		    	[2, 6],
 			    [5, 9],
		     [9, 20]
			  ]
        },
        'circle-color': 'red'
      }
    });
  })
});
</script>

</body>
</html>
WWSD #3: Getting started Mapbox-gl

Working with spatial data

Example #3

index.html
