A Web Map from Scratch | Volodymyr Agafonkin | Observable
ts
ts
html
html
ts
ts
ts
ts
ts
ts
html
ts
Author
Volodymyr Agafonkin
@mourner
Engineer at Mapbox, creator of Leaflet, algorithms geek, open source enthusiast, musician, father of twin girls, Ukrainian. 🇺🇦
Comments (1)
DIEGO HUERTA GIRIBALDI
Oct 25, 2024
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>`; }
Reply
Add comment
Subscribe to notifications
© 2026 Observable, Inc.
Terms of service
Privacy policy
Product
About
Pricing
Documentation
Release notes
Contact us
Open source
Notebook Kit
Plot
D3
Community
Public
Forum
Bluesky
YouTube
X
Observable
Sign up
Volodymyr Agafonkin
124
Reply
Add comment
Subscribe to notifications
26
A Web Map from Scratch | Volodymyr Agafonkin | Observable