Maps Not Displaying Properly in Tabbed Panels (hidden divs)

I'm having the same issue when using fieldgroups with tabs. Found the same stackoverflow issue.

FYI, here's the code I used to fix it. I targeted the tab on the page for a click event. Probably not the most elegant but it works for now.

(function($) {

  Drupal.behaviors.leaflet_fix = {
    attach: function (context,settings) {
      $('ul.horizontal-tabs-list li.horizontal-tab-button-1 a').click(function() {
        Drupal.settings.leaflet[0].lMap.invalidateSize(false);
      });
    }
  }
  
})(jQuery);

@ randallknutson - I tried your code here (bottom of page) but so far it is not working for me - any ideas please what I am missing?

Thank you...

Hey @Juc1 not sure if you are still having issues but I too couldn't get @randallknutson's code to work. However when I implemented the code suggested in the original StackOverflow issue it worked!

Instead of:
Drupal.settings.leaflet[0].lMap.invalidateSize(false);

Implement:

var map = Drupal.settings.leaflet[0].lMap;
L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);

Works well for me; hopefully it will for you too :)

Cheers,

Marc

@ marc.groth - thanks for your reply - I am just getting back to this. I have updated the code but it is still not working Does my code look ok?

Thanks...

Just want to note that this is a problem with alot of other modules when placed into a tab whether it's quicktab or panels_tab or panels_ajax_tab. The hidden div issue seems to be the general cause.

Hey @Juc1,

I looked at your code and I see no call to requestAnimFrame() as per my first response. This code needs to be executed (ideally) when you click on the new tab (and ideally only the first time, if possible). So on click in my js I have made a call to that code and it's forced a refresh of the map.

Where is the code to do that in your example/site?

Cheers,

Marc

@ marc.groth sorry I was doing something else and messed up my js file - please look again here.

Thanks...

Hey @Juc1,

Sorry it took me a while to respond. I think the problem you're encountering isn't the same as the issue posted here. This is stating that a map IS displaying, just not quite correctly. In your case, there is no map at all... So I think you have a different issue.

I did notice that you are trying to load the same map on one page in two different places (with the same ID). I don't think you are able to do that, which I think is where your problem lies. Are you wanting to show the exact same map in the new tab? If so, how come? If not, perhaps try specifying a different ID? I reckon that will work.

Sorry I can't be much more help... Hopefully if you get at least a partial map displaying you will then be able to implement the fix specified in this ticket (if it's even necessary, maybe it'll just work for you!).

Best of luck.

Cheers,

Marc

P.S. as @SocialNicheGuru suggested, this problem isn't specific to Leaflet and is apparent due to the use of hidden divs.

Are you wanting to show the exact same map in the new tab? If so, how come? If not, perhaps try specifying a different ID? I reckon that will work.

@ marc.groth no I did not want to show the same map in each tab - they were just meant to be random maps and I did not realise that the same map would cause a problem. I have now changed the maps and I think everything is ok = awesome, thanks.

Getting back to the original issue, this does seem to be something that should be able to be fixed with a patch to the Leaflet module, I'm just not sure exactly where... I'm seeing this on Horizontal tabs made with fieldgroup module, so I'm assuming it's going to be any time the map is hidden on pageload. Is there any way we could select for this globally? Maybe some selector like *[class*="hidden"] .leaflet-container ("any element which has 'hidden' in a class name and contains a leaflet container")? Where would the fix go in the module? leaflet.drupal.js? Elsewhere?

Let's squash this. Thanks!

I have the same issue with the collapsible fieldset, a fix for this would be great !

Workaround:

$(window).load(function() {
          if (Drupal.settings.leaflet.length > 0) {
            Drupal.settings.leaflet[0].lMap.invalidateSize(false);
          }
        });

For Drupal 8, use this line to regenerate the map:

drupalSettings.leaflet['leaflet-map'].lMap.invalidateSize(false);

@meagan_m where do would I put that line?

With field group tabs I got it working with this

(function($,Drupal) {
  Drupal.behaviors.tabs_leaflet_fix = {
    attach: function (context,settings) {
        $('.field-group-tabs-wrapper').on('click','ul.vertical-tabs-list li.vertical-tab-button a',function() {
          console.log(drupalSettings.leaflet);
          for(var maps in drupalSettings.leaflet){
            map = drupalSettings.leaflet[maps];
            map.lMap.invalidateSize(false);
          }
        });  
    }
  }  
})(jQuery,Drupal);

I found that the key for the leaflet object changes based on the ID of the node.
like: leaflet-map-node-series-1-field-geolocation (where the number 1 is the node ID)

So the following would not work:

drupalSettings.leaflet['leaflet-map'].lMap.invalidateSize(false);

I had to retrieve the first key in the leaflet object. The following works:

console.log(drupalSettings.leaflet);
drupalSettings.leaflet[Object.keys(drupalSettings.leaflet)[0]].lMap.invalidateSize(false);

#1 Facing same problem here. I tired #16 but not working at all. Thanks