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.
- Create an Apache VirtualHost; this is necessary as the site employs mod_rewrite for proper permalink support
- Clone this repo
- Clone the Mapboxgljs.LayerViewer library into /js/lib/ or use an alias as per the Apache configuration
- Clone the routing-ui library into /js/lib/ or use an alias as per the Apache configuration
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.
GPL3.
