CycleStreets mobile web site launches

Today, we’re very pleased to announce the beta mobile web version of CycleStreets – written by me, project-managed by Martin, and funded by Cycling Scotland.

http://m.cyclestreets.net/

Built in jQuery Mobile and HTML5, this extends CycleStreets’ mobile support beyond our well-received Android and iPhone apps to cover other platforms, including iPad and BlackBerry.

Just like the other apps, you can plan cycling routes while out and about, upload photographs you take along the way, and find photos others have uploaded nearby.

Features

The mobile HTML version has an experimental change from the native apps and desktop CycleStreets. Instead of tapping the map to add a draggable marker, we use fixed crosshairs in the middle of the screen. We hope this makes route planning a little easier, by reducing the possibility of accidental clicks.

Once you have a route planned, it’s easy to compare the different journey types that CycleStreets offers – fastest, quietest, or balanced – and see individual turns.

In a somewhat alpha feature (as HTML5 doesn’t yet offer brilliant phonecam integration), you can also upload photos you’ve previously taken of cycling problems nearby. And you can see photos that others have added to CycleStreets.

We automatically save your routes for future reference, and your preferences for cycling speed, route type, and preferred map type – OpenStreetMap, OpenCycleMap, or Ordnance Survey.

Technical notes

For me as a coder, this was pretty much a dream project: a meaningful application, a cutting-edge platform, and a supportive project lead, in the form of Martin, to manage it all.

My goal for the mobile HTML app was to create something easy to use and as accessible as possible – while being realistic about the fact that CycleStreets routing, with its maps and polylines, is inevitably going to work best on a smartphone as a native app.

To that end, technical readers may be interested in the following notes:

• jQuery Mobile: As we were using jQuery anyway, I chose jQuery Mobile for its lovely look and feel, its clever Ajax page transitions, and its sensible graded browser support – plus a general good feeling about the project. Now in beta, it’s perhaps a little slow (they’re working on it), but definitely a project to watch.
• HTML5: We use geolocation (ahem) plus localStorage to save user details – though the app should still function if neither are available. There’s clearly also scope for offline route storage, which we hope to add in v1.1.
• Responsive design: This would obviously have been nice (for an example, visit FixMyTransport in a desktop browser, and then resize it so it’s really small). However, it would also have required changes to the CycleStreets desktop CSS beyond the scope of this project – though I believe it’s still in the longer-term CycleStreets world domination plan.
• Browser testing: Technically, the most challenging part of the project was not coding, but finding the emulators and real devices to test on. We’ve tested in Android, mobile Safari, iPad, and BlackBerry (led by the UK browser stats), plus Opera Mobile and Fennec on Android, but we want to hear more from Nokia and WinPhone7 users.

Help us improve!

This is still very much a beta. However, mobile HTML is a long-term play for CycleStreets, so we expect to add lots of improvements in the coming months and years.

You can help us by trying out the app on your mobile device, and reporting feedback on GitHub issues list. If you’re a coder, free to fork the repo (GPLv2) and make improvements.

Happy cycling, and let us know your thoughts on the app.

Thanks to Cycling Scotland!

We’d like to thank Cycling Scotland for a grant to enable this project to come to fruition.