Contents

topOverlayAtPoint(point)

Returns the topmost overlay at a given point on the webpage.

Declaration

topOverlayAtPoint(point: DOMPoint): Overlay | undefined;

Parameters

  • point:

    A point in the page’s coordinate system, such as new DOMPoint(event.pageX, event.pageY) when handling a mouse event.

Return Value

Returns the topmost overlay or null.

Discussion

If there are multiple overlays at a point, MapKit JS returns the overlay closest to the foreground. If the user selects an overlay, MapKit JS draws user-selected overlays on top of all other overlays. So when a user selects an overlay, MapKit JS returns that overlay.

The following code example identifies the topmost overlay during a mouse move event:

document.querySelector(".mk-map-view").addEventListener("mousemove", function(event) {
    const targetOverlay = map.topOverlayAtPoint(new DOMPoint(event.pageX, event.pageY));
    // Add special styling to the overlay to indicate its hover state or whatever you want.
    // ...
});

See Also

Adding and removing overlays