Public
Edited
Feb 16, 2023
Insert cell
Insert cell
Insert cell
<div id='map' style='width: 100%; height: 30rem;'></div>
Insert cell
Insert cell
Insert cell
maplibregl = {
const gl = await require("maplibre-gl@2.4.0");
const href = await require.resolve("maplibre-gl@2.4.0/dist/maplibre-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
return gl;
}
Insert cell
Insert cell
// reference: https://observablehq.com/@tmcw/using-mapbox-gl-js
map = {
var map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [-122.169961, 37.429491],
zoom: 13,
pitch: 45,
maxBounds: [
[-122.8, 36.8],
[-121.8, 38.3]
] // restrict the view to a certain area (southwest and northeast coords)
});
map.addControl(new maplibregl.NavigationControl(), 'bottom-left'); // adds the controls
return map
}
Insert cell
Insert cell
svg = {
var container = map.getCanvasContainer();

var svg = d3
.select(container)
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.style("position", "absolute")
.style("z-index", 2); // make this appear above the mapbox backing layer
return svg
}
Insert cell
Insert cell
<style>
/* You can also set this in the initial declaration, just here for sake of explanation */
#map {
position: relative;
z-index: 0;
}
</style>
Insert cell
Insert cell
dots = {
let data = [
[37.4292654112971,-122.173590660095] // this is Bytes Cafe btw
]
let dots = svg
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", Math.max(map.getZoom()**2/25, 3))
return dots
}
Insert cell
Insert cell
function project(lng,lat) {
return map.project(new maplibregl.LngLat(lng, lat));
}
Insert cell
function unproject(x,y) {
return map.unproject([x,y]);
}
Insert cell
Insert cell
function render() {
dots
.attr("cx", function (d) {
return project(d[1], d[0]).x;
})
.attr("cy", function (d) {
return project(d[1], d[0]).y;
})
.attr("r", Math.max(map.getZoom()**2/25, 3));
}
Insert cell
{
map.on("viewreset", render);
map.on("move", render);
map.on("moveend", render);
render();
}
Insert cell
Insert cell

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.
Learn more