project-osrm / osrm-frontend

Modular rewrite of the OSRM frontend using LRM

osrm-frontend

This is the frontend served at https://map.project-osrm.org. This frontend builds heavily on top of Leaflet Routing Machine. If you need a simple OSRM integration in your webpage, you should start from there.

Using Docker

The easiest and quickest way to setup your own routing engine backend is to use Docker images we provide. We base our Docker images on Alpine Linux and make sure they are as lightweight as possible.

Serves the frontend at http://localhost:9966 running queries against the routing engine backend:

docker run -p 9966:9966 osrm/osrm-frontend

Per default routing requests are made against the backend at http://localhost:5000. You can change the backend by using -e OSRM_BACKEND='http://localhost:5001' in the docker run command.

In case Docker complains about not being able to connect to the Docker daemon make sure you are in the docker group.

sudo usermod -aG docker $USER

To build the docker image locally:

docker build . -f docker/Dockerfile -t osrm-frontend
docker run -p 9966:9966 osrm-frontend

Development

Install dependencies via

npm install

Then compile assets and start the local server with

npm start

On Windows with no Unix tools installed (bash, sed, cp) the server could be started with two other commands executed by npm start internally:

npm run compile
npm run start-index

Changing Backends

In src/leaflet_options.js adjust:

services: [{
  label: 'Car (fastest)',
  path: 'http://localhost:5000/route/v1'
}],

For debug tiles showing speeds and small components available at /debug adjust in debug/index.html

"osrm": {
  "type": "vector",
  "tiles" : ["http://localhost:5000/tile/v1/car/tile({x},{y},{z}).mvt"]
}

osrm-frontend's Issues

[printing] disable zoom and pan of map

Map should be fixed to the overview of the route

Print pages with multiple vias shows only "B" way points

The current code has "A" ... "Via" ... "Via" ... "B". In the print version, one has "A" ... "B" ... "B" ... "B".
Expected: Same output.

Actually, I do not like the "A" ... "Via" ... "B" very much. I'd find "A" ... "B" ... "C" ... "D" ... much more natural. Additionaly the small "ia" in "Via" is very difficult to read - it looks more like "V" + some dirt at the bottom which blurs the V. I am not sure in how far it would break with the layout but using a normal bold sans-serif font and enumerating through (A, B, C, …) seems to me better than having the hard coded pixmaps. Additionally, the "V" = "Via" is also not really i18n-able.

Make A...V...B items draggable to re-order

Currently, going to the the enter location box on the left and hovering over the A, B or Via shows turns the mouse pointer to an pointing finger - but clicking doesn't have an effect.

What would be useful – and in line with other map services: make them draggable such that one can re-order them.

Or at least remove the pointing finger symbol when hovering with the mouse as one then expects that a feature is hidden behind it.

Remember which alternative was selected

Currently the link will include the alternative that was chosen but will not select it automatically.

This is a little bit cumbersome to do. LRM needs to know which alternative should be selected
after the route is received. Since I currently only trigger the routing request indirectly by updating the waypoints in L.Routing.Plan I have no option to pass a parameter to the routing callback.

Add styling to start, end, via input containers

How can I achieve this @lbud ?

