DockLayoutPanel and Maps

[jd]

Hi,

I am trying to use the new DockLayoutPanel with a Google map in the
center panel which takes up what ever space remains. The map does not
render properly due to not being able to figure out its dimensions. I
have modified the sample below to demonstrate this by adding a map
with 100% height and width.

public class DockLayoutPanelExample implements EntryPoint {

public void onModuleLoad() {
// Attach five widgets to a DockLayoutPanel, one in each
direction. Lay
// them out in 'em' units.

final MapWidget map = new MapWidget(LatLng.newInstance(50, 50), 8);
map.setWidth("100%");
map.setHeight("100%");

map.addMapMoveEndHandler(new MapMoveEndHandler()
{
public void onMoveEnd(MapMoveEndEvent event)
{
Window.alert(map.getBounds().toString());
}
});

DockLayoutPanel p = new DockLayoutPanel(Unit.EM);
p.addNorth(new HTML("north"), 2);
p.addSouth(new HTML("south"), 2);
p.addEast(new HTML("east"), 2);
p.addWest(new HTML("west"), 2);
p.add(map);

// Note the explicit call to layout(). This is required for the
layout to
// take effect.
p.layout();

// Attach the LayoutPanel to the RootLayoutPanel. The latter will
listen for
// resize events on the window to ensure that its children are
informed of
// possible size changes.
RootLayoutPanel rp = RootLayoutPanel.get();
rp.add(p);

// The RootLayoutPanel also requires that its layout() method be
explicitly
// called for the initial layout to take effect.
rp.layout();
}
}

I believe the map needs to be able to figure out its exact height and
width in pixels.

Can anyone suggest an approach to get around this problem?

Thanks,

John

[jd]

I have found the issue and am not sure how to fix it using the current
API. After setting 100% height and width on both the DockLayoutPanel
and RootLayoutPanel the map still reported a span of 0 and did not
render correctly. In Safari's Inspector I could see that the only
element without 100% height and width was the generated "layout
parent" element but after changing this in using the inspector it
worked.

So I think I need to be able to access the Layout.parentElem to modify
its style.

[jd]

Actually I think that was a red herring - setting the parentElem style
just forced a re-render and changing the map size had the same effect.

I think the problem is due to the map trying to initialize itself
before layout() is called. If I add a holder panel like this:

SimplePanel holder = new SimplePanel();
p.add(holder);

and then add the map after layout() like:

p.layout();

MapWidget map = new MapWidget(LatLng.newInstance(50, 50), 8);
map.setWidth("100%");
map.setHeight("100%");

holder.add(map);

it works.

I have one question about threading in the browser - I have used YUI
LayoutManager which is very similar to DockLayoutPanel.

http://developer.yahoo.com/yui/examples/layout/nested_layout.html

If you want to nest layouts or use a map inside a layout you need to
register a listener for an onrender event. When I asked why, Dave
Glass said that although the JS is single threaded, the DOM elements
will not be created by serially so you must wait until the event fires
before you can safely layout nested items that depend on the parent
layout.

Could this be a problem here also?

Thanks,

John

[Eric Ayers]

Have you tried the method map.checkResizeAndCenter()?

--
Eric Z. Ayers
Google Web Toolkit, Atlanta, GA USA

[Eric Ayers]

Also, this discussion would be more appropriate for the gwt-google-apis group. GWT contributors is for the developers of the Google Web Toolkit core product.

[Joel Webber]

Actually, can I at least ask for a cross-posting here? I would very much like to know if there are common cases that get broken by the new layout system, and this seems like a pretty important one. I don't actually know much about how maps tends to initialize itself, but I'll keep an eye on this thread -- any more information on precisely what's going on would be helpful. Thanks.

[jd]

Yeah sorry I was not sure if this was more of a development topic or
typical user problem.

I tried your suggestion of map.checkResizeAndCenter() and it works
perfectly. It also seems a better solution than my original
SimplePanel place holder.

It seems that the Google map object initializes its size as soon as it
is added to the document. Perhaps MapWidget could also implement
RequiresResize?

So now a working example is:

public void onModuleLoad()
{
DockLayoutPanel p = new DockLayoutPanel(Unit.PX);
p.addNorth(new HTML("north"), 100);
p.addSouth(new HTML("south"), 100);
p.addEast(new HTML("east"), 100);
p.addWest(new HTML("west"), 100);

MapWidget map = new MapWidget(LatLng.newInstance(-41.1, 174.8), 5);
p.add(map);

p.layout();

RootLayoutPanel rp = RootLayoutPanel.get();
rp.add(p);

rp.layout();

map.checkResizeAndCenter();
}

John

[Joel Webber]

Having MapWidget implement RequiresResize would seem to be the right approach. I can see how the maps code would need to be informed when it is resized, as it needs to create the appropriate number of tiles on each axis. Does this sound reasonable to you, Eric?

[Eric Ayers]

I'll look into implementing RequiresResize, I created an issue:

http://code.google.com/p/gwt-google-apis/issues/detail?id=308

The problem with the map not refreshing properly and having to call
checkResizeAndCenter() immediately after creating it has been around a
long time and there is a FAQ up for it. I hope this works. Having a
way to automatically compensate would take some pain out of creating
maps applications!

[Joel Webber]

That makes sense. RequiresResize was created for precisely this kind of scenario, where a widget simply can't work properly without knowing when it has been resized. It doesn't actually cause the widget to be any more broken if you fail to call onResize(), but it serves as a hint to the developer that this is required, and will cause panels that implement ProvidesResize to automatically call onResize() for their children that require it.

[jd]

I found an issue using DockLayoutPanel with YUI grids.

Just double posting here as Joel is listening...

http://groups.google.com/group/google-web-toolkit/browse_thread/thread/56eae8aff7502287

On Sep 29, 8:52 pm, Joel Webber <j...@google.com> wrote:
> That makes sense. RequiresResize was created for precisely this kind of
> scenario, where a widget simply can't work properly without knowing when it

> has been resized. It doesn't actually cause the widget to be any *more* broken

[Joel Webber]

Thanks for letting me know about this. I'll follow up on that thread.

[jd]

Just wanted to update this example by noting that with the recent
changes this workaround no longer works. This is because the calls to
layout() are now delayed and scheduled after the current code
executes. I had to do this to get the map to layout correctly:


root.animate(0, new AnimationCallback()
{
public void onLayout(Layer layer, double progress)
{
}

public void onAnimationComplete()
{
map.checkResizeAndCenter();
}
});


John

[Eric Ayers]

I just wanted to note that a recent change to trunk should fix problems with using the layout panel in trunk, and we'll be including it in the next release.

--

http://groups.google.com/group/Google-Web-Toolkit-Contributors