ACF Tabs and maps about geometa-acf HOT 2 OPEN

Next round of updates I can look into this more closely, but for now,

What you'll want to call is mapobj.map.invalidateSize();.

You should be able to find the mapobj in window.leafletphp.maps, which is a dictionary. The map is given a random ID each time, so you could to do something like this:

jQuery('#mytabs').on('tabchange',function(e){  // <--- Or whatever the tab change event is
    for(mapobj in window.leafletphp.maps){
         mapobj.map.invalidateSize();
    }
});

from geometa-acf.

Thanks for the quick response! It generally worked, but I had to tweak a bit. I think the solution could be better, but this is all I can do for now. The click event of the tab was what I attached to, because i didn't now how to attach to the tab block being made visible. I added a delay though because on click the block isn't yet visible and invalidateSize wasn't working. Unless I clicked again.

Also The event fires twice when I click on the tab. No idea why. My selector is pretty specific.

This is what I ended up with:

jQuery("#acf-group_5a9ea4efe5997 .acf-tab-wrap [data-key='field_5a9ea930ce67f']").on("click",function(e){ 
  setTimeout(function() {
    for(mapobj in window.leafletphp.maps){
      m = window.leafletphp.maps[mapobj].map;
      m.invalidateSize();
    }
  }, 100);
});

from geometa-acf.