Display a popup on click

Replicates the MapLibre example Display a popup on click. The upstream version wires map.on('click'), map.on('mouseenter'), map.on('mouseleave'), and builds popup HTML by hand; here that is one interactive: block.

Click a point to open its popup

The complete document

display-a-popup-on-click.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-on-click/
# The whole click-handler + popup-DOM dance is one `interactive:` block.
type: map
id: display-a-popup-on-click
config:
  center: [-77.04, 38.907]
  zoom: 11.15
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: places
    type: circle
    source:
      type: geojson
      data:
        type: FeatureCollection
        features:
          - type: Feature
            geometry: { type: Point, coordinates: [-77.038659, 38.931567] }
            properties:
              title: Make it Mount Pleasant
              description: A community art project in Mount Pleasant
          - type: Feature
            geometry: { type: Point, coordinates: [-77.003168, 38.894651] }
            properties:
              title: Capitol East Denizens
              description: Painted portraits of Capitol Hill East residents
          - type: Feature
            geometry: { type: Point, coordinates: [-77.090372, 38.881189] }
            properties:
              title: Arlington Mural
              description: A large-scale mural on the Arlington waterfront
          - type: Feature
            geometry: { type: Point, coordinates: [-77.052477, 38.943951] }
            properties:
              title: Rock Creek Trailhead
              description: Where the trail meets the neighborhood
    paint:
      circle-radius: 8
      circle-color: "#7c3aed"
      circle-stroke-width: 2
      circle-stroke-color: "#ffffff"
    interactive:
      hover:
        cursor: pointer
      click:
        popup:
          - h3:
              - property: title
          - p:
              - property: description

What to notice

• popup: content is a structured list of tag blocks, not an HTML string — every value is escaped and tags are checked against an allowlist, so untrusted feature properties can’t inject markup.
• hover.cursor: pointer replaces the two mouse-event handlers from the original.
• property: items read from the clicked feature; mix them with literal str: items freely.