Tuesday, August 28, 2012

GWT and lightweight mapping with Leaflet

There is a lot of webmapping toolkits out there.  Some are feature rich, other limited to desktop browser, and very few of them are first class citizens of Google Web Toolkit. Current state of mapping support in Google Web Toolkit is, let us just say, not optimal. Support for Google Maps v2 is marked as as deprecated, and support for Google Maps v3 is still in the works, but not adopted into gwt-google-apis yet. To make things worse, the Google Maps terms of service does not allow you to use third-party base maps without a Google Maps base map also being present. Not good news if you want to implement a transparent mapping solution with offline support.

There are other mapping toolkits for GWT, like gwt-openlayers and gwt-esri, but I wanted something more lightweight and more modern, which also supports mobile devices. One project which stood out of the "mapping-jungle" was Leaflet,

... a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by Vladimir Agafonkin of CloudMade with a team of dedicated contributors. Weighing just about 27 KB of gzipped JS code, it still has all the features most developers ever need for online maps, while providing a smooth, pleasant user experience.

So I went to it, and made gwt-leaflet, a first class citizen mapping toolkit for GWT. It wraps Leaflet using JSNI and Type Overlays, which expose Leaflet API as Java interfaces and classes. It is still early days, and some work remains before all relevant parts of Leaflet API are exposed in GWT. For the technical inclined readers, I have prepared a short summary at github, which goes a bit further in explaining the technical aspects of the project. The nice map below is the example project running as a Google app at appspot.com.