GWT OpenLayers Bindings

The GWT OpenLayers Bindings library provides GWT language bindings for the openlayers.org mapping software

Project Home: http://code.google.com/p/gwtopenlayers/

Displaying a map is as easy as:

MapWidget map = new MapWidget(true);
map.getMap().addLayer(new Google(Google.TYPE.SATELLITE, "World View", false), true);

map.getMap().addControl(new NavToolBar());
map.getMap().addControl(new PanZoomBar());

final MarkerLayer ml = new MarkerLayer("Icons");
map.getMap().addLayer(ml, false);
map.getMap().setCenter(new LonLat(-98, 40), 5, true, true);
map.getMap().addMapListener(new MapIconManager(ml, map));

RootPanel.get().add(map);

Comments

Can you give an example of how to use MapIconManager?

Reply

Markus Reply:

Hi,

is it possible to map the following js code to gwt-openlayers? Im not sure if it is possible and if how it is implemented.

var kmlLayer = new OpenLayers.Layer.Vector(“KML”, {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: ‘http://localhost:8080/RouteToXMLConverter/ConverterServlet’,
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
})

Best regards,

Markus

Reply

How does this project compare with the GWT-OpenLayers project on SourceForge:
https://sourceforge.net/projects/gwt-openlayers/

Reply

I think your map is pretty sexy.

Reply

ar vectorLayer = new OpenLayers.Layer.Vector(“Vector”);

var pointList = [];
pointList.push(new OpenLayers.Geometry.Point(lon+0.0100,lat+0.0100).transform(new OpenLayers.Projection(“EPSG:4326″), new OpenLayers.Projection(“EPSG:900913″)));
pointList.push(new OpenLayers.Geometry.Point(lon+0.0200,lat+0.0200).transform(new OpenLayers.Projection(“EPSG:4326″), new OpenLayers.Projection(“EPSG:900913″)));
pointList.push(new OpenLayers.Geometry.Point(lon+0.0300,lat+0.0300).transform(new OpenLayers.Projection(“EPSG:4326″), new OpenLayers.Projection(“EPSG:900913″)));
pointList.push(new OpenLayers.Geometry.Point(lon+0.0400,lat+0.0400).transform(new OpenLayers.Projection(“EPSG:4326″), new OpenLayers.Projection(“EPSG:900913″)));
pointList.push(new OpenLayers.Geometry.Point(lon+0.0500,lat+0.0500).transform(new OpenLayers.Projection(“EPSG:4326″), new OpenLayers.Projection(“EPSG:900913″)));

var lineFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),
null,{
strokeColor: “#0000DD”,
strokeWidth: 6
});

vectorLayer.addFeatures([lineFeature]);
map.addLayer(vectorLayer);

dont work..

Reply

pfranza Reply:

This project is about GWT bindings, so I can only answer to the usage of openlayers through GWT. Your code is written in straight javascript and would be more suited for posting on the Openlayers forum.

Reply

how can i do javascript sample in gwt?

Reply

how can i do javascript sample in gwt with your project … is not possible to draw in any way?

Reply

How do I get the open layers plug in started.

Steps I took..
1. downloaded jar GWT-OpenLayers-0.2.jar
2. added following to basic GWT app
public void onModuleLoad() {
MapWidget map = new MapWidget(true);
map.getMap().addLayer(new Google(Google.TYPE.SATELLITE,
“World View”, false), true);

map.getMap().addControl(new NavToolBar());
map.getMap().addControl(new PanZoomBar());

final MarkerLayer ml = new MarkerLayer(“Icons”);
map.getMap().addLayer(ml, false);
map.getMap().setCenter(new LonLat(-98, 40), 5, true, true);
map.getMap().addMapListener(new MapIconManager(ml, map));

RootPanel.get().add(map);
}

3. Ran app and got compile error

Information:Compilation completed with 1 error and 0 warnings
Information:1 error
Information:0 warnings
C:\_work\java\projects\atlas\src\java\aims\app\sci\atlas\gwt\client\Atlas.java
Error:Error:line (5)cannot access
com.gorthaur.franza.openlayers.client.MapWidget
bad class file:
C:\_work\java\projects\atlas\lib\GWT-OpenLayers-0.2.jar(com/gorthaur/franza/openlayers/client/MapWidget.class)
class file has wrong version 50.0, should be 49.0
Please remove or make sure it appears in the correct subdirectory of the
classpath.

