Map features

Popups & hover

Click the map to view attributes from three layers, each with its own popup format.

Try it: hover over a fountain or demo area to see a tooltip. Click to highlight its geometry while the popup is open. Where several layers overlap, the popup groups the results by layer.

What this demo shows

Vector layers are queried in the browser and WMS layers through GetFeatureInfo, with results combined in one popup
popup.content renders an HTML template with {{property}} placeholders
popup.fields displays a labelled attribute table
hover.content adds a short tooltip that follows the cursor
The clicked geometry is mirrored into a highlight layer and cleared when the popup closes
More than ten hits on one layer collapse into an expandable section
In viewers narrower than 640 px, results open in a panel at the bottom of the map. Drag its handle to resize it, swipe down to close it, or tap an empty part of the map.

Everything is sanitised

Popup templates and service responses may contain HTML. Attribute values are escaped when inserted into templates, and DOMPurify sanitises the resulting markup before display. Links receive rel="noopener noreferrer".

Templates support attribute placeholders. JavaScript expressions and eval are not supported.

Configuration

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"
    }
  ]
}

Reacting from the host page

A click that returns feature information also emits a DOM event for the surrounding page:

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