Data sources

Vector tiles

Three overlays use the same basemap.at vector tile service. Each selects different data and applies its own style in the browser.

Try it: switch the overlays on and off, then set the basemap to None. The overlays remain visible when the basemap changes.

What this demo shows

Three overlays from one vector tile service, each with a different sourceLayer
style takes real MapLibre style-spec layers; source and source-layer are injected by map0
Styling stays data-driven: colours, widths and dash patterns are just paint properties
Legends are written by hand here, because a style can say more than a swatch can show

The browser applies styles to vector data already loaded. Changing colours or opacity can reuse those tiles. Changing the basemap may load data for the new background.

Relative tile URLs. The basemap.at TileJSON uses relative templates such as tile/{z}/{y}/{x}.pbf. map0 resolves them against the TileJSON URL and uses the declared zoom range.

Configuration

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 stores a tile archive in one file. Host it on storage that supports HTTP range requests and CORS, then use a pmtiles:// URL. The protocol handler loads when needed:

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

This page shows the configuration for PMTiles. To try it, replace the example URL with an archive that allows browser access. The layer uses the same style options as the overlays above.