CODEWITHSUNDEEP
mapbox-gl-js
John Ruddell
John Ruddell

Reputation: 25862

Allow pointer event to propagate to mapbox map

I'm using mapbox to show a pulsating icon of the closest ping for a given line. Meaning, I have a geojson line that is comprised of multiple ping locations, and what I am currently doing is when I hover the line I find the closest ping and display it.

Now the issue with this is this ping has a popup that shows some specific information about each individual ping. This popup covers the line in some situations which prevents the mousemove event on the map. This makes it so the closest ping isn't showed all of the time because the closest ping to my cursor location would be under the popup. Anyone have an idea of how to fix this? I've tried a few things including adding pointer-events: auto to the popup.

Here is a codepen showing what I'm talking about

Upvotes: 2

Views: 767

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126687

You were super close. The correct answer is pointer-events: none;

Updated codepen.

(Edit - John)

For others coming to this I needed to make some popups "readonly" that would pass events through while leaving other popups as is. Steve was correct that setting pointer events to none works, but there isn't a way through CSS to style a parent element (aka the popup-content class). I ended up adding a class to the popups content element when I want to show it. Because Mapbox doesn't support this you have to fidget with it a little bit. The last change/update you make to the popup during a render cycle has to be the class update or Mapbox will remove the class

CSS
.no-pointer-events {
    pointer-events: none !important;
}

JS
const popup = marker.getPopup();
popup.setHTML(... html here ...)
if (!popup.isOpen()) {
    marker.togglePopup();
}
popup._content && popup._content.classList.add('no-pointer-events');

Upvotes: 2

Related Questions