Configuration

Theming

Match the viewer to your website with configurable colours, corner radii and fonts. Set them in the config or through CSS variables on the host page.

Try it: the buttons above update CSS custom properties on the element. The interface changes immediately. Map labels use the fonts defined in the basemap style.

Two ways in

Set the theme in the config:

theming.map0.json

{
  "$schema": "https://map0.net/schema/v1.json",
  "version": 1,
  "meta": { "title": "Design tokens from config" },
  "map": { "center": [16.3725, 48.2083], "zoom": 13 },
  "theme": {
    "mode": "auto",
    "primary": "#d946ef",
    "radius": "lg",
    "font": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
  },
  "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": "bmapv",
      "title": "basemap.at",
      "type": "style",
      "url": "https://mapsneu.wien.gv.at/basemapv/bmapv/3857/resources/styles/root.json"
    }
  ],
  "layers": [
    {
      "id": "areas",
      "type": "geojson",
      "title": "Demo zones",
      "data": "/data/demo-areas.geojson",
      "style": {
        "fill-color": "#d946ef",
        "fill-opacity": 0.25,
        "line-color": "#d946ef",
        "line-width": 2
      },
      "legend": [{ "label": "Demo zone", "color": "#d946ef" }],
      "popup": { "title": "{{name}}" }
    }
  ],
  "controls": { "layerSwitcher": { "open": true }, "legend": { "open": true } }
}

Or set CSS variables in the host page’s stylesheet:

site.css

map0-viewer {
  --map0-primary: #b91c1c;
  --map0-radius: 4px;
  --map0-font: "Inter", system-ui, sans-serif;
  height: 520px;
}

Light, dark or system preference

theme.mode accepts "light", "dark" or "auto". The default, "auto", follows changes to the operating system’s preference. Panels, popups, dialogs and the background behind raster basemaps switch together.

Styling through the Shadow DOM. The viewer’s Shadow DOM isolates its styles from the surrounding page. Use CSS custom properties and documented ::part() names to customise it.

Interface fonts and map labels

theme.font applies to panels, popups, dialogs and buttons. To change map labels, update the font settings and glyph source in the basemap style.

This demo starts with the system font. Use the buttons to compare interface fonts while the map labels retain their own typeface.