Reply

dcrossma Reply:

fixed but updating project java version to 1.6

Reply

pfranza Reply:

yes sorry the jars I’ve released are java 6, however I do not think that I used any constructs that would not work under java 5, you would just have to compile the jars yourself from source.

Reply

Is there an api? How do I implement a WMS Layer? what are the parameters s1,s2,s3 new WMS(s1,s2,s3)

Cheers
Dave

Reply

pfranza Reply:

The three arguments are [String name, String url, String options] and they map 1:1 with the openlayers API $wnd.OpenLayers.Layer.WMS(name, url, options);

Reply

Is this project still operational or should I use https://sourceforge.net/projects/gwt-openlayers/ ?

Reply

pfranza Reply:

The project is still active, however its a function of my time/need. There have been a few community contributions. The sourceforge project hasn’t put out a release in 14 months.

Reply

I am searching for an OpenLayers binding for OpenLayers2.8 and GWT2.0.0

Can you point me to the right place? It seems as if this package stopped being enhanced in the GWT1.5 era.

Many thanks.

Reply

pfranza Reply:

I have a newer project that contains working bindings for gwt 2.0 it is basic on the work from https://sourceforge.net/projects/gwt-openlayers/ and aspires to create a map toolkit that will select the best map engine that the use has available and then degrade gracefully from there. I.e. use a flash map like openscales then degrade to openlayers etc..

Reply

I have followed the example for creating a sample map using gwt-openlayers as shown at http://geoserver.org/displayGEOSDOC/Google+Web+Toolkit+%28GWT%29,+OpenLayers+and+GeoServer

however, the map does not seem to render.

Reply

import com.gargoylesoftware.htmlunit.javascript.host.EventHandler;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.RootPanel;
import org.gwtopenmaps.openlayers.client.Bounds;
import org.gwtopenmaps.openlayers.client.Icon;
import org.gwtopenmaps.openlayers.client.LonLat;
import org.gwtopenmaps.openlayers.client.Map;
import org.gwtopenmaps.openlayers.client.MapOptions;
import org.gwtopenmaps.openlayers.client.MapWidget;
import org.gwtopenmaps.openlayers.client.Marker;
import org.gwtopenmaps.openlayers.client.Pixel;
import org.gwtopenmaps.openlayers.client.Size;
import org.gwtopenmaps.openlayers.client.control.LayerSwitcher;
import org.gwtopenmaps.openlayers.client.control.MousePosition;
import org.gwtopenmaps.openlayers.client.control.MouseToolbar;
import org.gwtopenmaps.openlayers.client.control.PanZoomBar;
import org.gwtopenmaps.openlayers.client.control.Scale;
import org.gwtopenmaps.openlayers.client.layer.Layer;
import org.gwtopenmaps.openlayers.client.layer.Markers;
import org.gwtopenmaps.openlayers.client.layer.WMS;
import org.gwtopenmaps.openlayers.client.layer.WMSParams;
import org.gwtopenmaps.openlayers.client.popup.AnchoredBubble;
import org.gwtopenmaps.openlayers.client.popup.Popup;
import org.gwtopenmaps.openlayers.client.util.JObjectArray;
import org.gwtopenmaps.openlayers.client.util.JSObject;

/**
* Main entry point.
*
* @author grass
*/
public class MainEntryPoint implements EntryPoint {
/**
* Creates a new instance of MainEntryPoint
*/

private MapWidget mapWidget;
private Map map;
private WMS wmsLayer;
private Markers markers;
private Popup popup;

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”);

// 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(“Global Imagery”,”http://maps.opengeo.org/geowebcache/service/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());

// 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 mouse over event

DockPanel dockPanel = new DockPanel();
dockPanel.add(mapWidget, DockPanel.CENTER);
dockPanel.setBorderWidth(1);
RootPanel.get(“map”).add(dockPanel);
}
}

Reply

Hi there Peter,
I can’t find a contact address for you anywhere online.

