Engineer at Mapbox, creator of Leaflet, algorithms geek, open source enthusiast, musician, father of twin girls, Ukrainian. 🇺🇦
osmMap(-0.15, 51.5, 10)
osmMap = (lng, lat, zoom, w = width, h = 400) => {
let result = `<div style="width:${w}px;height:${h}px;position:relative;overflow:hidden">`,
x = 256 * (1 << zoom) * (lng / 360 + 0.5) - w / 2 | 0,
y = 256 * (1 << zoom) * (1 - Math.log(Math.tan(Math.PI * (0.25 + lat / 360))) / Math.PI) / 2 - h / 2 | 0;
for (let ty = y / 256 | 0; ty * 256 < y + h; ty++)
for (let tx = x / 256 | 0; tx * 256 < x + w; tx++)
result += `<img src="https://tile.osm.org/${zoom}/${tx}/${ty}.png"
style="position:absolute;left:${tx * 256 - x}px;top:${ty * 256 - y}px">`;
return html`${result}<div style="position:absolute;bottom:0;right:0;font:11px sans-serif;background:#fffa;padding:1px 5px">© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors</div></div>`;
}
html`<img src="https://tile.osm.org/0/0/0.png">`
html`<div style="display: flex; flex-wrap: wrap; width: 514px; gap: 2px">
<img src="https://tile.osm.org/1/0/0.png">
<img src="https://tile.osm.org/1/1/0.png">
<img src="https://tile.osm.org/1/0/1.png">
<img src="https://tile.osm.org/1/1/1.png">
</div>`
tilesAcross = Math.pow(2, zoom)
worldSize = tileSize * tilesAcross
mercatorX = worldSize * (longitude / 360 + 0.5)
mercatorY = worldSize * (1 - Math.log(Math.tan(Math.PI * (0.25 + latitude / 360))) / Math.PI) / 2
x0 = Math.floor(mercatorX - width / 2)
y0 = Math.floor(mercatorY - height / 2)
cornerTileX = Math.floor(x0 / tileSize)
cornerTileY = Math.floor(y0 / tileSize)
html`<img src="https://tile.osm.org/${zoom}/${cornerTileX}/${cornerTileY}.png">`
{
let result = `<div style="height: ${height}px; position: relative; overflow: hidden;">`;
for (let tileY = cornerTileY; tileY * tileSize < y0 + height; tileY++) {
for (let tileX = cornerTileX; tileX * tileSize < x0 + width; tileX++) {
result += `<img src="https://tile.osm.org/${zoom}/${tileX}/${tileY}.png" style="
position: absolute; outline: 1px dashed black;
left: ${tileX * tileSize - x0}px;
top: ${tileY * tileSize - y0}px;">`;
}
}
return html`${result}`;
}
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.
