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.
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.
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.
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.
3 thoughts to “CycleStreets mobile web site launches”
Is there a week that goes by without CycleStreets releasing something pretty damn great?
It would be handy to have a shorter url for this, eg:
I got round to trying this today – sitting at home on wifi. I do like the way it uses cross-hairs to select the start and end points – much more accurate than using my finger. Also I like the way it allows you to change your mind about the start and end point (which you can't do in the Android app). If you converted the Android app to use this UI I'd probably use it more.
However I found that the map didn't always redraw itself when I tried to pan and zoom, despite my being on wifi. I'm not sure why.
One small comment about the UI – can you move the zoom in and zoom out buttons slightly bigger or further apart? I found it required a bit more concentration to tap the correct one than I'm used to on my device.
Finally, can you use the OS 1:50000 mapping instead of the OS mapping you use currently, which is useless as it doesn't show paths, bridleways etc.