Improve large route ui (show step number)

[twitwi]

This PR proposes two fine tunings to the web UI. I'm not sure whether this part should be covered by additional unit tests, and/or should be split.

A first commit uses plain CSS to put a number in front of each step in the routing (to be able to see the correspondence with the markers on the map).

A second commit adds a checkbox that, when checked, prevents the automatic-rezoom features that takes place when the user adds an intermediate destination (this feature is very annoying when fine tuning very long tracks).

[easbar]

A first commit uses plain CSS to put a number in front of each step in the routing (to be able to see the correspondence with the markers on the map).

This is very useful and fixes #1359, thanks!

[easbar]

A second commit adds a checkbox that, when checked, prevents the automatic-rezoom features that takes place when the user adds an intermediate destination (this feature is very annoying when fine tuning very long tracks).

Yes, when you use start and endpoints that are far apart from each other, then zoom in to find some location, and then add an intermediate location the map zooms out. This can be annoying if you want to add multiple locations, I guess? On the other hand not sure if this justifies adding an extra checkbox, because the maps demo is supposed to be very minimal. Could we just always disable the zoom out when adding intermediate points?

[twitwi]

Indeed, it probably does not deserve a checkbox (to be honest even a global javascript boolean would be enough for me). As a default, it is probably better to not zoom when adding a point.

I'll try to update the PR to not zoom (but only when the user adds points), the initial zoom feature (when opening a link) is very useful.
I'm not sure when I can do it though.

[easbar]

If you'd like to have the first commit merged already now before you find the time to remove the check box feel free to create a separate PR (usually creating small PRs that focus on a single issue is the easiest way to merge a PR quickly). And you also need to sign the license agreement (not sure if you did already: https://github.com/graphhopper/graphhopper/blob/master/CONTRIBUTING.md)

[twitwi]

I limited the PR to the first commit (the one that fixes #1359) and send the signed CLA by email.

[karussell]

Thanks!

[karussell]

This is now live on GraphHopper Maps :)

It seems that it starts counting differently on chrome (with 2 instead 1). Do you know what the problem could be?

[twitwi]

It's my mistake, I used an unsuported feature... https://caniuse.com/#search=counter-set

The fix is to

1. remove this rule

#locationpoints {
    counter-set: pointcounter -1;
}

2. add :nth-child(n+2) to get

#locationpoints>div:nth-child(n+2) {
    counter-increment: pointcounter;
}

[twitwi]

I'll try to do a PR (later) unless it's faster to do it directly for you.

[twitwi]

PR sent, #1874