Map features

Share & permalink

Share the current map view and layer settings through a link.

Try it: pan the map, toggle a layer or adjust its opacity. The address bar updates automatically. The share button at the top left copies the link; open it in a new tab to restore the view.

What travels in the link

View: centre, zoom, and bearing/pitch when they differ from north-up
The active basemap
Layer visibility and opacity where they differ from the config
Layers the user added at runtime, with their full definition

The link stores changes to the configured state. Other settings continue to come from the config, so an updated layer title also appears when an older share link is opened.

Living with the host page

The state is base64url-encoded in a hash parameter, #map0=… by default. Other hash content is preserved. Change the parameter name if it conflicts with your application:

excerpt

"permalink": true,
"permalink": { "param": "karte" }

Updates are debounced and use history.replaceState, so moving the map does not add browser history entries.

Configuration

permalink.map0.json

{
  "$schema": "https://map0.net/schema/v1.json",
  "version": 1,
  "meta": { "title": "Shareable map state" },
  "map": { "center": [16.3725, 48.2083], "zoom": 12 },
  "permalink": { "param": "map0" },
  "basemaps": [
    {
      "id": "grau",
      "title": "Grey",
      "type": "raster",
      "url": "https://mapsneu.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png",
      "attribution": "© basemap.at",
      "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": "widmung",
      "type": "wms",
      "title": "Zoning plan",
      "url": "https://data.wien.gv.at/daten/geo",
      "layers": "GENFLWIDMUNGOGD",
      "opacity": 0.55,
      "info": { "format": "application/json" },
      "attribution": "Stadt Wien, data.wien.gv.at"
    },
    {
      "id": "areas",
      "type": "geojson",
      "title": "Demo zones",
      "data": "/data/demo-areas.geojson",
      "visible": false,
      "style": { "fill-color": "#f59e0b", "fill-opacity": 0.3, "line-color": "#f59e0b", "line-width": 2 }
    }
  ],
  "controls": { "layerSwitcher": { "open": true, "allowAdd": true } }
}

From code

host-page.js

const api = document.querySelector('map0-viewer').api;
const url = api.getShareUrl();  // null when permalink is disabled