3

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>

enter image description here

  • does this help? gis.stackexchange.com/questions/31409/… – zwnk Jul 1 at 13:06
  • calling map.updateSize(); actually caused me more issues – csandreas1 Jul 1 at 13:22
  • probably, i'll need to add margin to the map itself. Cause i am pushing it to the right 20%. – csandreas1 Jul 1 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 1 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 1 at 13:54
3

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);
}

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.