1 Reply by johnvanbreda

  • johnvanbreda
  • Administrator
  • Offline
  • From: UK
  • Registered: 27-04-2006
  • Posts: 1,237

Re: Using a map in a div that is initially hidden.

I came across this problem with openlayers: http://trac.openlayers.org/ticket/2350

Basically, if a map starts off in a hidden div, then you show it later only part of a Google map layer will show. The area to the right and bottom will just show a grey panel.

The trick I discovered is to not create the map until the point in time at which is actually appears. You can apply the fixes in the ticket above if you prefer, but that means a hack to the OL source code so I did not fancy that.

In my case, I have a radio group, and when a certain radio item is selected want the map to show. I put the radio buttons in a div with id radios so that I can use a jQuery selector to respond to the click. The trick is to insert JavaScript before and after the call to create the map that wraps it so it does not get called until the radio button is clicked. Also we use jQuery("#map")[0].map which returns the openlayers map object or undefined if it does not already exist.

$r .= '<div id="map_wrapper" style="display:none;">';
data_entry_helper::$javascript .= 'jQuery("#radios input").click(
      function() {
        var $radioId = jQuery("input[name=smpAttr\\\\:'.$args['platform_attr_id'].']:checked").val();
        if ($radioId == 1) {
          jQuery("#map_wrapper").show();
          // Following is inserted here to fix issue http://trac.openlayers.org/ticket/2350
          if (typeof jQuery("#map")[0].map=="undefined") {
';
        $r .= data_entry_helper::map_panel($options);
        data_entry_helper::$javascript .= '}
        } else {
          jQuery("#map_wrapper").hide();
        }
      }
    );'."\n";
$r .= '</div>';
John van Breda
Biodiverse IT

johnvanbreda's Website

2 Reply by atu

  • atu
  • Member
  • Offline
  • From: Luxembourg
  • Registered: 06-10-2008
  • Posts: 26

Re: Using a map in a div that is initially hidden.

Hi,
jquery .live function probably can solve this problem.
http://api.jquery.com/live/

Best wishes,
Armand

atu's Website

3 Reply by Jim Bacon

  • Jim Bacon
  • Veteran
  • Offline
  • From: BRC
  • Registered: 03-11-2008
  • Posts: 980

Re: Using a map in a div that is initially hidden.

Hmmm. And I suppose this is quite likely to apply if I am using the tabbed interface and my map isn't on my top tab...

Ahhh. Just turned off tabs momentarily and suddenly multimap has improved delivery of maps and they drag properly in Firefox.

To apply the same principle to my tabs, which are in a div with id="tabs", and with my map on the second tab (index =1, since the index is zero-based), my corresponding code looks like this.

            data_entry_helper::$javascript .= 
              '$("#tabs").bind("tabsshow", function(event, ui) {
                  if (ui.index==1 && typeof $("#map")[0].map=="undefined") {
              ';
            echo data_entry_helper::map_panel($options);
            data_entry_helper::$javascript .= '
                }
              });
            ';

4 Reply by johnvanbreda

  • johnvanbreda
  • Administrator
  • Offline
  • From: UK
  • Registered: 27-04-2006
  • Posts: 1,237

Re: Using a map in a div that is initially hidden.

Hi Jim
What I'm not so sure about is that the MNHNL Citizen Science 1 form doesn't have this problem, at least not with the Google layers, and not using a tabbed or a wizard interface. So what is the difference?

Cheers

John van Breda
Biodiverse IT

johnvanbreda's Website

5 Reply by Jim Bacon

  • Jim Bacon
  • Veteran
  • Offline
  • From: BRC
  • Registered: 03-11-2008
  • Posts: 980

Re: Using a map in a div that is initially hidden.

I'd guess you are defining a map size in pixels where I am using %.

6 Reply by johnvanbreda

  • johnvanbreda
  • Administrator
  • Offline
  • From: UK
  • Registered: 27-04-2006
  • Posts: 1,237

Re: Using a map in a div that is initially hidden.

Presumably you can give that a quick test? It would be good to know for future reference.

John van Breda
Biodiverse IT

johnvanbreda's Website

7 Reply by Jim Bacon

  • Jim Bacon
  • Veteran
  • Offline
  • From: BRC
  • Registered: 03-11-2008
  • Posts: 980

Re: Using a map in a div that is initially hidden.

I know that in my case, with a map in a hidden tab, when I defined the map size in pixels, I had no problems. When I moved to % the maps wouldn't drag properly in Firefox until after a window resize. Now, with your fix above, I can use % sizing successfully.

I did test to see if this also fixed my problem that, after a window resize, Google maps put the dots in the wrong place but that problem remained.

See also note in JQuery UI documentation.

8 Reply by johnvanbreda

  • johnvanbreda
  • Administrator
  • Offline
  • From: UK
  • Registered: 27-04-2006
  • Posts: 1,237

Re: Using a map in a div that is initially hidden.

This problem cropped up again, because I found some problems using OpenLayers in IE unless the map is loaded on window load, rather than on jQuery document ready. The error is a JavaScript error on line 598 of OpenLayers. But, having fixed this, the partial layer loading occurs for Google maps loaded on an initially hidden tab again.
The solution was to change the qay jQuery tabs are hidden, so they are just moved off the page rather than applying display:none. This is done in the default_site.css file.
The problem with this approach is if you did have code that interacted with the map on document ready, this code might not work as the map JavaScript is now on window.load. It should be simple to fix though.

John van Breda
Biodiverse IT

johnvanbreda's Website

9 Reply by Jim Bacon

  • Jim Bacon
  • Veteran
  • Offline
  • From: BRC
  • Registered: 03-11-2008
  • Posts: 980

Re: Using a map in a div that is initially hidden.

I still have problems dragging maps in Firefox if they are not fixed width unless I use the fix outlined in #3 above. However, following the change in #8 this means that references to data_entry_helper::$javascript need to be changed to data_entry_helper::$onload_javascript.