Change a layer's color with buttons

Replicates the MapLibre example Change a layer’s color with buttons. The upstream swatch buttons and their setPaintProperty listener become one select parameter: fill-color reads global-state, and picking a value repaints the lagoon.

Pick a color from the panel to repaint the lagoon

The complete document

change-a-layers-color-with-buttons.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/change-a-layers-color-with-buttons/
# A select parameter drives fill-color through global-state — the upstream
# swatch buttons become a params-panel control; no JS.
type: map
id: change-a-layers-color-with-buttons
config:
  center: [12.338, 45.4385]
  zoom: 11
  mapStyle: "https://demotiles.maplibre.org/style.json"
state:
  fill:
    default: "#3b9ddd"
parameters:
  fill:
    label: District color
    type: select
    values: ["#3b9ddd", "#e63946", "#2a9d8f", "#f4a261"]
layers:
  - id: district
    type: fill
    source:
      type: geojson
      region:
        name: Laguna di Venezia
        coordinates:
          - - [12.25, 45.36]
            - [12.45, 45.36]
            - [12.45, 45.52]
            - [12.25, 45.52]
            - [12.25, 45.36]
    paint:
      fill-color: ["global-state", "fill"]
      fill-opacity: 0.6

What to notice

• This page used to need page JavaScript (getMap().setPaintProperty behind swatch buttons); the params panel made it YAML only.
• Any paint property can read global-state on maplibre-gl ≥ 5.6 — the select writes the state key, the expression does the rest.
• The region: sugar still carries the polygon — sugar and parameters compose.