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.
- General browsing map
- Icon layer map
- Itinerary setting
- Itinerary display
- Set single marker
- Map debugging (see image)
- Geometry drawing
- Static GeoJSON display
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.