Abhijeet Maharana

Sometime back, I uploaded few pics to Picasa. While creating an album, it asked for an optional “Location” information. I did provide it and when I went to view the album, it displayed the location on a map. I liked it. Few days later, Gwt-Ext 2.0.3 got released with some cool features. One of them is a map API built on top of Mapstraction. Mapstraction lets you use maps from different providers such as Yahoo, Google, Microsoft and lets you switch between them easily. I had not worked with maps before and thought this would be a good opportunity to try it. I wanted to create something like the one I had seen on Picasa.

I have written a small Gwt-Ext application which marks user supplied addresses on a Google Map. Click thumbnail above for a larger image of the output. It took quite some time to figure out how to geocode an address to obtain the latitude and longitude information. But at the end, it works! I have used Google Maps specific code. However, Gwt-Ext provides powerful abstraction, thanks to Mapstraction, and you may want to use that instead.

Code is given below with brief explanation. The entry point looks like this:

1
2
3
4
5
6

public void onModuleLoad() {
	createMapPanel();
	addMapControls();
	new Viewport(mapPanel);
	updateMap("mumbai", JavaScriptObjectHelper.createObject(), this);
}

In createMapPanel(), I create the panel which will hold the map:

1
2
3
4
5
6
7
8

private void createMapPanel()
{
	mapPanel = new GoogleMap();
	mapPanel.setTitle("Google Maps using Gwt-Ext [http://abhijeetmaharana.com]");
	mapPanel.setHeight(400);
	mapPanel.setWidth(400);
	mapPanel.addLargeControls();
}

mapPanel.addLargeControls() adds controls to the map which let you zoom, pan and select image type (map / satellite / hybrid).

Then, I add a textfield and a button in the top toolbar of the panel to accept user input:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

private void addMapControls()
{
	final MainModule thisModule = this;
 
	addressField = new TextField();
	addressField.setValue("mumbai");
	refreshMapButton = new ToolbarButton("Refresh map", new ButtonListenerAdapter() {
		public void onClick(Button button, EventObject e) {
			String address = addressField.getText();
			if (!address.trim().equals(""))
				updateMap(address, JavaScriptObjectHelper.createObject(), thisModule);
		}
	});
 
	Toolbar toolbar = new Toolbar();
	toolbar.addText("Enter an address: ");
	toolbar.addField(addressField);
	toolbar.addSpacer();
	toolbar.addButton(refreshMapButton);
 
	mapPanel.setTopToolbar(toolbar);
}

On line 11, updateMap() is called when user clicks “Refresh map” after supplying an address. This is a native method which uses has Javascript code to obtain the latitude and longitude of the provided address. If it can obtain valid results, it calls renderMap() to display the location. I had to resort to JSNI to geocode the address. There might be a cleaner way which would avoid any native code. I have posted a question in the Gwt-Ext forum. Lets see what comes up.

Below is the code for updateMap() and renderMap():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

public native void updateMap(String locationAddress, JavaScriptObject llp, MainModule thisModule) /*-{
	var geo = new $wnd.GClientGeocoder();
 
	geo.getLocations(locationAddress, 
		function(response) 		// callback method to be executed when result arrives from server
		{
			if (!response || response.Status.code != 200) 
			{
   				alert("Unable to geocode that address");
			} 
			else 
	      		{
		    		var place = response.Placemark[0];
		    		llp.lat = place.Point.coordinates[1];
		    		llp.lon = place.Point.coordinates[0];
 
		    		thisModule.@com.maharana.gwtextmaps.client.MainModule::renderMap(Lcom/google/gwt/core/client/JavaScriptObject;)(llp);
	      		}
      		}
      	);
}-*/;
 
 
public void renderMap(JavaScriptObject jsObj)
{
	double lat = Double.parseDouble(JavaScriptObjectHelper.getAttribute(jsObj, "lat"));
	double lon = Double.parseDouble(JavaScriptObjectHelper.getAttribute(jsObj, "lon"));
 
	LatLonPoint latLonPoint = new LatLonPoint(lat, lon);
	mapPanel.setCenterAndZoom(latLonPoint, 12);
	mapPanel.addMarker(new Marker(latLonPoint));
}

You will need to include code below in the host HTML file to use GClientGeocoder and other Google Maps / Mapstraction related Javascript objects:

<script type="text/javascript" src="js/map/mapstraction.js"></script>
 
<!-- Replace **PLACEHOLDER** in this line with your API key -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=**PLACEHOLDER**"></script>

You can obtain a Google Maps API key from http://code.google.com/apis/maps/signup.html.
Do let me know what you think. Specially about geocoding addresses without making a JSNI call.

Download Eclipse project from Gwt-Ext.com or Rapidshare.

UPDATE (8 Apr):
Sanjiv has clarified in the forum that geocoding support is not available yet. So we will have to stick with JSNI code for the time being. Also, since the url in host mode is localhost:8888, you can use this key for Google Maps:

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAARrCK38aboqQKDotehUjrPhTb-vLQlFZmc2N8bgWI8YDPp5FEVBQ-MFjXfKfAvdbsbp3pa0q7fQNDDA">
</script>

The Gwt-Ext forum is very active and I try to participate when I can. In the process, I have bookmarked a few threads with solutions that I could use later. I am posting some of them below so that more people can stumble upon them. Within brackets is the forum id of the community member who suggested the solution.

1. Expand / collapse a panel on button click in another panel (daverh and sjivan)
   
   

   1 2 3 4 5 6 7 8 9 10

   panelB.setCollapsible(true); ... panelA.getSaveButton().addListener(new ButtonListenerAdapter(){ public void onClick(Button button, EventObject e) { panelB.setCollapsed(false); panelA.setTitle("Saved"); panelB.doLayout(); panelA.doLayout(); } });

2. Attach a clicklistener to a panel (me)
   
   

   1 2 3 4 5 6 7 8 9

   panel.addListener(new ContainerListenerAdapter(){ public void onRender(Component component) { panel.getEl().addListener("click", new EventCallback(){ public void execute(EventObject e) { MessageBox.alert("Panel clicked"); } }); } });

3. Force a combo box to always go back to the server for the list items (sjivan)
   
   

   1 2 3 4 5

   cb.addListener(new ComboBoxListenerAdapter() { public void onExpand(ComboBox comboBox) { store.reload(); } });

4. BorderLayout throws an exception when nothing is added to its center region (sjivan)

   When using BorderLayout, you *must* have a Panel assigned to the CENTER region.

5. Update a text field’s contents (e.g. force all lowercase) when user leaves text field (takeustoyourleader)
   
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   final TextField lcaseTextField = new TextField(); lcaseTextField.addListener(new TextFieldListenerAdapter(){ public void onBlur(Field field) { updateValue(); }   public void onSpecialKey(Field field, EventObject e){ updateValue(); }   private void updateValue(){ lcaseTextField.setRawValue(lcaseTextField.getValueAsString().toLowerCase()); } });

   The “onBlur” catches the user leaving the field by clicking off, the onSpecialKey catches them leaving by enter or tab or anything like that.

6. Wait for an IFrame to load and then execute some code (grabka)
   
   

   1 2 3 4 5

   EventManager.addListener(frame.getElement(), "load", new EventCallback() { public void execute(EventObject e) { /* do some stuff */ } }, new ListenerConfig());

I may post some more links as and when I bookmark them.