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;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.