Map features

Add layers

This map starts empty on purpose. Users bring their own services — paste a URL, pick from the capabilities, done.

Try it: the + button in the layer panel. Paste https://data.wien.gv.at/daten/geo as WMS (375 layers, use the filter box), or switch to WMTS and paste https://mapsneu.wien.gv.at/basemap/1.0.0/WMTSCapabilities.xml.

What this demo shows

WMS and WMTS capabilities parsed in the browser — no server component involved
Filterable layer list with multi-select for services with hundreds of layers
Layers arrive fully wired: GetFeatureInfo, legend, metadata link, and a zoom range derived from the service's scale hints
Layers without a WebMercator offering are flagged before you add them (D-02)
Added layers appear in their own section of the panel and can be removed again

User-added layers never touch the page config. They live in session state — and, because this demo also enables permalink, they travel in the share link, so a colleague opens the map with your services already loaded.

CORS decides what works The browser talks to the service directly. Services without CORS headers fail here — that is a property of the service, not of the client, and the dialog says so instead of hanging.

Configuration

Set allowAdd: false for a locked-down map where only configured layers exist.

The same thing from code

          const api = document.querySelector('map0-viewer').api;

          const id = await api.addLayer({
            type: 'wms',
            title: 'Noise 2024',
            url: 'https://sdi.example.gv.at/ows',
            layers: 'laerm_2024',
            info: { format: 'application/json' }
          });

          api.removeLayer(id);