---
title: topOverlayAtPoint(point)
framework: mapkitjs
role: symbol
role_heading: Instance Method
path: mapkitjs/map/topoverlayatpoint
---

# topOverlayAtPoint(point)

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

## Declaration

```data
topOverlayAtPoint(point: DOMPoint): Overlay | null;
```

## 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

Return Value Returns the topmost overlay or null.

## Discussion

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

- [overlays](mapkitjs/map/overlays.md)
- [selectedOverlay](mapkitjs/map/selectedoverlay.md)
- [overlaysAtPoint(point)](mapkitjs/map/overlaysatpoint.md)
- [addOverlay(overlay)](mapkitjs/map/addoverlay.md)
- [addOverlays(overlays)](mapkitjs/map/addoverlays.md)
- [removeOverlay(overlay)](mapkitjs/map/removeoverlay.md)
- [removeOverlays(overlays)](mapkitjs/map/removeoverlays.md)