Skip to content

GWT, OpenLayers and Full Screen Maps – Solved!

March 1, 2010

I’m writing a GWT app with an OpenLayers map in it, and no matter how hard I tried, I couldn’t get the map to open full-screen.

The Problem

I wanted a full screen map. Like this.

But what I got was this.

It only happened when the page first opened. If I resized the window, or panned/zoomed the map, then the map redrew to fill the page.

It didn’t matter if I used GWT-OpenLayers (a Widget that wraps up the OpenLayers library) or just got at the OpenLayers javascript directly. Also, it didn’t matter which browser I used, they all drew the map in the top left-hand corner.

The Solution

The answer is to add a DeferredCommand, which updates the map once GWT has finished doing everything else. Here’s a cut-down example which uses a GWT-OpenLayers widget, but the fix works perfectly for standard OpenLayers too.


public void onModuleLoad() {

   ...

   final MapWidget mapWidget = new MapWidget("100%", "100%", config);

   ...

   mapWidget.getMap().setCenter(new LonLat(lon, lat), zoom);

   DeferredCommand.addCommand(new Command() {

      @Override

      public void execute() {

         mapWidget.getMap().updateSize();

      }

   });

}

You’re welcome to check out my onModuleLoad() method in full here.

If you’re using OpenLayers directly, you need to jump through a little extra hoop (or at least I did, there’s probably a much better way of doing it) in order to get at the javascript redraw method…


   DeferredCommand.addCommand(new Command() {

      @Override

      public void execute() {

         updateMapSize();

      }

      private native void updateMapSize() /*-{

         $wnd.map.updateSize();

      }-*/;

   });

}

Advertisements
7 Comments leave one →
  1. March 11, 2010 9:03 pm

    One slight footnote; the version of GWT-OpenLayers that I have doesn’t have the updateMap() method – my fix actually only works in conjunction with a test jar that the guys developing GWT-OpenLayers sent me. You can find that jar in my googlecode repo, or with any luck the whole fix will be rolled into the next version of GWT-OL.

  2. mginkel permalink
    March 12, 2010 9:36 pm

    Quick hack (so you do not need the test jar):
    Use the panTo method with the center of the map instead of the updateSize() method.

  3. June 11, 2010 12:06 am

    Thanks for the example. Can you provide FullScreenMap.html to see the who process?

  4. June 11, 2010 12:16 am

    Excuse me, earlier I asked for your html “FullScreenMap.html” but I did find it in your svn repository.

    I guess the next step is to learn what your url string does.

    …FullScreenMap.html?gwt=…..

    Thanks,
    I’ll try to figure that out next.

  5. June 11, 2010 8:10 am

    Hi Craig,

    That URL is just GWT running in “hosted mode” (which I think is also referred to as “dev mode”). Basically, that’s me testing it; once you deploy the webapp, that disappears.

  6. August 2, 2010 3:51 pm

    The code to change the initial location was missing a transform. You want to specify LonLat but the setCenter method expects coordinates in Gauss-Krueger. (see http://docs.openlayers.org/library/spherical_mercator.html)

    Basically:

    double lon = -2.595;
    double lat = 51.450;
    int zoom = 16;

    LonLat lonLat = new LonLat(lon, lat);
    lonLat.transform(“EPSG:4326”, “EPSG:900913”);
    mapWidget.getMap().setCenter(lonLat, zoom);

  7. August 2, 2010 7:37 pm

    Good work Burns. Although it does sound like the setCenter() method should take a GaussKrueger object (perhaps that inherits from LonLat, or implements the LonLatable interface, or something – I’ll leave the finer details of the class hierarchy as an exercise to the reader).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: