|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset='utf-8' /> |
|
<title>02: Data Driven Styling</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' /> |
|
<style> |
|
body { margin:0; padding:0; } |
|
#map { position:absolute; top:0; bottom:0; width:100%; } |
|
</style> |
|
</head> |
|
<body> |
|
<div id='map'></div> |
|
<script> |
|
|
|
// set our access token |
|
mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ'; |
|
|
|
var dataURL = "https://raw.githubusercontent.com/clhenrick/geovisualization_workshop_ischool/master/data/nyc_crashes.geojson"; |
|
|
|
var hexBinURL = "https://gist.githubusercontent.com/clhenrick/5787a12a8bf3b02821839e4f9556d997/raw/f18f34a319380ba471078baec382970dbc64a9ff/processed.json"; |
|
|
|
var colorRamp = ['#feebe2','#fcc5c0','#fa9fb5','#f768a1','#dd3497','#ae017e','#7a0177']; |
|
|
|
// 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/light-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(hexBinURL, function(error, data) { |
|
|
|
// report an error if their was a problem getting the geojson data |
|
if (error) throw error; |
|
|
|
// create an hashmap to hold our distinct bins |
|
// we can use this to create a legend for our map later |
|
const bins = data.features.reduce((acc, feature) => { |
|
const binNumber = feature.properties.bin |
|
const binValues = feature.properties.binVal |
|
if (!acc[binNumber]) { |
|
acc[binNumber] = binValues |
|
} |
|
return acc |
|
}, {}); |
|
|
|
//console.log(bins) |
|
|
|
// add the source to the map styles |
|
map.addSource('hexGrid', { |
|
type: 'geojson', |
|
'data': data, |
|
}); |
|
|
|
// add our hexbin map layer |
|
// note that we style it using the color ramp array from above |
|
map.addLayer({ |
|
id: 'crashesHexGrid', |
|
type: 'fill', |
|
source: 'hexGrid', |
|
'layout': {}, |
|
'paint': { |
|
'fill-color': { |
|
property: 'bin', |
|
stops: colorRamp.map((d, i) => [i, d]), |
|
}, |
|
'fill-opacity': 0.6 |
|
} |
|
}); |
|
|
|
}); // end d3.json |
|
|
|
}); // end map.on('load') |
|
|
|
</script> |
|
</body> |
|
</html> |
