Map features

Legend

Three layers show three ways to define legend entries. The legend panel follows the layers currently visible on the map.

Try it: switch layers off and on to see their legend entries disappear and return. Layers outside their zoom range are also omitted.

Three sources, one panel

From the service: legend: "auto" on a WMS layer builds a GetLegendGraphic request
From the style: vector layers with literal colours produce swatches automatically
By hand: an array of entries with label, colour and shape (square, line, circle)

Set legend: false to hide a layer from the legend. A URL string loads a custom legend image, for example one hosted alongside your configuration.

Legends for data-driven styles. A style may vary its colour by attribute or its width by zoom. map0 derives swatches from constant colours only. For styles based on expressions, define the legend entries yourself.

Configuration

legend.map0.json

{
  "$schema": "https://map0.net/schema/v1.json",
  "version": 1,
  "meta": { "title": "Three ways to get a legend" },
  "map": { "center": [16.3725, 48.2083], "zoom": 13 },
  "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": [
    {
      "id": "widmung",
      "type": "wms",
      "title": "From the service (GetLegendGraphic)",
      "url": "https://data.wien.gv.at/daten/geo",
      "layers": "GENFLWIDMUNGOGD",
      "opacity": 0.5,
      "legend": "auto",
      "attribution": "Stadt Wien, data.wien.gv.at"
    },
    {
      "id": "areas",
      "type": "geojson",
      "title": "Written by hand",
      "data": "/data/demo-areas.geojson",
      "style": {
        "fill-color": "#f59e0b",
        "fill-opacity": 0.3,
        "line-color": "#f59e0b",
        "line-width": 2
      },
      "legend": [
        { "label": "Demo zone", "color": "#f59e0b", "shape": "square" },
        { "label": "Demo route", "color": "#f59e0b", "shape": "line" }
      ]
    },
    {
      "id": "brunnen",
      "type": "geojson",
      "title": "Derived from the style",
      "data": "https://data.wien.gv.at/daten/geo?service=WFS&request=GetFeature&version=1.1.0&typeName=ogdwien:TRINKBRUNNENOGD&srsName=EPSG:4326&outputFormat=json",
      "style": {
        "circle-color": "#7c3aed",
        "circle-radius": 5,
        "circle-stroke-color": "#ffffff",
        "circle-stroke-width": 1.5
      },
      "attribution": "Stadt Wien, data.wien.gv.at"
    }
  ],
  "controls": { "legend": { "open": true, "position": "bottom-right" } }
}