osoc17/rideaway-frontend

Routeplanner designed to use the Brussels cycling network 🏙 🚴

Rideaway Frontend

Installation

Prerequisites

Create a .env file in the root directory, you can use the .env.default to help you create it.

Edit the webpack config and fill in the domain name.

new OfflinePlugin({
    publicPath: 'https://DOMAIN_NAME_HERE',

Install dependencies

$ npm install

Install and run the dev version, server available at localhost:3000:

$ npm run dev

Compile a production version in the ./build folder:

$ npm run prod

Extra information

The deploy.sh script is used by travisci (see .travis.yml) to automatically push changes to the gh-pages branch of the repository. What it does is detect changes to master and push a production version of the webapp to the gh-pages branch and add a CNAME record. Check out the script for more documentation.

Project information

This project is an excellent demonstration of the power of OSM to support an advanced mobile app that assists in the navigation of cyclists through the Brussel’s regional cycling network.

• Give the cycle network more visibility
• Get the cycle routes more incorporated in the daily life

Why

Why are people not using the Brussels Cycle Network? Because they don’t know it exists.

We want to make the Brussels Cycling Network more practical and accessible.

What

We are creating a tool to explore, plan and navigate the Brussels Cycling Network.

rideaway-frontend's Issues

Dependency deprecation warning: babel-preset-es2015 (npm)

On registry https://registry.npmjs.org/, the "latest" version (v6.24.1) of dependency babel-preset-es2015 has the following deprecation notice:

🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Affected package file(s): package.json

If you don't care about this, you can close this issue and not be warned about babel-preset-es2015's deprecation again. If you would like to completely disable all future deprecation warnings then add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]

Lock top controls when calculating a route

Because the loading screen is on the map (feels more intuitive), we should lock the geocoder inputs because else we get weird behaviour, aka 2 routes being calculated at the same time.

Display route instruction

Display the result of routing calculation :

• Turn by turn
• Color of the route to follow

Orientation of the map could "follow" the direction of the user

It could be nice that the map orientation follows the direction of the user ; that's usually easier to see where you are on a map.

Use color property returned by the API instead of red for the route following the network

See oSoc17/rideaway-backend#11

Different screen for going back to the map from the navigation

Now it just shows the calculated route screen, maybe we should have a different screen that is more GPS-like so the user can switch between the two navigation options.

Map is partially hidden under geocoders (and navigation box)

Because we're setting a max bounds on the map, the map is hidden behind other components partially. This is a problem because our max bounds are shared with the geocoder's bounding box.

So a user can actually choose an origin or destination with the geocoder that will not be seen on the map.

Does the map follow the user when he is moving ?

Just to be sure we do not forget it if it's not already the case...

Better mobile menu

The menu on mobile sometimes hides routes A-B-C because of the max height, people will not scroll down to get to the routes. (I added a crappy arrow now but it's not good).

Dependency deprecation warning: turf (npm)

On registry https://registry.npmjs.org/, the "latest" version (v3.0.14) of dependency turf has the following deprecation notice:

This package has moved: use @turf/turf instead

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Affected package file(s): package.json

If you don't care about this, you can close this issue and not be warned about turf's deprecation again. If you would like to completely disable all future deprecation warnings then add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]

Center to location button doesn't work yet

Selecting cycleroutes doesn't work when routing.

Selecting cycleroutes doesn't work when a route is on the map. Expected would be to either remove the current route, show the cycleroute anyway or hide the route selection options.

Zoom after fetching a route

Zoom out/in so you can clearly see the route

Show an error message when no route is found

Currently we're just getting a console error, but we need some kind of fallback in case no route is found.

Use routes from OSM, not GFR for Brussels Mobility

The application currently uses the GFR file from Brussels Mobility ;
Need to switch to the routes from OpenStreetMap (with ref and colour)

The current location is shown but there is no way to route from/to there.

The current location is shown but there is no way to route from/to there. Expected is that the current location is either selected by default or that it can be selected somehow.

Impossible to change the route once it's calculated

Once a route si calculated, it's impossible to change the origin or the destination to calculate a new route.
Need to be fixed !

Error: There is already a source with this ID

Limit geocoding to Brussels

If possible, could be nice to limit the geocoding result to Brussels.
It doesn't make any sense to go from Antwerpen to Arlon using this app.

Overlapping routes not showing any color

When routes overlap, the color property returned in the GeoJSON is apparently a string with comma's. (etc colour: 'red, green, blue', instead of colour: 'red')

Mapbox can't interpret this.

I use this to color the lines:

paint: { 'line-color': type: 'identity', property: 'colour' } }

One solution would be to manually go through the GeoJSON and change the color but that would be really bad for performance.

For example green and orange overlap here, sometimes the routes overlap for a longer distance and then the color is just black 😭

Display length/duration

Display duration and length for the 2 routes calculated (following the network and shortest).

Improve filter functionality

Should be possible to expand the filter functionality.
Instead of only filtering one route you should be able to select multiple.
This is feasable to do:
https://www.mapbox.com/mapbox-gl-js/style-spec/#types-filter

Wait for location before allowing it to be set as an origin/destination

The geolocating service doesn't happen immediately so there should be some kind of loading thing/hiding my location if not available.

Improve styling

• Add hamburger menu on mobile
• Fix route sorting
• Style the geocoder controls

Display information about route

It could be nice to have more information by clicking on a route.

Localize 'my location option'

Need to translate 'My location'. This is kinda hard because of the whole geocoder thing.

Select my location as default origin when a destination is selected

This seems like a small enhancement but really it's a pretty annoying thing to do, because right now we can freely set markers as origin/destination by clicking on the map, but this changes that. Tbh there are more important fixes to do right now...