almccon/.block

## .block
license: mit

## 2.5_day.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              2.5_day.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## README.md

      
    Raw
  

              README.md
            
          
    Working with spatial data

Example #3

Getting started with Mapbox-gl
Adapted from the mapbox-gl example.
Built with blockbuilder.org
forked from enjalot's block: WWSD #3: Getting started Mapbox-gl

  
## 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>
	<!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>