Search code examples
javascriptcssopenlayers

OpenLayer 4 popup, prevent pointer to target data behind a div

I have a problem with the Popup of OpenLayers 4, when I open the popup info and I'm inside the div with the pointer, it still triggering the hover popup with the data behind the popup, how can I prevent that?

I'm using this CSS code for the popup:

#popup {
  z-index: 20;
  background-color: #fff;
}

The popup is created with the overlay layer:

overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});

But the pointer still passes through the div. the popup contains a lot of div and inside span

In the screenshot the hover popup was triggered when the pointer was on the Vehs text

enter image description here

You can refer to this for the code I use for the popup, the only difference is that I have a hover popup, I think the problem is on the creation of the click popup (the one with button) and the real z-index of it.

http://openlayers.org/en/latest/examples/popup.html

Solution

  • In the end, I found a very simple way to solve the problem, inside the function I call for the hover popup I add a simple if statement

    map.on('pointermove', function(evt) {

    info.html("");

    if (overlay.getPosition() !== undefined) {
      return;
    }
.....
}