Map features

Layer tree

Fourteen layers of Vienna open data, sorted into groups. A filter box narrows the tree, each group switches as a whole, and a radio group shows one imagery layer at a time.

Try it: type cycl into the filter box, switch "Mobility" on and off with the box in its header, and pick another imagery layer.

Groups

Nesting: a group holds layers and other groups; the order in the config is the order on the map, top of the list on top
Collapsed: collapsed: true starts a group closed, like "Education" above
All on, all off: the box in a group's header switches every layer in it; a dash means some of them are on

Radio groups

exclusive: true turns a group into a radio group: one child is visible at a time. That suits alternatives that would only cover each other, such as imagery from different years or analyses of the same area. A child group counts as one option and switches as a whole.

The first child configured visible starts on, the others start hidden. The rule also holds for api.layers.setVisibility() and for share links. The box in the group's header switches the group off entirely, and on again with the option that was on or the first one.

Filter box

The filter box appears from ten layers on. controls.layerSwitcher.filter shows it always (true) or never (false); the default is "auto".

Forgiving: case and accents do not matter, strasse finds "Straße"
Groups count: a word that matches a group title keeps all of the group's layers, several words must all match; a group's box then switches only the layers on show
Quick to undo: Esc clears the filter, collapsed groups open while it is active

Configuration

layer-tree.map0.json

{
  "$schema": "https://map0.net/schema/v1.json",
  "version": 1,
  "meta": { "title": "Vienna open data in a layer tree" },
  "map": { "center": [16.405, 48.218], "zoom": 12.3, "minZoom": 8 },
  "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
    }
  ],
  "layers": [
    {
      "type": "group",
      "title": "Leisure",
      "children": [
        {
          "id": "badestellen",
          "type": "geojson",
          "title": "Bathing spots",
          "data": "https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:BADESTELLENOGD&srsName=EPSG:4326&outputFormat=json",
          "style": {
            "circle-color": "#0284c7",
            "circle-radius": 6,
            "circle-stroke-color": "#ffffff",
            "circle-stroke-width": 1.5
          },
          "popup": {
            "title": "{{BEZEICHNUNG}}",
            "fields": [
              { "key": "WASSERTEMPERATUR", "label": "Water temperature (°C)" },
              { "key": "UNTERSUCHUNGSDATUM", "label": "Sampled" }
            ]
          },
          "attribution": "Stadt Wien, data.wien.gv.at"
        },
        {
          "id": "spielplaetze",
          "type": "geojson",
          "title": "Playgrounds",
          "data": "https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:SPIELPLATZPUNKTOGD&srsName=EPSG:4326&outputFormat=json",
          "style": {
            "circle-color": "#16a34a",
            "circle-radius": 3.5,
            "circle-stroke-color": "#ffffff",
            "circle-stroke-width": 1
          },
          "popup": {
            "title": "{{ANL_NAME}}",
            "fields": [
              { "key": "TYP_DETAIL", "label": "Type" },
              { "key": "SPIELPLATZ_DETAIL", "label": "Facilities" }
            ]
          },
          "attribution": "Stadt Wien, data.wien.gv.at"
        },
        {
          "id": "trinkbrunnen",
          "type": "wms",
          "title": "Drinking fountains",
          "url": "https://data.wien.gv.at/daten/geo",
          "layers": "TRINKBRUNNENOGD",
          "visible": false,
          "minZoom": 14,
          "attribution": "Stadt Wien, data.wien.gv.at"
        },
        {
          "id": "hundezonen",
          "type": "wms",
          "title": "Dog zones",
          "url": "https://data.wien.gv.at/daten/geo",
          "layers": "HUNDEZONEFLOGD",
          "visible": false,
          "opacity": 0.6,
          "attribution": "Stadt Wien, data.wien.gv.at"
        },
        {
          "id": "baeume",
          "type": "wms",
          "title": "Tree register",
          "url": "https://data.wien.gv.at/daten/geo",
          "layers": "BAUMKATOGD",
          "visible": false,
          "minZoom": 16,
          "attribution": "Stadt Wien, data.wien.gv.at"
        }
      ]
    },
    {
      "type": "group",
      "title": "Mobility",
      "children": [
        {
          "id": "radwege",
          "type": "wms",
          "title": "Cycle paths",
          "url": "https://data.wien.gv.at/daten/geo",
          "layers": "RADWEGEOGD",
          "visible": false,
          "opacity": 0.8,
          "attribution": "Stadt Wien, data.wien.gv.at"
        },
        {
          "id": "radnetz",
          "type": "wms",
          "title": "Cycling network",
          "url": "https://data.wien.gv.at/daten/geo",
          "layers": "RADNETZOGD",
          "visible": false,
          "attribution": "Stadt Wien, data.wien.gv.at"
        },
        {
          "id": "ubahn",
          "type": "wms",
          "title": "Underground network",
          "url": "https://data.wien.gv.at/daten/geo",
          "layers": "UBAHNOGD",
          "visible": false,
          "attribution": "Stadt Wien, data.wien.gv.at"
        },
        {
          "id": "haltestellen",
          "type": "wms",
          "title": "Public transport stops",
          "url": "https://data.wien.gv.at/daten/geo",
          "layers": "OEFFHALTESTOGD",
          "visible": false,
          "minZoom": 15,
          "attribution": "Stadt Wien, data.wien.gv.at"
        }
      ]
    },
    {
      "type": "group",
      "title": "Education",
      "collapsed": true,
      "children": [
        {
          "id": "schulen",
          "type": "wms",
          "title": "Schools",
          "url": "https://data.wien.gv.at/daten/geo",
          "layers": "SCHULEOGD",
          "visible": false,
          "attribution": "Stadt Wien, data.wien.gv.at"
        },
        {
          "id": "kindergaerten",
          "type": "wms",
          "title": "Kindergartens",
          "url": "https://data.wien.gv.at/daten/geo",
          "layers": "KINDERGARTENOGD",
          "visible": false,
          "attribution": "Stadt Wien, data.wien.gv.at"
        }
      ]
    },
    {
      "type": "group",
      "title": "Imagery",
      "exclusive": true,
      "children": [
        {
          "id": "oberflaeche",
          "type": "raster",
          "title": "Surface model, shaded",
          "url": "https://mapsneu.wien.gv.at/basemap/bmapoberflaeche/grau/google3857/{z}/{y}/{x}.jpeg",
          "opacity": 0.35,
          "attribution": "© basemap.at"
        },
        {
          "id": "gelaende",
          "type": "raster",
          "title": "Terrain model, shaded",
          "url": "https://mapsneu.wien.gv.at/basemap/bmapgelaende/grau/google3857/{z}/{y}/{x}.jpeg",
          "opacity": 0.35,
          "attribution": "© basemap.at"
        },
        {
          "id": "orthofoto",
          "type": "raster",
          "title": "Orthophoto",
          "url": "https://mapsneu.wien.gv.at/basemap/bmaporthofoto30cm/normal/google3857/{z}/{y}/{x}.jpeg",
          "attribution": "© basemap.at"
        }
      ]
    }
  ],
  "controls": { "layerSwitcher": { "open": true }, "legend": false }
}