Map features

Popups & hover

What happens when someone clicks the map: three layers answer at once, each formatting its attributes differently.

Try it: hover a fountain or a demo zone for a tooltip. Click one and the geometry is highlighted while the popup is open. Click where the zoning layer, a demo zone and a fountain overlap — the popup groups the answers per layer.

What this demo shows

Vector layers are queried in the browser, WMS layers via GetFeatureInfo — in parallel, one popup
popup.content renders an HTML template with {{property}} placeholders
popup.fields renders a labelled attribute table instead — no HTML needed
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

Everything is sanitised

Templates come from a CMS field and GetFeatureInfo responses come from a third-party service — so both are treated as untrusted. Property values are HTML-escaped when the template is rendered, and the finished markup passes through DOMPurify before it reaches the DOM. Links are rewritten to rel="noopener noreferrer".

The template language is deliberately closed: placeholders and nothing else. No expressions, no eval, nothing a config author could turn into script.

Configuration

Reacting from the host page

Every click is also a DOM event, so the surrounding page can react to it:

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