working on protomaps.com
Published
Edited
Aug 9, 2021
Importers
3 stars
{
const div = document.createElement("div")
div.style.height = height + "px"
div.appendChild(context.canvas)
context.canvas.style.position = "absolute"
let svg = d3.create("svg").attr("width", width).attr("height", height).style("position","absolute")
div.appendChild(svg.node())
svg.selectAll("circle").data(features.features).enter()
.append("circle")
.attr("cx",d => { return projection(d.geometry.coordinates)[0] })
.attr("cy",d => { return projection(d.geometry.coordinates)[1] })
.attr("r",d => { return d.properties.radius})
.style("opacity",0.5)
.style("fill","blue")
.on("mouseover",function() {
d3.select(this).style("fill","red")
})
.on("mouseout",function() {
d3.select(this).style("fill","blue")
})
return div
}
projection = d3.geoMercator()
height = 500
context = makeContext(projection, { features, width, height })
makeContext = async function(projection, {
width,
height = 500,
extent,
features,
paint_rules = undefined,
label_rules = undefined
} = {}) {
if(!extent && features) {
projection.fitExtent([[50,50],[width-50,height-50]], features)
}
let map = new protomaps.Static({url:'https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=f5d904b825555256',paint_rules:paint_rules,label_rules:label_rules,language1:["name:en"]})
let top_left = projection.invert([0,0])
let bottom_right = projection.invert([width,height])
let context = DOM.context2d(width, height)
await map.drawContextBounds(context,top_left,bottom_right,width,height)
context.setTransform(window.devicePixelRatio,0,0,window.devicePixelRatio,0,0)
context.font = "200 12px sans-serif"
let text = "Protomaps © OpenStreetMap"
let metrics = context.measureText(text)
let padding = 4
let asc = metrics.actualBoundingBoxAscent
context.globalAlpha = 0.7
context.fillStyle = "white"
context.fillRect(width-metrics.width-padding*2,height-padding*2-asc,metrics.width+padding*2,asc+padding*2)
context.fillStyle = "#666"
context.fillText(text,width-metrics.width-padding,height-padding)
return context
}
protomaps = import("https://cdn.skypack.dev/protomaps@0.19.2")
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.
