Map features

Add layers

This map starts with an empty layer list. Add data by pasting a service or GeoJSON URL, or by dropping GeoJSON, KML or GPX files onto the map.

Try it: click + in the layer panel. For WMS, paste https://data.wien.gv.at/daten/geo and use the filter to find a layer. For WMTS, paste https://mapsneu.wien.gv.at/basemap/1.0.0/WMTSCapabilities.xml. For GeoJSON, try /data/demo-areas.geojson. You can also drop local files onto the map or choose them from your device in the GeoJSON tab.

What this demo shows

WMS and WMTS capabilities are read in the browser
Filterable layer list with multi-select for services with hundreds of layers
Available service metadata configures feature info, legends, metadata links and zoom ranges
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
GeoJSON URLs are checked against the config’s URL policy; loading errors appear in the dialog
Import several local GeoJSON, KML or GPX files at once. Each becomes a layer named after the file, using supported colours from the data. The map zooms to the imported layers, and the files stay in the browser.

Added layers are stored for the current session. With permalink enabled, layers added by URL are also included in share links, so recipients can load the same sources. Local files are omitted from share links and must be imported separately.

Browser access requires CORS. The browser requests data directly from the service. For a service on another origin, its CORS headers must allow access from this page. Failed requests are reported in the dialog.

Configuration

add-layer.map0.json

{
  "$schema": "https://map0.net/schema/v1.json",
  "version": 1,
  "meta": { "title": "Add services at runtime" },
  "map": { "center": [16.3725, 48.2083], "zoom": 12 },
  "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": "bmapv",
      "title": "basemap.at",
      "type": "style",
      "url": "https://mapsneu.wien.gv.at/basemapv/bmapv/3857/resources/styles/root.json"
    }
  ],
  "layers": [],
  "controls": {
    "layerSwitcher": { "open": true, "allowAdd": true },
    "legend": { "open": true }
  },
  "permalink": true
}

allowAdd: false hides the add-layer button and disables file drop.

The same thing from code

host-page.js

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);

// Add a GeoJSON file by URL, as in the dialog.
await api.addLayer({ type: 'geojson', title: 'Areas', data: '/data/demo-areas.geojson' });