Create a hover effect

Replicates the MapLibre example Create a hover effect, loading the same US-states GeoJSON file upstream loads.

Hover a state — it repaints per feature, not per layer

The complete document

create-a-hover-effect.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/create-a-hover-effect/
# Same US-states file as upstream, loaded by url — matching not just the
# visual but the loading mode. The upstream version wires mousemove/
# mouseleave + setFeatureState by hand; here per-feature hover is one flag.
type: map
id: create-a-hover-effect
config:
  center: [-100.486, 38.0]
  zoom: 3
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: states
    type: fill
    source:
      type: geojson
      url: "https://maplibre.org/maplibre-gl-js/docs/assets/us_states.geojson"
      generateId: true
    paint:
      fill-color: "#627BC1"
      fill-opacity: 0.6
    interactive:
      hover:
        highlight: true
        cursor: pointer

What to notice

• hover.highlight: true replaces upstream’s mousemove/mouseleave handlers and manual setFeatureState calls; generateId: true supplies the feature ids feature-state needs on url-loaded data.
• The highlight color is currently fixed (gold) — authorable highlight styling is on the backlog.