The icon I use on my marker does not cover the whole quadratic area.

enter image description here

Is there a way to be able to click through the transparent parts of the marker onto another marker or the map itself?

I'm using only SVGs as marker icons. So I thought of css pointer-events, but this didn't seem to work.



Yes, but it's overly complicated.

First, you'll need to capture the click event on the marker's icon, and fetch the colour of the clicked pixel. Discard the RGB values, and compare the alpha value to a threshold.

Then, remove the marker's icon from the DOM, call document.elementFromPoint to know what's "behind" the marker's icon, re-add the icon to the DOM, create a synthetic MouseEvent (or PointerEvent) based on the original event, and dispatch it on the element behind. There is an in-depth explanation of this technique at "Forwarding Mouse Events Through Layers".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.