Engineer at Mapbox, creator of Leaflet, algorithms geek, open source enthusiast, musician, father of twin girls, Ukrainian. 🇺🇦
Public
Edited
Jun 2, 2022
56 stars
precisionMap(lng, lat, 0)
precisionMap = (lng, lat, digits, w = Math.min(640, width), h = 200) => {
const m = 10 ** digits;
// calculate precision box size, and zoom that can fully accommodate it
const latY = (lat) => (1 - Math.log(Math.tan(Math.PI * (0.25 + lat / 360))) / Math.PI) / 2;
let ph = 256 * (latY(lat - 1 / m / 2) - latY(lat + 1 / m / 2));
let zoom = 0;
while (ph * (2 ** zoom) < (h - 10) && zoom < 19) zoom++;
zoom--;
ph *= (2 ** zoom);
const pw = 256 * (2 ** zoom) * (1 / m / 360); // precision box width
const lngr = Math.round(lng * m) / m;
const latr = Math.round(lat * m) / m;
const div = osmMap(lngr, latr, zoom, w, h);
div.appendChild(html`<div style="position: absolute; top: 50%; left: 50%; margin-left: -${pw / 2}px; margin-top: -${ph / 2}px; width: ${pw}px; height: ${ph}px; background: rgba(255,0,0,0.5)"></div>`);
div.appendChild(html`<div style="position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.8); padding: 4px 6px 2px; font: 18px/1 sans-serif ">${lngr}, ${latr}</div>`);
return div;
}
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.
