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&v=2.x&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&v=2.x&key=ABQIAAAARrCK38aboqQKDotehUjrPhTb-vLQlFZmc2N8bgWI8YDPp5FEVBQ-MFjXfKfAvdbsbp3pa0q7fQNDDA">
</script>
