$webwork.htmlEncode($page.space.name) : Google Web Toolkit (GWT), OpenLayers and GeoServer
This page last changed on Sep 13, 2007 by egunay.

This tutorial will introduce you to the GWT - OpenLayers - GeoServer integration plugin by demonstrating how to setup the development environment and how to create a map project.

GWT - OpenLayers plugin aims to wrap OpenLayers JavaScript objects as GWT ui widgets so that GWT users can easily include OpenLayers ui widgets on their web pages for rendering geographical maps produced by GeoServer and/or other map servers like Google Maps, etc.

GWT - OpenLayers plugin is an open source project implemented by Erdem Gunay. Although it does not support all the OpenLayers classes yet, it is in a good shape to use main features including

  • Map, Marker, Icon, LonLat, Size, Pixel, Bounds etc.
  • Layers (WMS, Google, Vector, Markers)
  • Controls (DrawFeature, LayerSwitcher, MousePosition, MouseToolbar, PanZoomBar, Scale)
  • Handlers (Point, Path, Polygon)
  • Popups (Popup, Anchored, AnchoredBubble)
  • Events

Here are some screenshots produced by using this plugin & GWT & OpenLayers & GeoServer

HOWTO setup development environment

Prerequisites

Following components / applications are needed to run this tutorial.

Installing GWT

It should be quite straightforward to install GWT, simply download the release pack and unpack it to somewhere.

Verify that the sample applications under samples directory are running properly.

Add the GWT folder to path environment variable so that the following GWT executable files are in path

  • applicationCreator
  • projectCreator

Installing GeoServer

Follow the installation instructions on GeoServer link above to install GeoServer. Make sure that the geoserver is installed and running properly by clicking following url (Note that depending on the installation, the port number may be different).
http://localhost:8080/geoserver/mapPreview.do

Installing OpenLayers

After downloading the OpenLayers package, unpack the package file. Following folders and JavaScript file will be used later in the tutorial

  • img
  • theme
  • OpenLayers.js

HOWTO use GWT-OpenLayers plugin to show GeoServer map

Create a GWT project

Creating a GWT project is explained in detail by following article
http://code.google.com/webtoolkit/gettingstarted.html

For this tutorial we will create a new eclipse project called 'gwt-openlayers-tutorial'
GWT project creation
  1. create a new folder called 'gwt-openlayers-tutorial'
  2. change directory to 'gwt-openlayers-tutorial' folder
  3. create project by running following command: 
    projectCreator -eclipse gwt-openlayers-tutorial
  4. create an application called 'Tutorial1' by running following command: 
    applicationCreator -eclipse gwt-openlayers-tutorial tutorial.client.Tutorial1
  5. verify that 'Tutorial1-shell.cmd' file has been generated and run this file to make sure the project has been created successfully. You should see a GWT window like this
  6. import 'gwt-openlayers-tutorial' in eclipse. After importing project, browse the generated packages and files. Your project should look like this
  7. you should be able to run the application from eclipse

Add GeoServer map to your GWT application

Now it's time to add GeoServer map to GWT application by using GWT-OpenLayers plugin

Add OpenLayers files to project

Copy following file and folders from OpenLayers unpacked folder to 'src/tutorial/public'

  • img
  • theme
  • OpenLayers.js
Add openlayers_gwt-0.1.jar to your project
Adding openlayers_gwt-0.1.jar to project
  1. Copy previosly downloaded openlayers_gwt-0.1.jar file to gwt-openlayers-tutorial root folder
  2. Refresh Eclipse project. You should now see the openlayers_gwt-0.1.jar file under gwt-openlayers-tutorial project node
  3. Add openlayers_gwt-0.1.jar file to project build path
  4. Add openlayers_gwt-0.1.jar file to project Run class-path
  5. Add following line to Tutorial1.gwt.xml file 
    <inherits name='com.eg.gwt.openLayers.OpenLayers'/>

    so that the file looks like this

    <module>
	<!-- Inherit the core Web Toolkit stuff.                  -->
	<inherits name='com.google.gwt.user.User'/>
	<inherits name='com.eg.gwt.openLayers.OpenLayers'/>

	<!-- Specify the app entry point class.                   -->
	<entry-point class='tutorial.client.Tutorial1'/>
</module>
Modify Tutorial1.html file
Modify Tutorial1.html
  1. Add following line to Tutorial1.html file just before </head> tag 
    <script src="OpenLayers.js" type="text/javascript"></script>
  2. Modify <body> block so that it looks like following. We set up the place holders for OpenLayers map objects (navigator, map, scale indicator, mouse position indicator). 
    <body>
		<!-- OPTIONAL: include this if you want history support -->
		<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
		<table>
			<tr>
				<td style="width:40px" valign="middle" rowspan="3"><div id="nav"></div></td>
				<td colspan="3" align="right">GWT-OpenLayers Plugin tutorial</td>
			</tr>
			<tr>
				<td colspan="3"><div id="map"></div></td>
			</tr>
			<tr>
				<td><div id="scale"></div></td>
				<td/>
				<td align="right"><div id="position"></div></td>
			</tr>
		</table>
	</body>
