This page is devided in 2 sections. First is a brief guide for working with GWT-OpenLayers in your GWT application.
Second is a step by step guide using Eclipse.
<inherits name='org.gwtopenmaps.openlayers.OpenLayers'/>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
In this guide we will give a step by step overview of how to create your fist project using GWT-Openlayers. This guide will use Eclipse as an IDE, but you can use any IDE you want for developing GWT-Openlayers. Also this guide will manually download binary jars and include them in your project, it is however also possible to use maven for auto dependency (see the Brief Guide above).
If you haven't done so allready start by installing the GWT plugin for Eclipse. Go to the GWT website for detailed instructions on how to do this
Start Eclipse. Go to the File menu, select New and finally select Other... In the popup type web and select Web Application Project (under Google)
Clicking the Next button will show the following popup.
Just choose a project name and a package name. Also uncheck Use Google App Engine as we are not going to host our project on Google App Engine (this however is possible).
Finally click the Finish button to let the GWT plugin create an example GWT project.
<inherits name='org.gwtopenmaps.openlayers.OpenLayers'/>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script> <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
Download the the jar at GWT-Openlayers 1.0 Snapshot client binary jar.
Place the jar war/WEB-INF/lib.
Now everything is setup to use OpenLayers in combination with OpenStreetMap it is time to create some code. The project we are going to build will display an OpenStreetMap as a base layer. The user has the option to display normal OpenStreetMap, or the cycle OpenStreetMap layer. On this map we will display a marker. The marker we draw will actually be a Point drawn in an overlay Vector layer. We will style the Point to look as a nice marker.
The first thing we are going to do is just display a simple OpenStreetMap layer in our project.\
(Don't forget the needed imports : import org.gwtopenmaps.openlayers.client.MapOptions; and import org.gwtopenmaps.openlayers.client.MapWidget;)
MapOptions defaultMapOptions = new MapOptions(); MapWidget mapWidget = new MapWidget("500px", "500px", defaultMapOptions);
Below is the code for creating these layers.
First to lines initialize the layers.
Following to lines are used to specify that these layers are base layers.
Last 2 lines add the layers to our map.
(Don't forget the import import org.gwtopenmaps.openlayers.client.layer.OSM;)
OSM osmMapnik = OSM.Mapnik("Mapnik"); OSM osmCycle = OSM.CycleMap("CycleMap"); osmMapnik.setIsBaseLayer(true); osmCycle.setIsBaseLayer(true); mapWidget.getMap().addLayer(osmMapnik); mapWidget.getMap().addLayer(osmCycle);
The code so far can be seen in the screenshot below
LonLat lonLat = new LonLat(6.95, 50.94); lonLat.transform("EPSG:4326", mapWidget.getMap().getProjection()); //transform lonlat (provided in EPSG:4326) to OSM coordinate system (the map projection) mapWidget.getMap().setCenter(lonLat, 12);
Now our project actaully contains enough code to run. Only thing we need to add is adding the mapWidget to the RootLayoutPanel.
Don't forget the import : import com.google.gwt.user.client.ui.RootLayoutPanel;
RootLayoutPanel.get().add(mapWidget);
So this is the code up until now.
In Eclipse go the the Run menu, and select Run As, Web Application Project
Now the project will run, and Eclipse will display a Development Mode tab displaying an URL. Just double click this URL.
Now your browser will open and display our project (if your browser asks to install the GWT plugin, confirm and install).
So now you see a nice OpenStreetMap map, which you can pan and zoom. But we currently we can only see one layer, although we added 2 layers.
To be able to switch between our 2 layers we will need to add a LayerSwitcher to our code. Just add the following line (also add import org.gwtopenmaps.openlayers.client.control.LayerSwitcher;)
mapWidget.getMap().addControl(new LayerSwitcher());
Now just refresh your browser and you will see a blue + in the upperright corner of the map. Click it to open the layer switcher and switch layers.
Next step we will do is adding a marker on the map, we will place the marker at the same location we centered the map on.
To achieve this we will actually add a Vector layer on top of the base layers. And add a Point to this Vector layer. Finally we will style this Point to look as an actual marker (needed imports are : import org.gwtopenmaps.openlayers.client.layer.Vector;, import org.gwtopenmaps.openlayers.client.geometry.Point;, import org.gwtopenmaps.openlayers.client.Style; and import org.gwtopenmaps.openlayers.client.feature.VectorFeature;
final Vector vectorLayer = new Vector("Vectorlayer"); Point point = new Point(lonLat.lon(), lonLat.lat()); Style pointStyle = new Style(); pointStyle.setExternalGraphic("http://demo.gwt-openlayers.org/gwt_ol_showcase/kangaroomarker.png"); pointStyle.setGraphicSize(32, 37); pointStyle.setGraphicOffset(-16, -37); //anchor on bottom center pointStyle.setFillOpacity(1.0); VectorFeature pointFeature = new VectorFeature(point, pointStyle); vectorLayer.addFeature(pointFeature); mapWidget.getMap().addLayer(vectorLayer);
Now just refresh your browser and the marker will be displayed. In the LayerSwitcher you will see a overlay layer was added an can be switched off/on using the LayerSwitcher.
You can add as many items as you want to each Vector layer, and you can add as many layers as you want.
For reference here is a complete overview of the created code.
package be.frank.gwtol.client; import org.gwtopenmaps.openlayers.client.LonLat; import org.gwtopenmaps.openlayers.client.MapOptions; import org.gwtopenmaps.openlayers.client.MapWidget; import org.gwtopenmaps.openlayers.client.control.LayerSwitcher; import org.gwtopenmaps.openlayers.client.feature.VectorFeature; import org.gwtopenmaps.openlayers.client.geometry.Point; import org.gwtopenmaps.openlayers.client.layer.OSM; import org.gwtopenmaps.openlayers.client.layer.Vector; import org.gwtopenmaps.openlayers.client.Style; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.ui.RootLayoutPanel; /** * Entry point classes define <code>onModuleLoad()</code>. */ public class Gwtoltest implements EntryPoint { /** * This is the entry point method. */ @Override public void onModuleLoad() { MapOptions defaultMapOptions = new MapOptions(); MapWidget mapWidget = new MapWidget("500px", "500px", defaultMapOptions); OSM osmMapnik = OSM.Mapnik("Mapnik"); OSM osmCycle = OSM.CycleMap("CycleMap"); osmMapnik.setIsBaseLayer(true); osmCycle.setIsBaseLayer(true); mapWidget.getMap().addLayer(osmMapnik); mapWidget.getMap().addLayer(osmCycle); LonLat lonLat = new LonLat(6.95, 50.94); lonLat.transform("EPSG:4326", mapWidget.getMap().getProjection()); //transform lonlat (provided in EPSG:4326) to OSM coordinate system (the map projection) mapWidget.getMap().setCenter(lonLat, 12); final Vector vectorLayer = new Vector("Vectorlayer"); Point point = new Point(lonLat.lon(), lonLat.lat()); Style pointStyle = new Style(); pointStyle.setExternalGraphic("http://demo.gwt-openlayers.org/gwt_ol_showcase/kangaroomarker.png"); pointStyle.setGraphicSize(32, 37); pointStyle.setGraphicOffset(-16, -37); //anchor on bottom center pointStyle.setFillOpacity(1.0); VectorFeature pointFeature = new VectorFeature(point, pointStyle); vectorLayer.addFeature(pointFeature); mapWidget.getMap().addLayer(vectorLayer); mapWidget.getMap().addControl(new LayerSwitcher()); RootLayoutPanel.get().add(mapWidget); } }
Note that this example just is shows a very small portion of what is possible using GWT-OpenLayers.
You can also display Google, Bing, your own WMS, your own WFS, ... layers. Besides this Gwt-OpenLayers can also be used to edit Geographical data and save changes back to the backend. In short : You can use GWT-Openlayers to create any GIS project you want.
The next thing you can do is have a look at our own Showcase. This displayes a lot of possibilities of GWT-OpenLayers together with the needed sourcecode. You can find the showcase at http://demo.gwt-openlayers.org
Another source of interest is our own javadoc http://www.gwt-openlayers.org/apidocs/index.html
Finally you can also look at the showcase of the normal OpenLayers (http://openlayers.org/dev/examples/). In most cases it isn't too hard to map those examples to GWT-Openlayers.
Also the official OpenLayers api can help you out in some cases (http://dev.openlayers.org/apidocs/files/OpenLayers-js.html).
If you get stuck and need help there are a number of ways to get into contact with us, or other people willing to help.
In order of our preference: