Konfiguration

Theming

Farben, Eckenradien und Schriften passen den Viewer an die eigene Website an. Sie lassen sich in der Konfiguration oder über CSS-Variablen der umgebenden Seite einstellen.

Ausprobieren: Die Schaltflächen oben ändern CSS-Custom-Properties am Element. Die Oberfläche passt sich sofort an. Kartenbeschriftungen verwenden die im Hintergrundkarten-Style festgelegten Schriften.

Zwei Wege

Die Gestaltung in der Konfiguration festlegen:

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 } }
}

Oder CSS-Variablen im Stylesheet der umgebenden Seite setzen:

site.css

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

Hell, dunkel oder Systemeinstellung

theme.mode akzeptiert "light", "dark" oder "auto". Der Standardwert "auto" folgt auch Änderungen der Betriebssystem-Einstellung. Panels, Popups, Dialoge und der Hintergrund hinter Rasterkarten schalten gemeinsam um.

Gestaltung über das Shadow DOM. Das Shadow DOM trennt die Styles des Viewers von der umgebenden Seite. Für Anpassungen stehen CSS-Custom-Properties und dokumentierte ::part()-Namen zur Verfügung.

Oberflächenschrift und Kartenbeschriftung

theme.font gilt für Panels, Popups, Dialoge und Schaltflächen. Die Schrift der Kartenbeschriftungen wird über die Schrifteinstellungen und Glyphenquelle im Hintergrundkarten-Style geändert.

Diese Demo verwendet zunächst die Systemschrift. Mit den Schaltflächen lassen sich andere Oberflächenschriften vergleichen; die Kartenbeschriftungen behalten ihre eigene Schrift.