clhenrick/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    01 Load Some Data

In this step we set up an interactive "slippy map" centered on New York City. A slippy map is the term Cartographers gave interactive maps on the web that are capable of being zoomed and panned in a seamless manner. We added a basemap to give our data context, as well as basic map controls that allow the user to zoom and pan incrementally and change the map rotation and tilt.
Things to try out:


change the type of basemap from "dark" to "light" or "satellite" or another type


change the styling of the GeoJSON data including the color, opacity, and radius of the circles


try filtering the data on a property before it is loaded onto the map


Helpful links


MapboxGL.JS Documentation
BBox Finder for getting map center and bounding box coordinates

Built with blockbuilder.org
forked from clhenrick's block: ischool-geo-viz-00

  
## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>iSchool GeoVisualization Workshop</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.43.0/mapbox-gl.js'></script>
		<link href='https://unpkg.com/mapbox-gl@0.43.0/dist/mapbox-gl.css' rel='stylesheet' /></script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id='map'></div>
<script>

  // javascript code goes here
  var dataURL = "https://raw.githubusercontent.com/clhenrick/geovisualization_workshop_ischool/master/data/nyc_crashes.geojson";
  var accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ';

// make sure we pass our access token to mapboxgl, otherwise our map won't load!
mapboxgl.accessToken = accessToken

// create a new map using our div#map
// set the style, zoom, and center
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v9',
    center: [-74.0059, 40.7127],
    zoom: 10
});

// add map controls
map.addControl(new mapboxgl.NavigationControl());

  // function to call once the map has loaded
map.on('load', function() {
	console.log('map loaded!');

  // we'll use d3.json to load the point data asynchronously
	d3.json(dataURL, function(error, data) {

    // report an error if their was a problem getting the geojson data
		if (error) throw error;

    // filter out data with no geometry, otherwise MapboxGL throws an error and won't load data
		data.features = data.features.filter(function(d) {
			return d.geometry;
		});

    // add the source to the map styles
		map.addSource('crashes', {
			type: 'geojson',
			'data': data,
			// cluster: true,
			// clusterRadius: 10,
			// clusterMaxZoom: 12
		});

    // add the map layer
		map.addLayer({
			id: 'crashes',
			type: 'circle',
			source: 'crashes',
			'layout': {},
			'paint': {
				'circle-color': 'orange',
				'circle-opacity': 0.8,
				'circle-radius': 5,
			}
		});

	}); // end d3.json

}); // end map.on('load')


</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>iSchool GeoVisualization Workshop</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.43.0/mapbox-gl.js'></script>
	<link href='https://unpkg.com/mapbox-gl@0.43.0/dist/mapbox-gl.css' rel='stylesheet' /></script>
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<div id='map'></div>
	<script>

	// javascript code goes here
	var dataURL = "https://raw.githubusercontent.com/clhenrick/geovisualization_workshop_ischool/master/data/nyc_crashes.geojson";
	var accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ';

	// make sure we pass our access token to mapboxgl, otherwise our map won't load!
	mapboxgl.accessToken = accessToken

	// create a new map using our div#map
	// set the style, zoom, and center
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/dark-v9',
	center: [-74.0059, 40.7127],
	zoom: 10
	});

	// add map controls
	map.addControl(new mapboxgl.NavigationControl());

	// function to call once the map has loaded
	map.on('load', function() {
	console.log('map loaded!');

	// we'll use d3.json to load the point data asynchronously
	d3.json(dataURL, function(error, data) {

	// report an error if their was a problem getting the geojson data
	if (error) throw error;

	// filter out data with no geometry, otherwise MapboxGL throws an error and won't load data
	data.features = data.features.filter(function(d) {
	return d.geometry;
	});

	// add the source to the map styles
	map.addSource('crashes', {
	type: 'geojson',
	'data': data,
	// cluster: true,
	// clusterRadius: 10,
	// clusterMaxZoom: 12
	});

	// add the map layer
	map.addLayer({
	id: 'crashes',
	type: 'circle',
	source: 'crashes',
	'layout': {},
	'paint': {
	'circle-color': 'orange',
	'circle-opacity': 0.8,
	'circle-radius': 5,
	}
	});

	}); // end d3.json

	}); // end map.on('load')


	</script>
	</body>
	</html>