SmartGWT wrapper for OpenLayers?

[farrukh_najmi]

I was wondering if anyone has done a SmartGWT wrapper for OpenLayers mapping service.

Even better would be something like Mapstraction from GWT-Ext.

Does SmartClient have any plans in this area? Thanks.

[gev]

There is one project gwt-openlayers at http://sourceforge.net/projects/gwt-openlayers. I'm use it inside smartGWT's widgets. This is (still partial) wrap opelayer's javascript API and with my patch openstreet API also.
Use from CVS. Just (from 11.00 to 19.00 by Moscow) you can look example of using gwt-openlayers with openstreetmap at my book here: http://gwt.stkurier.ru/site.Site/Site.html#map

[farrukh_najmi]

I have not used straight GWT components with SmartGWT. Since openlayer-gwt is straight GWT project I am wondering if there are any special tricks I need to be aware of. Thanks for sharing.

[farrukh_najmi]

Here is what I have learned...

There is an error I encounter at the end and would be grateful if gev or someone else could help me understand the cause of that.

Is there someplace I can read how to integrate GWT widgets with SmartGWT. The gwt-integration sample does not provide any details.

I needed to use latest CVS bits because released version does not support GWT 1.5.x. Note I also had to modify the pom.xml file with following patch:

Index: pom.xml
===================================================================
RCS file: /cvsroot/gwt-openlayers/gwt-openlayers/pom.xml,v
retrieving revision 1.5
diff -u -r1.5 pom.xml
--- pom.xml     29 Jan 2009 11:34:46 -0000      1.5
+++ pom.xml     26 Feb 2009 13:38:25 -0000
@@ -9,7 +9,7 @@
   <url>http://maven.apache.org</url>
   <dependencies>
     <dependency>
-      <groupId>gwt</groupId>
+      <groupId>com.google.gwt</groupId>
       <artifactId>gwt-user</artifactId>
       <version>1.4.60</version>
     </dependency>

I tried the following for integrating the latest CVS bits of openlayers_gwt in my maven project.

Added following to my pom:

[code]
<dependency>
<groupId>com.eg.gwt.openLayers</groupId>
<artifactId>openlayers_gwt</artifactId>
<version>0.3.1-SNAPSHOT</version>
</dependency>
[/CODE

Added following to my Application.gwt.xml module decsriptor:

<inherits name='com.eg.gwt.openLayers.OpenLayers'/>

I then coded the following Canvas sub-class that creates a MapWidget as its child per tutorial here:

import com.eg.gwt.openLayers.client.Bounds;
import com.eg.gwt.openLayers.client.Icon;
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.eg.gwt.openLayers.client.util.JObjectArray;
import com.eg.gwt.openLayers.client.util.JSObject;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;

/**
 *
 * @author Farrukh Najmi
 */
public class MapCanvas extends Canvas {

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

    MapCanvas() {
        this.setID(SC.generateID(this.getClass().getName()));

		// Create map options
		MapOptions mapOptions = new MapOptions();
		mapOptions.setControls(new JObjectArray(new JSObject[] {}));
		mapOptions.setNumZoomLevels(16);
		mapOptions.setProjection("EPSG:4326");

		// Create map widget and map objects
		mapWidget = new MapWidget("350px", "350px", mapOptions);
		map = mapWidget.getMap();
		markers = new Markers("marker layer");

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

		// 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 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
		marker.getEvents().register("mouseover", marker, new EventHandler() {
            @Override
            public void onHandle(JSObject source, JSObject eventObject) {
				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() {
            @Override
            public void onHandle(JSObject source, JSObject eventObject) {
				Marker marker = Marker.narrowToMarker(source);
				if (popup != null) {
					map.removePopup(popup);
				}
            }
		});

        this.addChild(mapWidget);
    }
}

I then get the following error when I run the app in GWT shell.

com.google.gwt.core.client.JavaScriptException: (TypeError): $wnd.OpenLayers has no properties
 fileName: jar:file:/home/najmi/.m2/repository/com/eg/gwt/openLayers/openlayers_gwt/0.3.1-SNAPSHOT/openlayers_gwt-0.3.1-SNAPSHOT.jar!/com/eg/gwt/openLayers/client/MapImpl.java
 lineNumber: 20
 stack: ([object HTMLDivElement],[object Object])@jar:file:/home/najmi/.m2/repository/com/eg/gwt/openLayers/openlayers_gwt/0.3.1-SNAPSHOT/openlayers_gwt-0.3.1-SNAPSHOT.jar!/com/eg/gwt/openLayers/client/MapImpl.java:20

	at com.eg.gwt.openLayers.client.MapImpl.create(Native Method)
	at com.eg.gwt.openLayers.client.Map.<init>(Map.java:55)
	at com.eg.gwt.openLayers.client.MapWidget.getMap(MapWidget.java:55)

Thanks for any tips on how to fix above error.

[hgaglani]

Hi,

I added the FileUpload widget from GWT to my smartGWT app.

All I did was added the GWT widget as a member to existing smartGWT vStack.

What I find difficult to understand is that it works fine in Chrome but doesnt show up in Firefox. I faced similar issues previously too with firefox nt displaying some smartgwt functionality and never found a way around it.

Hope this helps.

Cheers!

[gev]

farrukh_najmi, had you added in your aplicationt's gwt module html openlayer/openstreetmap's script?

[farrukh_najmi]

Aah! That must be the problem. Thanks gev.

It appears that gwt-openlayers does not automatically include OpenLayers.js. Could this not be fixed in the pom.xml for gwt-openlayers? I would be glad to help. What list can I post to about that project?

gev, do you know where I can find pom/jar for openlayers for maven projects?

Thanks again for your help.

[gev]

I'm don't use maven and not is specialist in the ant/maven, sorry (only use them for build projects). For gwt-oprnlayers use ant.

[farrukh_najmi]

Adding the following in my Application.html file just before the close of body tag worked:

    <script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>

Now I have one last question which is specific to using OpenLayers with SmartGWT.

The following code from the tutorial needs to be fixed for SmartGWT not using RootPanel:

		map.addControl(new PanZoomBar(RootPanel.get("nav").getElement()));
		map.addControl(new MousePosition(RootPanel.get("position").getElement()));
		map.addControl(new Scale(RootPanel.get("scale").getElement()));

Can you please tell me what to replace it with. At present I am getting NPE. Thanks very much for all your help.

[farrukh_najmi]

The fix to my last problem was to use no arg constructors as follows:

		map.addControl(new PanZoomBar());
		map.addControl(new MousePosition());
		map.addControl(new Scale());

I am all set now but for the questions: What is the correct mailing list /forum for gwt-openlayers project. Thanks again.