Donate using PayPal

CycleStreets blog

News from CycleStreets

Archive for July, 2014

Moving to Leaflet.js

Sunday, July 27th, 2014

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.

Cycle Hackney app created by CycleStreets

Sunday, July 6th, 2014

cyclehackneylogo

We’ve created a new app for Hackney Council, the Cycle Hackney app.

Available for both iPhone and Android, the app aims to provide information to the Council on where people cycle for their daily journeys, and where improvements to the street and path network are most needed. This combines crowsourced GPS traces to help create a heatmap of utility cycle journeys.

Download on the App Store    Get it on Google Play

The app is aimed at utility journeys – everyday cycle journeys, rather than being an app for the sport or time-trialling demographic that can be found elsewhere.

Cycle Hackney app - screenshot     Cycle Hackney app - screenshot

After each journey, a short questionnaire appears to obtain some basic demographic information – this only takes a few seconds to complete:

Finished recording

In a press release for the app, we said:

“We’ve been pleased to create the Cycle Hackney app for Hackney Council. Although there are other apps for leisure route sharing, none have focussed on utility cycling data. The app will help identify streets and paths heavily used for everyday cycle journeys, as well as letting people report problems on the network. Local people can therefore use it to help the Council improve cycle infrastructure that will enable more people to cycle. Higher cycling levels are crucial for economic, environmental and health reasons, and Hackney is a leading borough in this.”

The app was launched at the Hackney Cycling Conference 2014. Hackney Council asked attendees of the conference to come up with an unusual or notable route to the conference. Here were the two winning entries:

One person, the winning entry, cycled the boundary of Hackney – an impressive feat!

Hackney boundary

Another person took the opportunity to create some ‘GPS art’ to spell out ‘I Love Hackney Cycling’:

I Love Hackney Cycling

As well as giving a list of routes, enabling users to track their distance and calorie usage, the app allows people to upload reports of problems they encounter in their daily journeys.

Cycle Hackney app - screenshot     Cycle Hackney app - screenshot

We’re pleased that the new app was a finalist for the London Cycling Campaign Awards 2014, in the Digital Campaign of the Year category.

Hackney Council’s transport team would welcome any feedback on the app, for instance, new features that would be useful to add, or other feedback. We’ve enjoyed working with Hackney on this project.

The app uses code from Cycle Atlanta and our own CycleStreets apps. The app has been created by our developers,  Neil Edwards (iPhone) and Jez Higgins (Android).

PS We can create apps for Local Authorities and others that combine our portfolio of cycle mapping solutions – journey planner, photomap for reporting problems, GPS tracking, and information updates. Do get in touch if this may be of interest.

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

My comments relate to: *






Your comments: *
URL of page: * https://www.cyclestreets.net/footer.html
How did you find out about CycleStreets?:
Your name:
Our ref: Please leave blank - anti-spam measure

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