New layouts not playing nicely with Maps
Jeff Schnitzer
panels?
My page is basically a DockLayoutPanel whose main element is a
SplitLayoutPanel whose main element is a MapWidget. The MapWidget is
set to 100% size.
On startup, the map tiles are sized to a very small part of the area,
although the grey background does seem to cover the entire space:
http://www.infohazard.org/~jeff/mapnolayout.png
If I resize the browser window, the map quickly covers the whole area
and starts to work normally.
I've tried calling MapWidget.checkResize() and the LayoutPanel's
forceLayout() methods but neither have an effect. Any idea what I'm
doing wrong?
The code is super-simple:
SplitLayoutPanel split = new SplitLayoutPanel();
this.add(split); // to the DockLayoutPanel
split.addWest(new HTML("<p>blah</p>"), 200);
LatLng cawkerCity = LatLng.newInstance(39.509, -98.434);
MapWidget map = new MapWidget(cawkerCity, 4);
map.setSize("100%", "100%");
split.add(map);
Thanks,
Jeff
Eric Ayers
--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
--
Eric Z. Ayers
Google Web Toolkit, Atlanta, GA USA
Andrew Winter
I have the exact same problem as Jeff. One difference between Jeff's
case and Eric's case is that in Jeff's case, the dimensions of the map
are not known; in Eric's case the map is 400px by 500px. It seems this
problem occurs when the dimensions of the map are not known at build-
time.
I want my map to occupy the bottom-right corner of my UI (like Google
Maps). When I use setSize("100%,"100%"), the MapWidget is given the
correct size (the Google logo etc appear in the right place) but the
tiles don't cover the whole of the widget. When I provide an explicit
size, or resize the browser, the tiles are displayed correctly.
I don't really want to provide dimensions in pixels if I don't have
to. Is this the only way?
Thanks
Andrew.
> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com>
Eric Ayers
> Hi,
>
> I have the exact same problem as Jeff. One difference between Jeff's
> case and Eric's case is that in Jeff's case, the dimensions of the map
> are not known; in Eric's case the map is 400px by 500px. It seems this
> problem occurs when the dimensions of the map are not known at build-
> time.
>
> I want my map to occupy the bottom-right corner of my UI (like Google
> Maps). When I use setSize("100%,"100%"), the MapWidget is given the
> correct size (the Google logo etc appear in the right place) but the
> tiles don't cover the whole of the widget.
The trick I used to schedule checkResizeAndCenter() in a timer
callback solved that issue for me
> When I provide an explicit
> size, or resize the browser, the tiles are displayed correctly.
>
> I don't really want to provide dimensions in pixels if I don't have
> to. Is this the only way?
In the past I've always recommended dimensions in pixels for best
results. You could hack around this by hooking into the resize event
listener.
> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
Andrew Winter
Andrew.
On Dec 21, 12:54 pm, Eric Ayers <zun...@google.com> wrote:
> >> > Does anyone have the GWT Googlemapsworking inside the new Layout
> > For more options, visit this group athttp://groups.google.com/group/google-web-toolkit?hl=en.
Stuart
tweak to Eric's code.
If I placed the timer either before or after the createAndBindUi call
in my widget containing the map, I was still experiencing the map UI
rash Jeff and Andrew had.
However, since my app also uses event handling (via gwt-dispatch), I
was able to fire a custom RetrievedMap event at a place in the code
when I know the app has completely finished UI binding (ie, the user
clicks on a nav item to fetch map data, the app retrieves a success
from the server, the app then fires the RetrievedMap event ). My
docker widget containing the MapWidget listens for the RetrievedMap
event, and so I tucked in Eric's timer code to the method handling the
RetrievedMap event and it worked wonderfully.
Phew. What I am trying to say is: if you are using UI binding, a plain
Timer fix may not work because of arbitrary times that your UI may
complete binding. Best to fire an event when you know the UI is
completely loaded, and in handling the event run Eric's timer code.
Stuart
On Dec 21, 11:06 am, Andrew Winter <andrewwinte...@gmail.com> wrote:
> Thanks, Eric. The timer thing does exactly what I wanted.
>
> Andrew.
>
> On Dec 21, 12:54 pm, Eric Ayers <zun...@google.com> wrote:
>
>
>
> > On Mon, Dec 21, 2009 at 6:19 AM, Andrew Winter <andrewwinte...@gmail.com> wrote:
> > > Hi,
>
> > > I have the exact same problem as Jeff. One difference between Jeff's
> > > case and Eric's case is that in Jeff's case, the dimensions of the map
> > > are not known; in Eric's case the map is 400px by 500px. It seems this
> > > problem occurs when the dimensions of the map are not known at build-
> > > time.
>
> > > I want my map to occupy the bottom-right corner of my UI (like Google
> > >Maps). When I use setSize("100%,"100%"), theMapWidgetis given the
> > > correct size (the Google logo etc appear in the right place) but the
> > > tiles don't cover the whole of the widget.
>
> > The trick I used to schedule checkResizeAndCenter() in a timer
> > callback solved that issue for me
>
> > > When I provide an explicit
> > > size, or resize the browser, the tiles are displayed correctly.
>
> > > I don't really want to provide dimensions in pixels if I don't have
> > > to. Is this the only way?
>
> > In the past I've always recommended dimensions in pixels for best
> > results. You could hack around this by hooking into the resize event
> > listener.
>
> > > Thanks
>
> > > Andrew.
>
> > > On Dec 17, 6:44 pm, Eric Ayers <zun...@google.com> wrote:
> > >> Hi Jeff,
>
> > >> I played around with this and got it to work with these panels:
>
> > >> privateMapWidgetmap;
>
> > >> // GWT module entry point method.
> > >> public void onModuleLoad() {
> > >>Maps.loadMapsApi(null, null, false, new Runnable() {
> > >> public void run() {
> > >> LatLng cawkerCity = LatLng.newInstance(39.509, -98.434);
> > >> // Open a map centered on Cawker City, KS USA
>
> > >> map = newMapWidget(cawkerCity, 2);
> > >> > I've tried callingMapWidget.checkResize() and the LayoutPanel's
> > >> > forceLayout() methods but neither have an effect. Any idea what I'm
> > >> > doing wrong?
>
> > >> > The code is super-simple:
>
> > >> > SplitLayoutPanel split = new SplitLayoutPanel();
> > >> > this.add(split); // to the DockLayoutPanel
>
> > >> > split.addWest(new HTML("<p>blah</p>"), 200);
>
> > >> > LatLng cawkerCity = LatLng.newInstance(39.509, -98.434);
> > >> > MapWidgetmap = newMapWidget(cawkerCity, 4);
> > >> > map.setSize("100%", "100%");
> > >> > split.add(map);
>
> > >> > Thanks,
> > >> > Jeff
>
> > >> > --
>
> > >> > You received this message because you are subscribed to the Google Groups
> > >> > "Google Web Toolkit" group.
> > >> > To post to this group, send email to google-we...@googlegroups.com.
> > >> > To unsubscribe from this group, send email to
> > >> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
jd
http://groups.google.com/group/google-web-toolkit-contributors/browse_thread/thread/c0dc9b54edd48531
and solved it with a callback which is more reliable than a timer
because it cancels any existing animation which might run past your
timeout.
root.animate(0, new AnimationCallback()
{
public void onLayout(Layer layer, double progress)
{
}
public void onAnimationComplete()
{
map.checkResizeAndCenter();
}
});
> > > >> > My page is basically aDockLayoutPanelwhose main element is a
Dave
I have the same problem as stated in 1st post above. I have read other
post and this problem seem to be persisted for sometime now as shown
is this earlier post
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/657ed9bb2e2e9011/794322db35f85adc?lnk=gst&q=Guillem#794322db35f85adc.
Rather than using timer hacks, I would have felt that this issue would
have been resolved by now. Anyway, I have tried several of the
techniques suggested in both post and to no avail. In the code below I
have placed 3 maps on a StackPanel. The map that is loaded on the 1st
sub-menu in the stack panel is rendered properly but the other 2 sub-
menus in the stack panel has a 'grey area' for most of the map and the
map is not properly centered. The maps show up properly when I use a
Vertical Panel instead of a StackPanel. I don't want to use a Vertical
Panel I have placed the code below in an Ext-GWT widget. Could give me
some insights as to how fix this? I have already tried the
"checkResizeAndCenter()" function.
private void location()
{
//Function for "About Us -> Locations"
StackPanel spLocationMap = new StackPanel();
VerticalPanel vpLocationMap = new VerticalPanel();
Label lblHeading = new Label("Map of Campus Locations");
lblHeading.addStyleName("locationHeading");
vpLocationMap.add(lblHeading);
vpLocationMap.setSize("100%", "100%");
spLocationMap.setSize("100%", "100%");
spLocationMap.add(getMap(LatLng.newInstance(18.400754, -77.364009),
"Campus 1"), "Campus 1");
spLocationMap.add(getMap(LatLng.newInstance(18.456352, -77.396647),
"Campus 2"), "Campus 2");
spLocationMap.add(getMap(LatLng.newInstance(18.433755, -77.206820),
"Campus 3"), "Campus 3");
spLocationMap.addStyleName("spLocationHeader");
vpLocationMap.add(spLocationMap);
vpLocationMap.addStyleName("verticalPanelLocation");
center.removeAll();
center.add(vpLocationMap);
center.layout();
}
private MapWidget getMap(final LatLng point, final String campus)
{
Marker marker = new Marker(point);
final MapWidget map = new MapWidget(point, 15);
map.setSize("700", "488");
map.setScrollWheelZoomEnabled(true);
map.setDoubleClickZoom(true);
map.addOverlay(marker);
map.addControl(new SmallMapControl());
map.addControl(new MapTypeControl());
map.getInfoWindow().open(map.getCenter(), new InfoWindowContent
(campus));
marker.addMarkerClickHandler(new MarkerClickHandler()
{
@Override
public void onClick(MarkerClickEvent event)
{
InfoWindow info = map.getInfoWindow();
info.open(point, new InfoWindowContent(campus));
}
});
return map;
}
Jones
Dave
http://googlegeodevelopers.blogspot.com/2009/01/google-maps-api-library-for-gwt.html.
This is a great help. On this page, to the left of the Google Maplet:
Click on "Source Code". Then click on the "Full Source" hyperlink.
Then Click on "CLA Designer". There are various files will be found
here. The important file to view is "MapsBlogDec08.java".
Jones
Jeff Schnitzer
Maps v3 in a slightly different way. BTW, I created a (very crude at
the moment) project for a Maps v3 GWT wrapper here:
http://code.google.com/p/gwt-maps3/
My solution was to forceLayout() recursively on all the parent panels like this:
The maps v3 wrapper is really sparse but it loads in the blink of an
eye and works tolerably on mobile browsers.
Jeff