Kartenfunktionen

Popups & Hover

Ein Klick in die Karte zeigt Attribute aus drei Layern, jeweils mit eigener Formatierung im Popup.

Ausprobieren: Mit der Maus über einen Brunnen oder eine Demo-Fläche fahren, um einen Tooltip zu sehen. Ein Klick hebt die Geometrie hervor, solange das Popup geöffnet ist. Bei überlappenden Layern gruppiert das Popup die Ergebnisse nach Layer.

Was diese Demo zeigt

Vektor-Layer werden im Browser abgefragt, WMS-Layer per GetFeatureInfo. Die Ergebnisse erscheinen gemeinsam in einem Popup
popup.content rendert ein HTML-Template mit {{property}}-Platzhaltern
popup.fields zeigt eine beschriftete Attributtabelle
hover.content ergänzt einen kurzen Tooltip, der dem Mauszeiger folgt
Die angeklickte Geometrie wird in einen Highlight-Layer gespiegelt und beim Schließen des Popups wieder entfernt
Mehr als zehn Treffer auf einem Layer werden zu einem ausklappbaren Abschnitt zusammengefasst
Bei einer Kartenbreite unter 640 px erscheinen die Ergebnisse in einem Panel am unteren Kartenrand. Am Griff ziehen vergrößert es; nach unten wischen oder auf eine freie Stelle der Karte tippen schließt es.

Alles wird bereinigt

Popup-Vorlagen und Dienstantworten können HTML enthalten. Attributwerte werden beim Einsetzen in Vorlagen maskiert. Anschließend bereinigt DOMPurify das fertige HTML vor der Anzeige. Links erhalten rel="noopener noreferrer".

Vorlagen unterstützen Platzhalter für Attribute. JavaScript-Ausdrücke und eval werden nicht unterstützt.

Konfiguration

popups.map0.json

{
  "$schema": "https://map0.net/schema/v1.json",
  "version": 1,
  "meta": { "title": "Popups, tooltips and highlighting" },
  "map": { "center": [16.3775, 48.2105], "zoom": 14 },
  "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": "Zoning (WMS GetFeatureInfo)",
      "url": "https://data.wien.gv.at/daten/geo",
      "layers": "GENFLWIDMUNGOGD",
      "opacity": 0.4,
      "info": {
        "format": "application/json",
        "title": "{{WIDMUNGSKLASSE_TXT}}",
        "fields": [
          { "key": "WIDMUNG_TXT", "label": "Zoning" },
          { "key": "BEZIRK", "label": "District" },
          { "key": "FLAECHE", "label": "Area (m²)" }
        ]
      },
      "attribution": "Stadt Wien, data.wien.gv.at"
    },
    {
      "id": "areas",
      "type": "geojson",
      "title": "Demo zones (field table)",
      "data": "/data/demo-areas.geojson",
      "style": {
        "fill-color": "#f59e0b",
        "fill-opacity": 0.3,
        "line-color": "#f59e0b",
        "line-width": 2
      },
      "popup": {
        "fields": [
          { "key": "name", "label": "Name" },
          { "key": "kategorie", "label": "Category" }
        ]
      },
      "hover": { "content": "{{name}}" }
    },
    {
      "id": "brunnen",
      "type": "geojson",
      "title": "Fountains (HTML template + hover)",
      "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": "#0e7490",
        "circle-radius": 7,
        "circle-stroke-color": "#ffffff",
        "circle-stroke-width": 2
      },
      "popup": {
        "title": "{{BASIS_TYP_TXT}}",
        "content": "<p>Object <b>{{OBJECTID}}</b> in district {{BEZIRK}}.</p><p><a href=\"https://www.wien.gv.at/\">City of Vienna</a></p>"
      },
      "hover": { "content": "{{BASIS_TYP_TXT}}" },
      "attribution": "Stadt Wien, data.wien.gv.at"
    }
  ]
}

Reagieren auf der Host-Seite

Ein Klick mit Abfrageergebnissen löst auch ein DOM-Event aus, auf das die umgebende Seite reagieren kann:

host-page.js

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

viewer.addEventListener('map0:featureclick', (event) => {
  const { lngLat, results } = event.detail;
  // results[0].layerId, results[0].features[0] ...
  console.log('clicked', results.length, 'layers at', lngLat);
});