CODEWITHSUNDEEP
javascripttypescriptopenlayersintersection
Magnueil
Magnueil

Reputation: 113

Check if pointer intersects with cluster subfeature in OpenLayers?

I have a map of ships that are clustered when they are close together, unless you subsequently hover the pointer over the cluster circle. The clustering is based on this OpenLayers example:

https://openlayers.org/en/latest/examples/earthquake-clusters.html

The clustering works fine. The problem is that the map is also supposed to show popup info about the ships when you hover over their marker. This works fine for free-standing, non-clustered ships. However, when the ships are clustered, I can't figure out how to detect which, if any, ship marker is being hovered over.

When the ship markers aren't clustered I use the OpenLayers function "getFeaturesAtPixel", check if there's a ship marker among the features, and show popup info about the ship if one is found. When they are clustered, hovering over the markers inside the temporarily "expanded" cluster doesn't yield any other features but the cluster itself when calling getFeaturesAtPixel.

One possible way to solve this that I got stuck on was manually checking for the boat features when hovering over a cluster. I was trying to use Extent's "containsCoordinate" to see if the extent of the ship marker's geometry contains the coordinates of the pointer's pixel. However, the extent I get from the ship markers is basically a point value (from the Point that is used to position the marker), not the actual extent the whole icon covers.

Possible challenge that would solve this: how do you manually check if a feature covers a pixel / coordinate?

Upvotes: 3

Views: 351

Answers (1)

Magnueil
Magnueil

Reputation: 113

Thank you to Mike for providing the solution in the comments.

I added a separate VectorLayer for the ships, with hidden markers, and then used pointer interaction with these to trigger the popup. Just be aware that if you, like in the OL example, have a larger clustering radius than actual radius on your circle icons the info will still show for hidden markers just outside a cluster icon.

Mike has kindly provided an example based on the earthquake clusters example from OpenLayers: codesandbox.io/s/damp-flower-p1gh2

Upvotes: 1

Related Questions