Kartenfunktionen

Layer hinzufügen

Diese Karte startet mit einer leeren Layer-Liste. Daten lassen sich über eine Dienst- oder GeoJSON-URL hinzufügen. GeoJSON-, KML- und GPX-Dateien können auch direkt auf die Karte gezogen werden.

Ausprobieren: Im Layer-Panel auf + klicken. Für WMS https://data.wien.gv.at/daten/geo einfügen und mit dem Filter einen Layer suchen. Für WMTS https://mapsneu.wien.gv.at/basemap/1.0.0/WMTSCapabilities.xml verwenden. Unter GeoJSON lässt sich /data/demo-areas.geojson ausprobieren. Lokale Dateien können auch auf die Karte gezogen oder im GeoJSON-Reiter vom Gerät ausgewählt werden.

Was diese Demo zeigt

WMS- und WMTS-Capabilities werden im Browser gelesen
Filterbare Layer-Liste mit Mehrfachauswahl für Dienste mit hunderten Layern
Verfügbare Dienst-Metadaten liefern die Einstellungen für Objektabfragen, Legenden, Metadaten-Links und Zoombereiche
Layer, die der Dienst nicht in WebMercator anbietet, werden schon vor dem Hinzufügen markiert (D-02)
Hinzugefügte Layer erscheinen in einem eigenen Abschnitt des Panels und lassen sich wieder entfernen
GeoJSON-URLs werden nach denselben Regeln wie in der Konfiguration geprüft. Ladefehler erscheinen im Dialog
Mehrere lokale GeoJSON-, KML- oder GPX-Dateien gleichzeitig importieren. Jede Datei wird zu einem Layer mit ihrem Dateinamen; unterstützte Farbangaben werden übernommen. Die Karte zoomt auf die importierten Layer. Die Dateien bleiben im Browser.

Hinzugefügte Layer werden für die aktuelle Sitzung gespeichert. Ist permalink aktiviert, enthält der geteilte Link auch die per URL hinzugefügten Layer. Empfänger können dadurch dieselben Quellen laden. Lokale Dateien sind im Link nicht enthalten und müssen separat importiert werden.

Browserzugriff benötigt CORS. Der Browser ruft die Daten direkt beim Dienst ab. Liegt der Dienst auf einer anderen Origin, müssen seine CORS-Header den Zugriff von dieser Seite erlauben. Fehlgeschlagene Anfragen werden im Dialog gemeldet.

Konfiguration

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 blendet die Schaltfläche zum Hinzufügen aus und deaktiviert den Dateiimport per Drag & Drop.

Dasselbe aus 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' });