Maps, Data, Viz, UX, Design
Published
Edited
Jan 29, 2021
3 forks
Importers
32 stars
container = html`<div style='height:${mapHeight}px;' />`
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
// For more on how to use MapboxGL with Observable, see this notebook:
// https://observablehq.com/@tmcw/using-mapbox-gl-js
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 more code here, between the block above creating the map object and the block below
invalidation.then(() => map.remove());
// 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));
}
});
}
crashes = await fetch("https://gist.githubusercontent.com/clhenrick/8b767b76f4a4584ce529d696452c5a67/raw/f2fa3dcf096af0ddb29b3b31bdd325aabf290bff/nyc_crashes.geojson")
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error("Problem loading data!");
})
container2 = html`<div style='height:${mapHeight}px;' />`
map2 = {
// this is just a hack so that we can re-use our data in multiple cells in Observable
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': {
// this specifies how we style our data
'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));
}
});
}
container3 = html`<div style="height:${mapHeight}px" />`
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.
// 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();
}
}
container4 = html`<div style="height:${mapHeight}px" />`
map4 = {
// 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();
}
}
processed = fetch("https://gist.githubusercontent.com/clhenrick/378cfcf38c6011f8e132419e9e4177df/raw/73d3b1411d21d9ae92dfcc5ae65b9abc7be79ae0/processed.json")
.then(response => {
if (response.ok) {
return response.json();
}
throw new Error("Problem loading processed data!");
})
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' />`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
