Historian of early America, Indigenous history, and material culture
{
let container = html`<div style='height:500px;' />`;
yield container; //make the container and let observable manipulate it
let map = new mapboxgl.Map({
//make the map
container, // put it in the container we made
center: [-73.761391, 42.648613], // center it on Albany!
zoom: 13, // zoom in 13 clicks
pitch: 60, // slant the view 60 degrees
style: "mapbox://styles/maevekane/ckkoqfdgh1a0r17ov0g24m08i", // get our custom map
scrollZoom: true // allow scroll to zoom
});
map.addControl(new mapboxgl.NavigationControl(), "top-right"); // put navigation buttons on the top right
map.on('load', function() {
// after the map is loaded in
map.addSource('mapbox-dem', {
// make it 3D!
type: 'raster-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
tileSize: 512,
maxzoom: 14
});
// add the DEM source as a terrain layer with exaggerated height
map.setTerrain({ source: 'mapbox-dem', exaggeration: 2 }); // exagerate it more than normal because Albany is pretty flat
// add a sky layer that will show when the map is highly pitched
map.addLayer({
id: 'sky',
type: 'sky',
paint: {
'sky-type': 'atmosphere',
'sky-atmosphere-sun': [0.0, 0.0],
'sky-atmosphere-sun-intensity': 15
}
});
});
invalidation.then(() => map.remove()); // don't draw the map if there's errors
}
mapboxgl = {
const gl = await require("mapbox-gl@2.0.0");
if (!gl.accessToken) {
gl.accessToken = "pk.eyJ1IjoibWFldmVrYW5lIiwiYSI6ImNra29hZG4yeDJieTUyb29kb3djdng1NjgifQ.qPMhwmvnHtErpzfZjU2x-g"; // your access token here!
const href = await require.resolve("mapbox-gl@2.0.0/dist/mapbox-gl.css"); // include the mapbox css
document.head.appendChild(html`<link href=${href} rel=stylesheet>`); // tell observable to put the css in the header of the document
}
return gl;
}
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.
