Skip to content
maplibre-yaml

Show polygon information on click

Replicates the MapLibre example Show polygon information on click, with the region: sugar carrying the polygon and its display properties.

Hover highlights the state; click for its popup

The complete document

Section titled “The complete document”
show-polygon-information-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/show-polygon-information-on-click/
# Click the polygon: popup + hover cursor + per-feature highlight, no JS.
type: map
id: show-polygon-information-on-click
config:
  center: [-90.6, 44.7]
  zoom: 5
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: state
    type: fill
    source:
      type: geojson
      region:
        name: Wisconsin
        description: The Badger State
        coordinates:
          - - [-90.415429, 46.568478]
            - [-90.229213, 46.508388]
            - [-90.119674, 46.338446]
            - [-89.09001, 46.135799]
            - [-88.662808, 45.987922]
            - [-88.531362, 46.020262]
            - [-88.10416, 45.922199]
            - [-87.989058, 45.796229]
            - [-87.781017, 45.675736]
            - [-87.791355, 45.500474]
            - [-87.885248, 45.363551]
            - [-87.649774, 45.341581]
            - [-87.742329, 45.199222]
            - [-87.59023, 45.095264]
            - [-87.264877, 44.804597]
            - [-86.981818, 45.222933]
            - [-87.088963, 44.499159]
            - [-87.406166, 43.775683]
            - [-87.796919, 42.493634]
            - [-90.639984, 42.510065]
            - [-90.711986, 42.636062]
            - [-91.067428, 42.75136]
            - [-91.143375, 42.909839]
            - [-91.174692, 43.134665]
            - [-91.056911, 43.254116]
            - [-91.204036, 43.353946]
            - [-91.215329, 43.501391]
            - [-91.269519, 43.616385]
            - [-91.242042, 43.775438]
            - [-91.43425, 43.994267]
            - [-91.592025, 44.032645]
            - [-91.877158, 44.202829]
            - [-91.927793, 44.333914]
            - [-92.233348, 44.443365]
            - [-92.337515, 44.552879]
            - [-92.545929, 44.569587]
            - [-92.808988, 44.750911]
            - [-92.737122, 45.117747]
            - [-92.75871, 45.290965]
            - [-92.644092, 45.440231]
            - [-92.770223, 45.566939]
            - [-92.885529, 45.578057]
            - [-92.869193, 45.717568]
            - [-92.639067, 45.933153]
            - [-92.354165, 46.015323]
            - [-92.29402, 46.074377]
            - [-92.29402, 46.667063]
            - [-92.091338, 46.749240]
            - [-92.014487, 46.705401]
            - [-91.790408, 46.694684]
            - [-91.09589, 46.861854]
            - [-90.837716, 46.957438]
            - [-90.749183, 46.88821]
            - [-90.886963, 46.754866]
            - [-90.55371, 46.584732]
            - [-90.415429, 46.568478]
    paint:
      fill-color: "#3b9ddd"
      fill-opacity: 0.55
    interactive:
      hover:
        cursor: pointer
        highlight: true
      click:
        popup:
          - h3:
              - property: name
          - p:
              - property: description

What to notice

Section titled “What to notice”
  • region: accepts name/description alongside coordinates — they land as feature properties, which the popup then reads with property: items.
  • hover.highlight: true adds the per-feature hover repaint the upstream version doesn’t even attempt.