Get features under the mouse pointer

Replicates the MapLibre example Get features under the mouse pointer — without touching the MapLibre API. <ml-map> dispatches DOM CustomEvents for layer interactions; a plain addEventListener receives the hovered feature.

Hover a landmark

Hover a point — its properties appear in the corner panel

The YAML half

get-features-under-the-mouse-pointer.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/get-features-under-the-mouse-pointer/
# No getMap() needed here: <ml-map> dispatches DOM CustomEvents for layer
# hovers — see get-features-under-the-mouse-pointer.js.
type: map
id: get-features-under-the-mouse-pointer
config:
  center: [-73.97, 40.72]
  zoom: 11
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: landmarks
    type: circle
    source:
      type: geojson
      data:
        type: FeatureCollection
        features:
          - { type: Feature, geometry: { type: Point, coordinates: [-73.9857, 40.7484] }, properties: { name: "Empire State Building", kind: landmark } }
          - { type: Feature, geometry: { type: Point, coordinates: [-73.9654, 40.7829] }, properties: { name: "Central Park", kind: park } }
          - { type: Feature, geometry: { type: Point, coordinates: [-73.9969, 40.7061] }, properties: { name: "Brooklyn Bridge", kind: bridge } }
          - { type: Feature, geometry: { type: Point, coordinates: [-74.0445, 40.6892] }, properties: { name: "Statue of Liberty", kind: landmark } }
    paint:
      circle-radius: 9
      circle-color: "#7c3aed"
      circle-stroke-width: 2
      circle-stroke-color: "#ffffff"
    interactive:
      hover:
        cursor: pointer

The page half

This markup goes inside <ml-map>; children with a slot ride its corner system.

get-features-under-the-mouse-pointer.html

<div slot="top-left" class="gallery-panel" data-feature-info>Hover a landmark</div>

The JavaScript half

get-features-under-the-mouse-pointer.js

// The JavaScript half, and it isn't even getMap(): <ml-map> dispatches DOM
// CustomEvents (ml-map:layer-hover, ml-map:layer-click, ...) with the
// feature in detail — plain addEventListener, no MapLibre API in sight.
const mapEl = document.querySelector("ml-map");
const panel = document.querySelector("[data-feature-info]");

mapEl.addEventListener("ml-map:layer-hover", (e) => {
  const { name, kind } = e.detail.feature?.properties ?? {};
  panel.textContent = name ? `${name} — ${kind}` : "Hover a landmark";
});

What to notice

• ml-map:layer-hover (and -click, -data-loaded, …) carry { layerId, feature, lngLat } in detail — the web-component event surface is often all the JavaScript you need.
• hover.cursor: pointer in the YAML is what marks the layer interactive.
• The info panel is an <ml-map> slot child: an ordinary <div slot="top-left"> that the element places over the map on load.