|
<!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/[email protected]/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> |