Seems to be passed in src/geocoder.js#L14, I tried to specify in the function above with no luck like so:

   function() {
     if (i === 0) {
             input = L.DomUtil.create('input', 'origin', container);
       return "osrm-directions-origin";

[map] auto zoom may hide route

depending on the location of origin and destination, parts of the route may be hidden by route guidance:

Ideally, the route is only in the unobstructed portion of the map.

[feature] chosen map style should be persistant

The selected map style is not part of a created link. When using the link one always gets the default map style.

Similarly, when reloading the map due to changing languages the map style is reset to the default style.

Change itinerary styling div not table

@lbud /master branch sets src/itinerary_builder.js which alters Routing instructions into divs vs tables which are set from the box with LRM.

I've adding src/itinerary_builder.js#L26-L36 and styling css/site.css#L461-L502 but still getting a table on the build.

What am i missing here?

Geocoder input icons are not updated when new waypoint is added

[feature] add ability to close geocoder and guidance boxes.

backbone or similar?

have you considered using a js framework like backbone.js?

Add styling for alternative route

Alt route is defined in route instructions but not clear on how to style an alt route line on the map in addition to main line styling.

Button to open JOSM/iD

Useful for debugging.

• JOSM
• iD

Style control for start, end, via points

Start, end, and via points ideally will be styled and referenced in routing instructions differently. Looking into src/geocoder.js but not completely sure how or where to set this values.

[feature] reset button

Add a button to remove all current markers.

[display] Route polyline visibility

The visibility of the route is a little less than what it should be. This needs a little experimentation but a thicker line with a slightly lighter blue could look better.

Dont work routing on http://project-osrm.org/osrm-frontend-v2/

Button for adding and button for removing via points

Adding via points is currently only possible by dragging the route.

• Fix remove button perliedman/leaflet-routing-machine#48
• Fix add button

[feature] zoom onto route

from previous UI:

Download GPX

Button should produce a .gpx file and start download, but it doesn't not seem to trigger action.

[cleanup] Split url handling into own submodule

Currently all the url-parameter handling code is in src/links.js. We can probably split most of that into an atomic module and use something like:

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

To also add history.

enable/disable uturns at via points

a right click on via points should do this

Add GPX export button

Probably needs code in LRM.

[bug] directions window remains open after route is deleted

After a route was shown, the darkened frame to the right remains open even when the route is removed.

[guidance] mouse-over should show location of instruction

From the v1 UI:

Line spacing for instructions box is too large.

A lot of real estate is wasted on line spacings, e.g.:

Make language and i18n configurable

• Add https://github.com/yohanboniface/Leaflet.i18n to LRM See perliedman/leaflet-routing-machine#53
• Use same library for this front-end Implement quick localization
• Add UI element to select language / units

[feature] Center map on user position

from previous UI:

Printing

Right now, it is not possible to print a route.

[printing] add spacing

the map should be on a separate page st there is a page break.

Display alternative route

Same OSRM server, two different routes using v1 or v2

Look at this:

http://cycletour.org/?hl=en&loc=-37.755264,145.347467&loc=-37.753380,145.694833&z=12&center=-37.768544,145.470829

http://cycletour.org/v2/?hl=en&loc=-37.755264,145.347467&loc=-37.753380,145.694833&z=12&center=-37.768544,145.470829

These two front ends both use the same back end (osrm.cycletour.org:5010), yet return very different routes. Any idea why?

I see some slight differences in the generated URLs. v1 has this:

z:12
output:json
jsonp:OSRM.JSONP.callbacks.route
loc:-37.755218,145.347633
loc:-37.753236,145.697698
instructions:true

v2 has this

instructions:true
alt:true
loc:-37.755302,145.347839
loc:-37.75256,145.694351
jsonp:_l_routing_machine_0

Is it the alt which is causing the difference? I don't have an easy way of testing.

Main / alt routing click to select

Per chat w/ @lbud - For routes with alternative routes, let's add functionality to allow the user to select either main or alt route and then jump user to that section of the instructions.

Switch to font based icons from mapbox-base

Use this icons when possible. https://www.mapbox.com/base/styling/icons/

UI broken in Safari

Safari is not showing the location input boxes:

while Chrome looks good

[feature] scale

The first fronend included a scale for km and miles.

[settings] miles vs. kilometers

from pre UI:

Issue with processing many subsequent JSON requests

There are timing issues when processing many subsequent JSON requests if some of the requests are still pending while others are being resolved.

How to reproduce:

• generate a route
• quickly drag one marker around the map
• stop dragging but keep the mouse button clicked

Observation:

• multiple routes to previous locations of the marker are drawn and deleted until the final route to the marker's current position is drawn

Expectation:

• no intermediate routes are drawn

Possible Solution:

• embed some counter in the json request (see frontend v1) and only process the json response with the current system counter

Related issue:
When releasing the mouse button in step three of the above example, unpredicted results may arise:

• the marker may jump back to a previous location and this becomes the final route
• the marker may stay at the current position but the final route is drawn to a previous location, effectively disconnecting marker and route.

Possible Solution:

• after dragging is done, i.e. the marker released, issue another request to the server (which will be the route that will be drawn when using the possible solution for the above problem)

Side panel is not hidden when there is no route

Route Isn't Displayed with Local Clone

If I clone the project, opening index.html in Firefox shows the map as expected, but as soon as I select two points the route never shows up. It works properly on the demo server. Steps:
git clone -b gh-pages https://github.com/Project-OSRM/osrm-frontend-v2.git
cd osrm-frontend-v2
firefox index.html
Select two points, the pins display but that is all.

Also "npm install" completes successful on the master branch, but that doesn't seem to fix the routing.

Branding

While thinking a little bit about #29 and the ad-hoc discussion (sorry!) in #23 I came to the conclusion that we should not do a complete Mapbox Directions branding.

a) This is not Mapbox Directions.
b) This is a demo server. We do not give guarantees on stability, quality, ...

I think just substituting Mapbox blue with OSRM orange will do the trick. Also solves our map problem. People will still see the similarity to Mapbox Directions but will be aware of subtle differences.

Also since the original Mapbox Directions theme is mostly color neutral, we can do this without too much duct tape.

/cc @DennisOSRM

Trigger for language and distance values

Language and distance button on toolbar doesn't seem to be "triggering" action. Button should allow user to change language between:

• Germany / English
• metric / imperial

Pass and style print values

Print button currently is not properly passing map values to print.html page. It is passing entire query, i.e., http://amyleew.github.io/osrm-frontend/printing.html#z=13&center=38.899049%2C-77.026949&loc=38.902389%2C-77.032700&loc=38.891834%2C-77.146854&hl=en&ly=&alt=&df=metric&srv=

But that is not populating the map on the page.

Once map values are passed, styling control for the route line and instructions will need to match that of the previous page.

/cc @lbud

[setting] layer selection missing

From the previous UI:

Demo UX / UI Improvements

Per chat w/ @TheMarex, I'm wrapping up UI / UX and design updates to live demo refresh with Leaflet Routing Machine codebase.

Improvements

• Open directly to OpenStreetMap editor
• Make routes linkable / shareable
• Add car, bike, and walk to Demo
• Language support providing localized options
• Working on Mobile

/cc @freenerd @springmeyer @lbud

i18n: maintainability and reloads

The language dependent changes should be kept in separate files. This allows for much better maintainability and separated i18n from the rest of the code.

Also, changing the language requires a reload right now.

Fonts

add @import to pull in fonts on page

[guidance] selection of alternative is unintuitive

It is not easy to see that there is an alternative route. The UI doesn't show that there are stacked tabs (which is a neat idea).

[settings] profile selection missing

from the previous UI:

Add route points by simple clicks