Hello
I've setup, in Page Manager, 2 tabs displaying two maps. The default one displays normally, but when I click on the tab I can only see a byte of the map, in a corner. If I resize my browser, then the map is fully displayed. It happens in all browsers... :/
Could you see what is happening ?
Any clue welcome....

Comments

filippo.ledda’s picture

filippo.ledda CreditAttribution: filippo.ledda commented

I also experience the same issue with the map initially hidden. It happens with the google maps, while everything works with OSM maps. Could it big a timing issue with complex/slow base layers?

milos.kroulik’s picture

milos.kroulik CreditAttribution: milos.kroulik commented
Title: Partial Map » Map doesn't display correctly until window resize
Countzero’s picture

Countzero CreditAttribution: Countzero commented

Have this problem too.

I tried to force a refresh with :

  attach: function (context, settings) {
    $('.hebertab ul li a').click(function() {
      var map = $('#openlayers-map').data('openlayers');
      map.openlayers.updateSize();
    });
  }

... but it doesn't work. My guess is the events don't trigger in the right order, but I'm not that familiar with the OL js framework in relation to the DOM.

The behaviour depends a lot on how you set the containing div before the page loads, and in my case, the tab managmeent code relies on setting the display property of the containing DIV, which is perhaps incompatible with this workaround.

If anybody has some insight on this, I'd be much interested.

Thanks

mikejuic3’s picture

mikejuic3 CreditAttribution: mikejuic3 as a volunteer commented

I had a similar issue using field groups in tabs.

My openlayers geofield widget was not loading anything but the controls until I resized the browser window.

I could not load the map using:

var map = $('#openlayers-map').data('openlayers');

However after a lot of fiddling in the javascript console I got the following to work.

  jQuery(document).ready(function () {
      obj = Drupal.openlayers.instances;
      mymap = obj[Object.keys(obj)[0]];
      jQuery('a[href*="#bootstrap-fieldgroup-nav-item--bounding-box"]').click(function () {
      setTimeout(updatemap, 200);
      function updatemap() {
      mymap.map.updateSize();
    }
      });
  });

Change #bootstrap-fieldgroup-nav-item--bounding-box to the selector for your tab or pill.

I put the set timeout part in because for some reason it only works if there is a slight time delay before triggering updateSize()

This also works if there is only one map on your form. It uses the first map in Drupal.openlayers.instances

You can probably adjust it to work with more than one map per form by altering this: obj[Object.keys(obj)[0]]

Hope that saves people some time.