Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

Features

  • 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

Credits

  • 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

Installation

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

Copyright CycleStreets Ltd, 2020-21.

License

GPL3.

About

New design for mobile UIs (HTML implementation)

Topics

Resources

Releases

No releases published

Packages

No packages published