Public
Edited
Oct 12, 2023
mutable hovered = null
viewof map = {
const container = html`<div id="map">`;
yield container; // Give the container dimensions.
const map = (container.value = new mapboxgl.Map({
container,
center: [-80.0721, 50.711],
zoom: 1.5,
style: "mapbox://styles/mapbox/light-v10",
scrollZoom: true
}));
invalidation.then(() => map.remove());
// Setup our svg layer that we can manipulate with d3
const bb = container.getBoundingClientRect();
var svg = d3
.select(container)
.append("svg")
.style("position", "absolute")
.style("top", 0)
.style("left", 0)
.attr("width", bb.width)
.attr("height", bb.height)
.style("pointer-events", "none"); // the svg shouldn't capture mouse events, so we can have pan and zoom from mapbox
//Project any point to map's current state
function projectPoint(lon, lat) {
var point = map.project(new mapboxgl.LngLat(lon, lat));
this.stream.point(point.x, point.y);
}
function project(d) {
return map.project(new mapboxgl.LngLat(d[0], d[1]));
}
//Projection function
var transform = d3.geoTransform({ point: projectPoint });
var path = d3.geoPath().projection(transform);
// Add data -- Austin, TX
var data = [[-97.73, 30.26],];
var dots = svg
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 5)
.style("fill", "#ff0000");
const update = () => {
// dots.attr("d", path);
dots
.attr("cx", function (d) {
return project(d).x;
})
.attr("cy", function (d) {
return project(d).y;
});
};
// Every time the map changes, update the dots
map.on("viewreset", update);
map.on("move", update);
map.on("moveend", update);
// enable some features
map.doubleClickZoom.enable();
map.scrollZoom.enable();
map.dragPan.enable();
update();
}
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.
