Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

CycleStreets mobile website

CycleStreets HTML5 site, featuring our leading cycle routing, Photomap, POIs, data layers for campaigning, and more.

A full 3D interface, including terrain.

Contributions and pull requests are very welcome.


  • Our leading cycle journey planner
    • Plan cycle routes from A-B
    • UK coverage, and beyond
    • Choice of route types
    • Turn-by-turn directions list
    • Full waypoint support
    • Elevation display with slider
    • Recent searches
    • Recent journeys
  • Photomap
    • View cycle infrastructure photos
    • Contribute your images
    • Filter by type, category
  • POIs
    • E.g. bike shops, cycle parking
  • Campaigning data layers
    • Collisions
    • Traffic counts
    • Cycle theft
    • Cycleability ratings
    • Planning applications
    • Cycling groups
  • Full 3D interface
    • 3D
    • Pan/zoom support
    • Two-finger pan/rotate gesture support
    • Terrain
    • One-finger zoom: (double-tap-up/down) support
  • Geolocation and geocoder
  • Simultaneous layer support
  • Blog
  • Feedback
  • Settings and signin
  • Choice of map styles
    • Various vector styles
    • Bitmap styles
    • Historic map styles
  • Share sheet support
  • Night mode


  • Routing by Simon Nuttall
  • Site development by Patrick Johansson
  • Library development by Martin Lucas-Smith
  • UX/UI design and concept by Martin Lucas-Smith & Patrick Johansson
  • UI design and icons by Jamie Watson
  • Uses Mapbox GL JS mapping library


Contributions and pull requests are very welcome.

A supplied example Apache configuration is supplied.

  1. Create an Apache VirtualHost; this is necessary as the site employs mod_rewrite for proper permalink support
  2. Clone this repo
  3. Clone the Mapboxgljs.LayerViewer library into /js/lib/ or use an alias as per the Apache configuration
  4. Clone the routing-ui library into /js/lib/ or use an alias as per the Apache configuration

Code structure

Three components are used: The current repo, a layer management library, and a routing UI library.

The site structure is as follows:

  • (1) The current repo, which is a user interface class, defines the available data layers, and contains UI logic; it uses:
    • (2) The Mapboxgljs.LayerViewer library, which is a general UI library responsible for managing multiple layers on a map.
    • (3) The routing-ui library (for the journey planner layer), which is a routing UI library, managing the mechanics of planning a route.

The index.html file defines various libraries and then runs /js/cyclestreets.js which contains the site logic.

All URL requests, other than assets, are challenged into that index.html file, using rewriting at webserver level.


Copyright CycleStreets Ltd, 2020-21.




New design for mobile UIs (HTML implementation)




No releases published


No packages published