Refresh map in vertical tab [#2063543]

Hello,
I'm building a site where the map is in "not first" vertical tab, so it is not displayed correctly when opening the tab for first time. I can't use the fixed pixel width workaround because the site should have fluid width. So I put together this few lines of jQuery, which changes the size of surrounding divs according to vertical tab pane:

var width = $(".vertical-tabs-panes").width();
$("#openlayers-map").css('width', width);
$("#openlayers-container-openlayers-map").css('width', width);

This works and the corresponding numbers on both divs are changed, but nothing happens. The map is still looking bad.

Is there a way how can I refresh just the map according the new dimensions?
I was thinking about some false window resize, because as soon as I resize the window the map refresh and is ok. But that is far over my jQuery skill.

Is this aproach even possible? Or what else can I do to get it working?

Thanks a lot for answer.

Comments

Comment #1

dshields CreditAttribution: dshields commented 2 December 2013 at 16:45

I'm looking for a solution for this, too, as I have my map in a tabbed interface and it is not loading properly on the page load because it is not on the default or primary tab.

Comment #2

jamsilver CreditAttribution: jamsilver commented 5 February 2014 at 17:32

Note this is not a good fix (because it wreaks a little bit too much havoc), but it does the trick for me at the moment. Others may find it useful :).

In a custom module

/**
 * Implements hook_libraries_info_alter().
 *
 * @param $libraries
 */
function mymodule_libraries_info_alter(&$libraries) {
  if (isset($libraries['openlayers'])) {
    $libraries['openlayers']['integration files']['mymodule'] = array(
      'js' => array('myopenlayersoverrides.js'),
    );
  }
}

Then in myopenlayersoverrides.js:

(function($){

  /**
   * Monkey patch vertical-tabs.js to make openlayers maps refresh properly.
   */

  if (Drupal && Drupal.verticalTab) {
    var oldfocus = Drupal.verticalTab.prototype.focus;
    Drupal.verticalTab.prototype.focus = function() {
      oldfocus.call(this);
      if (this.fieldset.find('.openlayers-map').length) {
        // A low-level window resize event seems to do the trick.
        setTimeout(function() {
          if (document.createEvent) { // W3C
            var ev = document.createEvent('Event');
            ev.initEvent('resize', true, true);
            window.dispatchEvent(ev);
          }
          else if (document.fireEvent) { // IE
            document.fireEvent('onresize');
          }
        }, 300);
      }
    }
  }

}(jQuery));