Donate using PayPal

CycleStreets blog

News from CycleStreets

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:

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.

Our debugging view, now running from a GeoJSON data endpoint in our V2 API

Our debugging view, now running from a GeoJSON data endpoint in our V2 API.

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.

3 Responses to “Moving to Leaflet.js”

  1. Tom Chance Says:

    It would be really interesting and useful if you could expose the debugging view in a public web map. That way I could, at a glance, get a feel for whether there might be data issues on roads across a wide area of London that I know well.

    Would that be possible?

  2. robin Says:

    These a very important changes the have already improved map looks And usability. Thanks so much for this. Only question? Will this affect the api at all? More local authorities need to be award of your services esp. In realm of planning new infrastructure.

  3. Martin, CycleStreets Says:

    Hi Robin,

    The version 1 API remains as it is (with an extensive test suite in place to test output formats). The version 2 API is new, and the website is all running off that. We’ll have a blog post soon, once the V2 API is live.

    There is continued interest from Local Authorities in our work, and we hope the planned upgrades being worked on will increase this further.

We welcome your feedback, especially to report bugs or give us route feedback.

My comments relate to: *






Your comments: *
URL of page: * http://www.cyclestreets.net/footer.html
How did you find out about CycleStreets?:
Your name:
Our ref:

* Items marked with an asterisk [*] are required fields and must be fully completed.