Modify Tutorial1.java class
import section
import com.eg.gwt.openLayers.client.Bounds;
import com.eg.gwt.openLayers.client.Icon;
import com.eg.gwt.openLayers.client.JObjectArray;
import com.eg.gwt.openLayers.client.JSObject;
import com.eg.gwt.openLayers.client.LonLat;
import com.eg.gwt.openLayers.client.Map;
import com.eg.gwt.openLayers.client.MapOptions;
import com.eg.gwt.openLayers.client.MapWidget;
import com.eg.gwt.openLayers.client.Marker;
import com.eg.gwt.openLayers.client.Pixel;
import com.eg.gwt.openLayers.client.Size;
import com.eg.gwt.openLayers.client.control.LayerSwitcher;
import com.eg.gwt.openLayers.client.control.MousePosition;
import com.eg.gwt.openLayers.client.control.MouseToolbar;
import com.eg.gwt.openLayers.client.control.PanZoomBar;
import com.eg.gwt.openLayers.client.control.Scale;
import com.eg.gwt.openLayers.client.event.EventHandler;
import com.eg.gwt.openLayers.client.layer.Layer;
import com.eg.gwt.openLayers.client.layer.Markers;
import com.eg.gwt.openLayers.client.layer.WMS;
import com.eg.gwt.openLayers.client.layer.WMSParams;
import com.eg.gwt.openLayers.client.popup.AnchoredBubble;
import com.eg.gwt.openLayers.client.popup.Popup;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.RootPanel;
define class attributes
public class Tutorial1 implements EntryPoint {

	private MapWidget mapWidget;
	private Map map;
	private WMS wmsLayer;
	private Markers markers;
	private Popup popup;
modify onModuleLoad(), create map widgets
public void onModuleLoad() {
		// let's create map options
		MapOptions mapOptions = new MapOptions();
		mapOptions.setControls(new JObjectArray(new JSObject[] {}));
		mapOptions.setNumZoomLevels(16);
		mapOptions.setProjection("EPSG:4326");

		// let's create map widget and map objects
		mapWidget = new MapWidget("350px", "350px", mapOptions);
		map = mapWidget.getMap();
		markers = new Markers("marker layer");
create wms layer and map controls
// let's create WMS map layer
		WMSParams wmsParams = new WMSParams();
		wmsParams.setFormat("image/png");
		wmsParams.setLayers("tiger-ny");
		wmsParams.setStyles("");
		wmsParams.setMaxExtent(new Bounds(-74.047185, 40.679648, -73.907005, 40.882078));

		wmsLayer = new WMS("WMS Layer", "http://localhost:8080/geoserver/wms", wmsParams);

		// let's add layers and controls to map
		map.addLayers(new Layer[] {wmsLayer, markers});

		map.addControl(new PanZoomBar(RootPanel.get("nav").getElement()));
		map.addControl(new MousePosition(RootPanel.get("position").getElement()));
		map.addControl(new Scale(RootPanel.get("scale").getElement()));
		map.addControl(new MouseToolbar());
		map.addControl(new LayerSwitcher());
center the map and add a marker on the center
// let's center the map to somewhere and set zoom level to 13
		LonLat center = new LonLat(-73.99, 40.73);
		map.setCenter(center, 13);

		// add marker
		Size size = new Size(10,17);
		Pixel offset = new Pixel(-5, -17);
		Icon icon = new Icon("img/marker.png", size, offset);
		Marker marker = new Marker(center, icon);
		markers.addMarker(marker);
register a mouse over event to the marker
// register mouse over event
		marker.getEvents().register("mouseover", marker, new EventHandler() {
			public void onHandle(JSObject source, JSObject[] param) {
				Marker marker = Marker.narrowToMarker(source);
				if (popup != null) {
					map.removePopup(popup);
				}

				popup = new AnchoredBubble("marker-info",
						marker.getLonLat(),
						new Size(120,80),
						"<p>You moved near " + marker.getLonLat().lon() + " : " + marker.getLonLat().lat() + "</p>" ,
						new Icon("", new Size(0,0), new Pixel(0,0)),
						true);
			map.addPopup(popup);

			}
		});

		// register mouse out event
		marker.getEvents().register("mouseout", marker, new EventHandler() {
			public void onHandle(JSObject source, JSObject[] param) {
				Marker marker = Marker.narrowToMarker(source);
				if (popup != null) {
					map.removePopup(popup);
				}
			}
		});
put map widget on the page
// eventually add the map widget to div:map
		DockPanel dockPanel = new DockPanel();
		dockPanel.add(mapWidget, DockPanel.CENTER);
		dockPanel.setBorderWidth(1);
		RootPanel.get("map").add(dockPanel);
	}
}
Run Tutorial1 application

When you run the Tutorial1 application again, you should see the map and a marker on the center. If you drag the mouse over the marker icon, a popup displaying the coordinates will appear. If you drag the mouse out the marker icon, the popup will disappear.


Attachments:
tutorial2_map_rb.png (image/png)
tutorial1_map.png (image/png)
tutorial1_eclipse_run.png (image/png)
tutorial1_eclipse_import.png (image/png)
tutorial1_hello.png (image/png)
tutorial1_eclipse_run_classpath.png (image/png)
tutorial1_eclipse_build_path.png (image/png)
Tutorial1.java (application/octet-stream)
Tutorial1.java (application/octet-stream)
Tutorial1.java (application/octet-stream)
Tutorial1.html (text/html)
tutorial1_map_popup.png (image/png)
tutorial2_map_rb_painted.png (image/png)
Document generated by Confluence on Jan 16, 2008 23:27