I’d like to talk to you about potentially funding further development of your GWT wrapper for OpenLayers. Would you mind contacting me to discuss your plans for the project?

cheers,
Ian

Reply

Hello Peter,

First, thank you for developing this wrapper!

I would like to draw a network over an OSM map with GWT. I would like use an Overlayer with some drawing (geometry) I’m trying something hire but the drawing part does not work. The Marker works just fine. Would you please point me to some example code for drawing.

Thank you

ref:

public void onModuleLoad() {

MapOptions defaultMapOptions = new MapOptions();
MapWidget mapWidget = new MapWidget(“800px”, “600px”, defaultMapOptions);

OSM osm_1 = OSM.Osmarender(“Osmarender”); // Label for menu ‘LayerSwitcher’
osm_1.setIsBaseLayer(true);

OSM osm_2 = OSM.Mapnik(“Mapnik”); // Label for menu ‘LayerSwitcher’
osm_2.setIsBaseLayer(true);

OSM osm_3 = OSM.CycleMap(“CycleMap”);
osm_3.setIsBaseLayer(true);

Map map = mapWidget.getMap();
map.addLayer(osm_1);
map.addLayer(osm_2);
map.addLayer(osm_3);
map.addControl(new LayerSwitcher());
map.addControl(new MousePosition());

// map.setCenter(new LonLat(7.741928,48.582513), 12); // Warning: In the case of OSM-Layers the method ‘setCenter()’ uses Gauss-Krueger coordinates,
// thus we have to transform normal latitude/longitude values into this projection first:
LonLat lonLat = new LonLat(7.74,48.58); // (6.95, 50.94) –> (773670.4, 6610687.2)
lonLat.transform(“EPSG:4326″, “EPSG:900913″); //
map.setCenter(lonLat, 12); // see http://docs.openlayers.org/library/spherical_mercator.html
Point point= new Point(7.74,48.58);
LineString lineStr = new LineString(new Point[]{new Point(7.74,48.58),new Point(7.74,47.50)});
final Markers ml = new Markers(“Icons”);
Marker marker = new Marker(lonLat);
marker.setImageUrl(“http://google-maps-icons.googlecode.com/files/powerplant.png”);
ml.addMarker(marker);

final Vector vectLayout = new Vector(“drawlayer”);
vectLayout.setIsVisible(true);
vectLayout.setDisplayInLayerSwitcher(true);
VectorFeature vf0 = new VectorFeature(point);
VectorFeature vf2 = new VectorFeature(lineStr);
vectLayout.addFeature(vf0);
vectLayout.addFeature(vf2);
map.addLayer(ml);
map.addLayer(vectLayout);

RootPanel.get().add(mapWidget);

}

Reply

Hi again,
ref: draw on the map from your code using gwt-openlayers 5.0.

I found the problem. If you are using trasformations, don’t forgot to use it when you add Points.
1.
LonLat strasbourgLonLat = new LonLat(7.74,48.58);
strasbourgLonLat.transform(“EPSG:4326″,”EPSG:900913 map.setCenter(strasbourgLonLat, 12);

Then you do:

LonLat ln = new LonLat(7.74,48.5);
ln.transform(“EPSG:4326″, “EPSG:900913″);

Point[] linePoints = { new Point(ln.lon(), ln.lat()), new Point(ln.lon()+100.0, ln.lat())};
LineString line = new LineString(linePoints);

Reply

Hi,

is it possible to map the following js code to gwt-openlayers? Im not sure if it is possible and if how it is implemented.

var kmlLayer = new OpenLayers.Layer.Vector(“KML”, {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: ‘http://localhost:8080/RouteToXMLConverter/ConverterServlet’,
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
})

Best regards,

Markus

Reply

hi,

how do you create external controls for the maps (e.g. have toggle buttons for zoom in, zoom out and drag pan)?

thanks,
Jan

Reply

Wouldn’t it be more eficfient to keep a reference to a single Image instead of creating one for each cell?I’m asking because I’m a little puzzled that the api returns a ImageResource instead of an Image – as you would probably always need to convert it in to a Image anyway.

Reply

Leave a comment

(required)

(required)