OpenLayers map interaction issue on margin left

Question

I have created a sidebar that opens and closes. When it opens, it adds margin to the map container ( calling w3_open() ). See pen below.

However the interactions on the map e.g. clicking on the feature (getfeatureinfo) is wrong when there is margin on the left. I click on one feature but another feature is clicked

Probably I need to update map view when there it adds margin?

Also note that when open and close browser's console for some weird reason the problem is fixed.

https://codepen.io/csandreas1/pen/xoWGyB?editors=1010

<script>
function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementById("mySidebar").style.width = "25%";
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("openNav").style.display = 'none';
}
function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("openNav").style.display = "inline-block";
}
</script>

does this help? https://gis.stackexchange.com/questions/31409/openlayers-redrawing-map-after-container-resize — zwnk, Jul 01 '19 at 13:06
probably, i'll need to add margin to the map itself. Cause i am pushing it to the right 20%. — csandreas1, Jul 01 '19 at 13:31
This can be solved by removing the margin from the container that the map is in. But still this is not the answer on this question — csandreas1, Jul 01 '19 at 13:34
i did some quick and dirty testing and i think you have to call map.updateSize(); and redraw the popup overlay. this way i was able to get the same coordinate after opening/closing the menu. — zwnk, Jul 01 '19 at 13:54

score 3 · Accepted Answer · answered Jul 01 '19 at 16:47

Calling map.updateSize() is the right solution, but it's not enough. It has to be called at the right time, after side menu animation is finished. The simples solution is to use setTimeout call with the proper delay.

Code would then look something like this:

function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementById("mySidebar").style.width = "25%";
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("openNav").style.display = 'none';
  setTimeout(function() {map.updateSize();}, 500);
}
function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("openNav").style.display = "inline-block";
  setTimeout(function() {map.updateSize();}, 500);
}

OpenLayers map interaction issue on margin left

1 Answers1