map0

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.

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.

Measurement labels. Labels are HTML markers styled with the viewer’s CSS variables. They work with raster and vector basemaps and do not require a glyph source in the map style.

Configuration

One key. It is on by default; false removes the control entirely.

measure.map0.json
{
  "$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.