]// restrict the view to a certain area (southwest and northeast coords)
});
map.addControl(newmaplibregl.NavigationControl(),'bottom-left');// adds the controls
returnmap
}
svg={
varcontainer=map.getCanvasContainer();
varsvg=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
returnsvg
}
<style>
/* You can also set this in the initial declaration, just here for sake of explanation */
#map{
position:relative;
z-index:0;
}
</style>
dots={
letdata=[
[37.4292654112971,-122.173590660095]// this is Bytes Cafe btw
]
letdots=svg
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r",Math.max(map.getZoom()**2/25,3))
returndots
}
functionproject(lng,lat){
returnmap.project(newmaplibregl.LngLat(lng,lat));
}
functionunproject(x,y){
returnmap.unproject([x,y]);
}
functionrender(){
dots
.attr("cx",function(d){
returnproject(d[1],d[0]).x;
})
.attr("cy",function(d){
returnproject(d[1],d[0]).y;
})
.attr("r",Math.max(map.getZoom()**2/25,3));
}
{
map.on("viewreset",render);
map.on("move",render);
map.on("moveend",render);
render();
}
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.