Display a popup

Replicates the MapLibre example Display a popup. Upstream’s new Popup({closeOnClick: false}).setLngLat(...).setHTML(...).addTo(map) becomes one popups: entry. The popup is open from load and has no layer under it and no marker above it.

Clicking the map leaves it open; the × closes it

The complete document

display-a-popup.yaml

# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
# Gallery twin of https://maplibre.org/maplibre-gl-js/docs/examples/display-a-popup/
# A popup open at a coordinate from load — no layer under it, no marker
# above it. Content runs through the same trust gate as every popup.
type: map
id: display-a-popup
config:
  center: [-96, 37.8]
  zoom: 3
  mapStyle: "https://demotiles.maplibre.org/style.json"
popups:
  - at: [-96, 37.8]
    closeOnClick: false
    content:
      - h1:
          - str: "Hello World!"

What to notice

• content uses the same structured vocabulary as layer and marker popups, through the same trust gate. Tags are allowlisted and str: values are escaped, so an untrusted document can’t inject markup the way upstream’s setHTML string could.
• closeOnClick and closeButton are MapLibre’s own popup options. Unset, MapLibre’s defaults apply.
• Why not a marker without a pin? A marker’s popup opens when the pin is clicked. Hide the pin and nothing can open it. A standalone popup is open from the start, so it’s a construct of its own.
• Export class: no-export. A popup is DOM, not cartography. mlym emit reports it as a contract warning and the emitted style renders the map without it.