14 February 2008 - 19:19Wicket GMap2
One of the coolest Wicket component is GMap2, which is implementation of Google Maps API, using it is very simple, but some features still remains not so intuitive, and they need to be implemented by ourself. All communication are done via Ajax, which is fine, but what to do if you need to insert map values into existing form? Helpful could be very simple Javascript:
Form form = ...; final HiddenField formGMapLat = (HiddenField) new HiddenField("gLatLng", new PropertyModel(this, "gLatLng")).setOutputMarkupId(true); form.add(formGMapLat); final HiddenField formGMapLng = (HiddenField) new HiddenField("gzoom", new PropertyModel(this, "gzoom")).setOutputMarkupId(true); form.add(formGMapLng); final GMap2 gmap = new GMap2("gmap", GOOGLE_KEY); gmap.setOutputMarkupId(true); gmap.setMapType(GMapType.G_NORMAL_MAP); gmap.addControl(GControl.GSmallMapControl); add(gmap); add(new Link("addPlaceLink") { @Override public void onClick() { } @Override protected void onComponentTag(ComponentTag componentTag) { super.onComponentTag(componentTag); gmap.getJSinvoke("map.getCenter()"); componentTag.addBehavior(new SimpleAttributeModifier("onclick", "document.getElementById('" + gMapLatLng.getMarkupId() + "').value=" + gmap.getJSinvoke("map.getCenter()") + ";document.getElementById('" + zoom.getMarkupId() + "').value=" + gmap.getJSinvoke("map.getZoom()") + "return false;")); } });
It's all you need to implement to store map zoom and coordinates in HiddenForm fields when addPlaceLink is pressed. Map zoom is stored as int, map coordinates are stored in JS format so you need to use GLatLng latLng = GLatLng.parse(gLatLng); to get GLatLng object which contains Lat / Lng Doubles.
No Comments | Tags: Wicket