Datenquellen

Vector Tiles

Drei Overlays verwenden denselben Vektorkacheldienst von basemap.at. Jedes wählt andere Daten aus und gestaltet sie im Browser mit einem eigenen Style.

Ausprobieren: Die Overlays ein- und ausschalten und anschließend den Hintergrund auf None setzen. Die Overlays bleiben beim Wechsel der Hintergrundkarte sichtbar.

Was diese Demo zeigt

Drei Overlays aus einem Vektorkacheldienst, jeweils mit einem anderen sourceLayer
style akzeptiert echte Layer nach MapLibre-Style-Spec; source und source-layer injiziert map0
Das Styling bleibt datengetrieben: Farben, Strichstärken und Strichmuster sind einfach Paint-Properties
Die Legenden sind hier handgeschrieben, weil ein Style mehr aussagen kann, als ein Farbfeld zeigt

Der Browser wendet Styles auf bereits geladene Vektordaten an. Beim Ändern von Farben oder Deckkraft können diese Kacheln weiterverwendet werden. Beim Wechsel der Hintergrundkarte können neue Hintergrunddaten geladen werden.

Relative Kachel-URLs. Das TileJSON von basemap.at verwendet relative Vorlagen wie tile/{z}/{y}/{x}.pbf. map0 löst sie relativ zur TileJSON-URL auf und übernimmt den angegebenen Zoombereich.

Konfiguration

vector-tiles.map0.json

{
  "$schema": "https://map0.net/schema/v1.json",
  "version": 1,
  "meta": { "title": "Vector tile overlays" },
  "map": { "center": [16.3708, 48.2085], "zoom": 15, "maxZoom": 19 },
  "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": "none", "title": "None", "type": "empty" }
  ],
  "layers": [
    {
      "id": "water",
      "type": "vector",
      "title": "Water bodies",
      "url": "https://mapsneu.wien.gv.at/basemapv/bmapv/3857/",
      "sourceLayer": "GEWAESSER_F_GEWF",
      "style": [{ "type": "fill", "paint": { "fill-color": "#0ea5e9", "fill-opacity": 0.55 } }],
      "legend": [{ "label": "Water", "color": "#0ea5e9" }],
      "attribution": "© basemap.at"
    },
    {
      "id": "buildings",
      "type": "vector",
      "title": "Building footprints",
      "url": "https://mapsneu.wien.gv.at/basemapv/bmapv/3857/",
      "sourceLayer": "GEBAEUDE_F_GEBAEUDE",
      "minZoom": 13,
      "style": [
        { "type": "fill", "paint": { "fill-color": "#7c3aed", "fill-opacity": 0.35 } },
        { "type": "line", "paint": { "line-color": "#7c3aed", "line-width": 0.5 } }
      ],
      "legend": [{ "label": "Building", "color": "#7c3aed" }],
      "attribution": "© basemap.at"
    },
    {
      "id": "districts",
      "type": "vector",
      "title": "District boundaries",
      "url": "https://mapsneu.wien.gv.at/basemapv/bmapv/3857/",
      "sourceLayer": "BEV_BEZIRK_L_BEZIRKSGRENZE",
      "style": [
        {
          "type": "line",
          "paint": { "line-color": "#ef4444", "line-width": 2, "line-dasharray": [3, 2] }
        }
      ],
      "legend": [{ "label": "District boundary", "color": "#ef4444", "shape": "line" }],
      "attribution": "© basemap.at"
    }
  ],
  "controls": { "legend": { "open": true } },
  "theme": { "primary": "#7c3aed" }
}

PMTiles

PMTiles speichert ein Kachelarchiv in einer Datei. Der Speicher muss HTTP-Range-Requests und CORS unterstützen. Die Datei wird über eine pmtiles://-URL eingebunden; der Protokoll-Handler lädt bei Bedarf:

excerpt

{
  "id": "zoning",
  "type": "vector",
  "title": "Zoning",
  "url": "pmtiles://https://tiles.example.gv.at/widmung.pmtiles",
  "sourceLayer": "widmung",
  "style": [
    { "type": "fill", "paint": { "fill-color": ["get", "colour"], "fill-opacity": 0.45 } }
  ]
}

Diese Seite zeigt die Konfiguration für PMTiles. Zum Ausprobieren wird die Beispiel-URL durch ein Archiv ersetzt, das Browserzugriff erlaubt. Der Layer verwendet dieselben Style-Optionen wie die Overlays oben.