Tutorial: MapBoxGL HexBin Map Steps towards creating a hexbin map of NYC vehicle collision data using MapboxGL.
container = html`<div style='height:400px;' />`
Basic Map Configuration
map = { // we'll use the code in this cell as the starting point for creating a map for each part of this tutorial // copy and paste the code to other cells when making a new map being careful to change: // 1. the cell name because named cells must have unique names, e.g. map1, map2, map3, etc. // 2. the map container value in mapboxGl.Map below because we need to reference separate html divs for each of our maps let map = this if (!map) { // Create the \`map\` object with the mapboxgl.Map constructor, referencing the container div map = new mapboxgl.Map({ container: container, // change this to the new container center: [-74.0059, 40.7127], zoom: 10, style: 'mapbox://styles/mapbox/dark-v9', scrollZoom: false // helpful to disable this when embedding maps within scrollable webpages }); // add navigation controls \(zoom buttons, pitch & rotate\) map.addControl(new mapboxgl.NavigationControl()); } // NOTE: we'll add code here, between the block above creating the map object and the block below // Wait until the map loads, then yield the container again. yield new Promise(resolve => { if (map.loaded()) resolve(map); else map.on('load', () => resolve(map)); }); }
Load NYC Vehicle Collision Data Load the vehicle collision data using d3-fetch's json method
crashes = await d3.json("https://gist.githubusercontent.com/clhenrick/8b767b76f4a4584ce529d696452c5a67/raw/f2fa3dcf096af0ddb29b3b31bdd325aabf290bff/nyc_crashes.geojson")
Add Crash Data to Map
container2 = html`<div style='height:400px;' />`
map2 = { const data = JSON.parse(JSON.stringify(crashes)) let map = this if (!map) { // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div map = new mapboxgl.Map({ container: container2, center: [-74.0059, 40.7127], zoom: 10, style: 'mapbox://styles/mapbox/dark-v9', scrollZoom: false // helpful to disable this when embedding maps within scrollable webpages }); map.addControl(new mapboxgl.NavigationControl()); } // function to call once the map has loaded map.on('load', function() { // add the source to the map styles map.addSource('crashes', { type: 'geojson', 'data': data, }); // 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 map.on('load') // Wait until the map loads, then yield the container again. yield new Promise(resolve => { if (map.loaded()) resolve(map); else map.on('load', () => resolve(map)); }); }
Data Driven Styling Let's style the data using its attributes.
container3 = html`<div style="height:400px" />`
map3 = { let map = this const data = JSON.parse(JSON.stringify(crashes)) if (!map) { // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div map = new mapboxgl.Map({ container: container3, center: [-74.0059, 40.7127], zoom: 10, style: 'mapbox://styles/mapbox/dark-v9', scrollZoom: false // helpful to disable this when embedding maps within scrollable webpages }); map.addControl(new mapboxgl.NavigationControl()); } map.on("load", function () { // add the source to the map styles map.addSource('crashes', { type: 'geojson', 'data': data, }); map.addLayer({ id: 'crashes', type: 'circle', source: 'crashes', 'layout': {}, 'paint': { 'circle-color': { property: 'crash_type', type: 'categorical', stops: [ ['no_injury_fatality', '#FECC5C'], ['injury', '#FD8D3C'], ['fatality', '#F03B20'], ['injury_and_fatality', '#BD0026'] ] }, 'circle-opacity': 0.8, 'circle-radius': { 'base': 1.75, 'stops': [[12, 2], [22, 180]] }, } }); }) // Wait until the map loads, then yield the container again. yield new Promise(resolve => { if (map.loaded()) resolve(map); else map.on('load', () => resolve(map)); }); }
Show the aggregated data using HexBins The data processing for this was done outside of Observable. See this NodeJS script for how the data was processed.
container4 = html`<div style="height: 400px" />`
{ // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container: container4, center: [-74.0059, 40.7127], zoom: 10, style: 'mapbox://styles/mapbox/light-v9', scrollZoom: false // helpful to disable this when embedding maps within scrollable webpages }); // add navigation controls \(zoom buttons, pitch & rotate\) map.addControl(new mapboxgl.NavigationControl()); map.on("load", function () { // add the source to the map styles map.addSource('hexGrid', { type: 'geojson', 'data': processed, }); 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 } }); }) // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. try { yield map; yield invalidation; } finally { map.remove(); } }
Color Ramp via color-brewer
colorRamp = ['#feebe2','#fcc5c0','#fa9fb5','#f768a1','#dd3497','#ae017e','#7a0177']
Processed / aggregated data
processed = await d3.json("https://gist.githubusercontent.com/clhenrick/378cfcf38c6011f8e132419e9e4177df/raw/73d3b1411d21d9ae92dfcc5ae65b9abc7be79ae0/processed.json")
Dependencies
d3 = require("d3-fetch")
mapboxgl = { let mapboxgl = await require('mapbox-gl@0.43.0'); mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ'; return mapboxgl; }
mapboxglCSS = html`<link href='https://unpkg.com/mapbox-gl@0.43.0/dist/mapbox-gl.css' rel='stylesheet' />`