MapPress in Tabs and Hidden Elements

Maps may not display properly when they are inside an element that is initially hidden, such as a tab, slider, or accordion. 

This is due a quirk in the way browsers report information about hidden elements. A hidden element always has a size of zero, so the map will initially be drawn as a line, with no height.

The solution is to re-draw the map when the element is shown – for example when a tab is clicked, or a dropdown is opened.

MapPress includes a built-in workaround for jQuery UI Tabs.  For other controls, you can contact me for a custom solution or implement your own using JavaScript. When the hidden element is displayed, redraw the map by calling its resize() and recenter() methods. For example to redraw and re-center the first map on the screen use:

Here’s an example that redraws all maps inside dropdowns with the class ‘mycontrol’, when the dropdown element is clicked.  The setTimeout() is only needed if there is an animation (such as sliding into place) that must complete before the map can be resized:

jQuery(document).ready(function() {
  // Resize all maps on the screen
  jQuery('.mycontrol').on('click', function() {
    jQuery(document).find('.mapp-layout').each(function() {
      var id = jQuery(this).attr('id'); // e.g. mapp0-layout
      var mapid = id.replace('-layout', '');
      var map = window[mapid];
      setTimeout(function() {
      }, 350);