Map features
Measure
Measure distances and areas on the map. Calculations use geographic coordinates on a sphere, avoiding the scale distortion of Web Mercator.
Try it: the ruler button in the control stack. Click to set points, drag a point to adjust it, double-click to finish. Backspace removes the last point, Esc clears. Switch to Area for a polygon with its perimeter.
Why spherical maths
Web Mercator’s scale varies with latitude. Measuring directly in its projected coordinates overestimates distances away from the equator. Near Vienna, a 1 km distance would measure about 1.5 km in those coordinates.
map0 uses the haversine formula for lengths and spherical polygon calculations for areas. These are approximate measurements based on a spherical Earth model; they differ from ellipsoidal calculations.
- Segment labels while drawing, plus a running total at the last point
- Area mode reports the enclosed area and the perimeter
- Units follow the magnitude: m → km, m² → ha → km²; decimals follow the UI locale
- Vertices stay draggable after finishing, and the numbers update live
How it is drawn
Measurement lines have a white outline to remain visible over imagery. The segment following the pointer is dashed, and vertices use the theme’s accent colour. Measurements remain visible when you change the basemap.
Configuration
One key. It is on by default; false removes the control entirely.
{
"$schema": "https://map0.net/schema/v1.json",
"version": 1,
"meta": { "title": "Measuring distance and area" },
"map": { "center": [16.3725, 48.2083], "zoom": 14 },
"basemaps": [
{
"id": "bmapv",
"title": "basemap.at",
"type": "style",
"url": "https://mapsneu.wien.gv.at/basemapv/bmapv/3857/resources/styles/root.json",
"default": true
},
{
"id": "ortho",
"title": "Aerial",
"type": "raster",
"url": "https://mapsneu.wien.gv.at/basemap/bmaporthofoto30cm/normal/google3857/{z}/{y}/{x}.jpeg",
"maxZoom": 19,
"attribution": "© basemap.at"
}
],
"layers": [
{
"id": "areas",
"type": "geojson",
"title": "Demo zones",
"data": "/data/demo-areas.geojson",
"style": {
"fill-color": "#0e7490",
"fill-opacity": 0.12,
"line-color": "#0e7490",
"line-width": 1.5
},
"legend": [{ "label": "Demo zone", "color": "#0e7490" }]
}
],
"controls": { "measure": true, "legend": false }
}Scope
Measurements are temporary. They can be adjusted or cleared, but are not saved in share links or exported as annotations.