Moving to Leaflet.js

This is a tech post mainly for our OpenStreetMap and techie users!

During recent months we’ve quietly been working on a major change behind the scenes in preparation for some large-changes to our web interface (which has long been in need of upgrading) and to prepare for a more mobile-friendly experience:

We’ve moved the large amount of our mapping code from OpenLayers 2 to Leaflet. This is the part of the site you see whenever you come across a map that you can drag around – the ‘slippy maps’. Last Monday, our commit “Removed OpenLayers” landed.

This has been quite a major undertaking, and a rather painful one at that. It has meant not only rewriting every bit of map javascript code, but also creating a new, second-generation API (data feed) using GeoJSON, as that is the native format that makes working with Leaflet so easy. In creating the V2 API, we’ve also had to keep every part of the old V1 API running perfectly so as not to break third-party mobile apps and sites that rely on it.

We had to rewrite Javascript modules for the every one of the types of slippy map used around on the site:

• General browsing map
• Icon layer map
• Itinerary setting
• Itinerary display
• X-marks-the-spot
• Set single marker
• Map debugging (see image)
• Geometry drawing
• Static GeoJSON display

The V2 API (the technical interface to the underlying data that gets shown on the maps) emits data in the easily-parsable GeoJSON format. The V2 API, to be made public soon, is something we’ve wanted to do anyway for a while now. As we’ve moved to GeoJSON, we’ve found that throwing objects of all kinds onto a map is far easier compared to generating GML using XML DOM structures and writing Javascript to handle that.

When we launched CycleStreets back in 2009, GML was in vogue, and OpenLayers was the only real choice available. In fact, in 2009, many of the wonderful tools like Leaflet, jQuery, and autocomplete were either not available or were in their infancy. Now these tools are available, we no longer have to deal with the pain of generating XML DOM (for GML) structures and that is a very welcome relief.

It’s fair to say that we’ve always struggled with OpenLayers 2. OpenLayers is a very powerful map framework, basically letting you do almost anything on top of a map canvas, and with a very ‘correct’ object-orientated style. But with things like a standard web projection and GeoJSON standardisation now the norm for web mapping, the swiss-army-knife approach has not been ideal for us.

The force-point came for us when we ran into an intractable problem where a clickable layer of shop icons, used on a journey planner we run for a third party, had the odd behaviour that one of the two start/finish itinerary waypoint markers could not be moved if an icon had been clicked. We spent two days trying to debug this, even going as far as picking through the OpenLayers source code. Long ago we had learnt which of the five popup types to use, but we simply could not work out the mechanism for changing focus between layers. So we changed tack, generating GeoJSON for the icon layer and got a prototype working in Leaflet pretty quickly, and it ‘just worked’. From that point our V2 API project really got going.

It’s great to see that a new version of OpenLayers, OpenLayers 3, is in the works, which will undoubtedly take that very respected project forward. But for us, for now, Leaflet is where we plan to put our development focus.

PS The V2 API is going live shortly. All of our site is running from it and documentation is in place – we’ve just resolving the remaining few format issues now.

The redesign upgrade project, of which the above work is part, has been possible thanks to part-funding from the Cambridge City Council Cycling & Walking Grants scheme, helping get more people cycling in Cambridge. We are most grateful to them for their support.