2

Regarding on the previous question asked https://gis.stackexchange.com/a/303372/119333, solution from best answer is implemented and its working. I am rendering tab panel inside popup overlay and you can click on tabs without click bubbling further on map. Now I added button inside my tab panels and when i click on that button (yellow) it bubbles to map and executes map.on('click',function()), ignores if statement despite fact mouseOver variable is true.

Code: Button rendered inside table row in tab panel:

<tr style="background:#D7DBDD;visibility:visible" id="brug"><td>BROJ UGOVORA</td><td><button id="brugovoratrigger" onClick="pozoviUgovor(this)" style="background:yellow">'.$row['broj_ugovora'].'</button></td></tr>

JS:

var ug=document.getElementById('brug');

ug.addEventListener('mouseover',function(){
map.getInteractions().forEach(function(interaction){
interaction.setActive(false)
mouseOver=true
   })
})

map.on('click',function(e){
if(mouseOver){ return }
else {
map.removeOverlay(popup)
var coor=e.coordinate
...

Here is picture of what I am talking about: enter image description here

0

When transitioning between nested elements, a mouseout event followed by a mouseover event will be triggered, so the map click event is available again for some time.

You can try using the mouseenter and mouseleave events instead

This tutorial is worth reading

  • I tried but still won't work.. – Goran Grle May 20 at 7:47
0

Popup overlay definition is missing in the question and so is version of OpenLayers you are using, so it's hard to say why it doesn't work for you.

Example below (base code taken from OpenLayers example https://openlayers.org/en/latest/examples/popup.html) works as expected in OpenLayers 5.3.0, without using mouseover event. Mouse click on popup overlay stays there and does not propagate to map.

<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
  <div id="popup-content">
    <table style="width: 100%">
      <tr>
        <td>Some text</td>
        <td>
          <button id="myButton" type="button" onclick="processButtonClick(this);">Click Me!</button>
        </td>
      </tr>
    </table>
  </div>
</div>

<script>
  var container = document.getElementById('popup');
  var content = document.getElementById('popup-content');

  function processButtonClick(element) {
    console.log('button click: ' + element.id );
  };

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

  var layer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var map = new ol.Map({
    layers: [layer],
    overlays: [overlay],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 3
    })
  });

  map.on('singleclick', function(evt) {
    console.log('map click');
    var coordinate = evt.coordinate;
    overlay.setPosition(coordinate);
  });
</script>

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.