Allow straight lines

[bagage]

Would it be possible to draw some straight lines? It is mostly useful when you know that a route is there but not present on OSM right know; instead of making a detour you just want to have a straight line. I don't know how much effort it would require but it would be definitely help, ie I mainly would use it to map actually missing ways.

• [x] client-side track formatting (#399)
• [x] extend leaflet-routing plugin
• [x] support in all components (hash, distance markers, ...) (#497)
• [x] UI -> follow-up issue #498
• [x] some remaining tasks

_{edit (nrenner): task list}

[rkflx]

Thanks for your comment.

you will never get to that specific place to actually have a look at the situation to do a proper mapping

This might be true for users already involved in OSM and mapping. They could now build a route with beelines to visit places to map. However, those users should know their way around the various OSM sites anyway (e.g. change map style to OpenStreetMap, click on attribution link with location info baked in, edit map from there).

However, I'd assume (based on online and offline feedback) most of BRouter-Web's users are not familiar with how "to do a proper mapping". They'll only want to work around map data issues and get on with their lives. If beelines were unavailable, some might wonder if they could fix the map instead.

We don't know which of both effects will prevail, but it should be noted only a minority of users are currently OSM contributors. Thus my conclusion was to accompany the beeline feature with something to turn users into contributors. If you want to make that happen, please head over to #403.

have an option in the context of a waypoint to disable "using ways"

Let me illustrate why I think we can do better than the way Komoot works:

There are two basic objects involved here: Nodes, and edges. Beelines are edges, so it seems counter-intuitive to put toggles for them into the popup menu of nodes. Also, would a toggle on a node affect the next, the previous or both edges? Toggling an edge to beeline mode should be a single click, instead of having to create a sacrificial node, open its menu, toggle beeline mode for both edges and remove the node again.

I think once edges change color on mouseover (or by tap-to-select on mobile) it will be very easy to discover they can be toggled directly.

I also like the Idea that you can modify the routing behaviour as you draw a new node

You'll be happy to hear that this is already implemented in the relevant branch.

[darkmattercoder]

You have indeed a valid point regarding the node and edge differences and the context a beeline should be created from.

As I rethink, I agree.

@mjaschen any chance, you could setup an -- maybe somehow hidden -- instance, based on the branch where the feature already is usable, still with your great overlays and profiles? ;-)

[mjaschen]

Yes, I'll do that this evening!

[mjaschen]

https://brouter-next.m11n.de/ is now running the branch 68-sl-routing.

The version string in the upper right corner shows the commit (which is 6ea972bcf8723952e73b09f962cc42ae895cdc82 currently).

Have fun :-)

[darkmattercoder]

Thank you @mjaschen for the setup. Basically it works good.

I played around a bit and have the following feedback (not sure, whether any of this is related to the concrete instance, but I assume no...)

• Sometimes, when a beeline is involved, parts of the route seem to fail to render the Height shading (hope that is the correct English term). This does not apply for all of the cases. Sometimes, reverting a beeline to a normal segment, the height shading appear again for the whole routes. Beelines are mostly either in a greyish or blueish shade, but sometimes, after toggling back and forth, I saw them with the height shading design sometimes.
• The most annoying thing I noticed is, that at some point after rearranging segments, switching beelines on and off, I always get into a situation where the drag handle does not work anymore. Neither for beeline segments nor for the rest of the route. The route is from this point on not changeable anymore at all. I still can delete some waypoints. What I cannot delete anymore (left click has no effect at all) are beeline segment waypoints. They stay rendered on the map (but they are rendered as the drag handle, not as a waypoint) and seem to do nothing on click.
• Both of the above issues are fixed as soon as I reload the page. However, a reload also resets all beelines to be regular routed segments again.
• I have a slight feeling, that the above both applies more often, when a beeline is produced via ctrl+mouse rather than by clicking on a segment. I also noticed a drawn beeline (ctrl and click) caused an incomplete export as gpx, even if after the beeline segment, a regular segment is appended (see next point)
• The export of the planned route with beelines does not export beeline segments which are at the beginning or at the end of the track.
• I also have the impression that things with beelines work worse, once a waypoint is set in an area where no vector is in the map.

I know, that this is not the best exact technical description of what I did, but thats the things I found so far by klicking around a few minutes.

[nrenner]

Thanks for the feedback, but it's really too early for error reports, this is still in the middle of development and not ready to be used yet.

[rkflx]

const beelineButton = L.easyButton({ transition-duration: 0.3s; height: 0;

I guess this is good enough for now, maybe buttons can be reorganized later.

While I may have hoped for a more collaborative discussion design-wise, it is what it is, so I won't waste more time on it. Let me know once it makes sense to post new bugs I discovered after the recent beeline commits.

[nrenner]

This is not set in stone yet, it was just the most straightforward way, using an EasyButton example. I was going to comment on that and perhaps open a separate issue.

[ravenfeld]

Hurry to have this feature, it's what I need to track my MTB and trail rides. I've become a fan of brouter-web because I can have all the layers I want and I have exactly the maps that are most adapted to my practices. Very good work, sorry I can't help, I don't know js well.

[rkflx]

brouter-web commit 47f3a06be6127e2bdf16e753105b4905cb5efd96 Improve route interactivity by using canvas

This one increases the visual gap between cursor and trailer+marker significantly during mouse movement when dragging vias or adding waypoints (for both my mobile and desktop setup). Even for slow movements I can observe gaps up to 150px. Performance becomes really laggy, i.e. redrawing of trailer+marker cannot keep up with the cursor movement anymore at all. Increasing window/canvas size makes it even worse.

This has been fine before, and now sadly degrades the user experience quite a bit. TBH, that's not a compromise I'm willing to make.

In addition, the change from SVG to canvas introduces a weird bug: When clicking next to the route within a distance of tolerance, it zooms in (tested on mobile and with Chromium's dev tools in "Desktop (touch)" mode).

tolerance does not seem to work for SVG according to Leaflet/Leaflet#7515 (although it sounds like implementing it for SVG in the future is not ruled out yet). Hopefully there is another solution, e.g. by somehow handling it client-side for only the cases we care about? Find an alternative for the dashed line beeline visuals? Or at the very least BR.Browser.touch could be used to fall back to the SVG renderer on desktop / non-touch platforms!?

[nrenner]

Switching to canvas is a bit of a bold move that might have unexpected consequences, so far I have found and fixed two issues.

This one increases the visual gap between cursor and trailer+marker significantly during mouse movement when dragging vias or adding waypoints (for both my mobile and desktop setup).

I haven't noticed anything like that, will see if I can reproduce and would be interesting to investigate. Generally I would expect Canvas to be faster than SVG. OpenLayers has switched everything from SVG and DOM to Canvas.

When clicking next to the route within a distance of tolerance, it zooms in

I have seen that during development, but not anymore. Will need to check again.

Hopefully there is another solution

I would first want do check if there is anything going wrong or to be improved or if Canvas is really slower in some cases.

I have looked at some plugins that add a tolerance for SVG by adding a wider, invisible line on top. But they all just duplicate the layer and its geometry, which might also have perfomance implications.

[rkflx]

I'm not making this stuff up, in fact I arrived at the commit via git bisect ;) . For my upcoming patch series I am currently looking into how it affects performance too, let's see when I'll find time to share results of my testing.

OpenLayers has switched everything from SVG and DOM to Canvas.

maplibre-gl-js is using canvas too, and is even slower. BRouter-Web is about the only fast (as in "what works fast on your machine might be very slow on my machine") app left, I'd be wary of giving up that differentiating factor. I mean, I could just revert the change for my own installation, but I'm mentioning it here because it could affect more people.

My general impression after reading lots of StackOverflow discussions is that canvas is supposed to be used if performance of thousands of single map objects matters (e.g. live view of a public transport network), but it can be slower for simple use cases (like displaying a map and a single track).

I would first want do check if there is anything going wrong or to be improved or if Canvas is really slower in some cases.

Something nice to know I found, but probably more related to Leaflet itself rather than our use of it: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

(Looking at Leaflet\<slash>issues/7350, I'm not so sure canvas is very well optimized in Leaflet yet...)

I also noticed in Leaflet's docs that the renderer can be changed for single paths too opposed to applying it to the whole map. Did not try this yet, though.

Do you know why tolerance is not implemented for SVG currently, i.e. is there a fundamental problem?

(If we have no other choice than to use canvas in the end, then perhaps it can be done in a way which has less impact, e.g. only on mobile, or only for beelines...)

[stefanct]

Just some minor feedback because it has been discussed: As a long-term OSM contributor I would not like to see contributions that are solely made to make some routing work. In the last years OSM increasingly gets worse in some aspects because of lowering hurdles for editing so that "everybody" can do it. Pushing people to contribute who are not really interested and don't care for the correctness of the data does not help OSM at all - rather the opposite: it creates more work for the experienced people to clean up behind those who are not willing to invest time in learning how to do it properly.

I have briefly tested the ctrl-click implementation and apart from some minor problems (related to deleting nodes part of beeline segments which arguably are not even bugs) it is a very nice improvement that fixes my biggest problem in brouter-web, yay. The only problem that I can see that is not a bug is that the feature is too hidden which is a very bad thing (I strongly disagree with some "UX" folks on that - features need to be discoverable from the UI itself). One way to improve on that would be to change the supposed line and/or cursor when ctrl is held to indicate the changed behavior. Making the line non-dashed would make it pretty obvious IMHO. The user would still need to discover it somehow but such an indicator makes it way more easy to find compared to if nothing changes until you actually click.

[Taunide]

Thanks, I've tested https://brouter.damsy.net/v99.52.4-beeline/ for a while and it works good and useable on a Windows device for me. But it seems so that the distance isn't increased when adding straight lines to a route. The overall total is lower as it should be. One can create subsequent straight line points in a row, which is usefull, but when exporting the route as gpx the points don't show up in the file. For working with an Android device in the field, I would wish an extra button for changing between routing points and straight lines and back. I agree to some people that adding this feature could help to avoid the mapping of some very "own" paths into openstreetmap just to make routing work.

[isartrails]

Cf #68 (comment):

1. Use ctrl+click when adding a new routing point

2. or click on an already existing route to toggle between "straight line" and "follow-way line"

1. ctrl+click doesn't work on my mac, it opens the context menue.
2. I did not understand "existing route"...

[mjaschen]

I did not understand "existing route"...

Just click on any given route segment (between two points). Example video:

https://docs.google.com/uc?id=1gLOsoaGYboeyrX5UIP7s0o0cwhBusHiB

[nrenner]

@isartrails

1. ctrl+click doesn't work on my mac, it opens the context menue.

It's shift+click now.

[nrenner]

I think this is ready for testing now (on the master branch).

Given that this has been taking so long, I guess I will leave the UI as is, especially the toggle button, see follow-up issue #498 for later.

Usage:

• append straight lines by activating the toggle button that appears when drawing is active (B key) or by holding Shift key while clicking
• change an existing route segment beween two markers to a straight line (and back) by clicking on it (or rather the edit handle)

Mobile behaviour will change a bit:

• increased touch tolerance, so it's easier to hit the route line for dragging and tapping
• for adding a via point, you previously needed to tap on the route first to make the edit handle appear then drag that. Now you can drag the route right away
• previously a tap on the route made the Heightgraph map marker appear (simulating mouse hover), now a tap switches the segment into a straight line (corresponding to a click on desktop), the height marker can still be shown after a long press

[drdrknox]

Hi @nrenner I'd love to help testing but it seems I'm on the wrong instance (I've been using https://brouter-next.m11n.de/) - is that correct? Because on this one the caption on the straight line icons says "Toggle straight line - B Taste" but in fact it's pressing Strg+dragging a straight line, neither B nor Shift-key do work which is why I was assuming I could be on the wrong instance? Best regards Paul

[mjaschen]

@drdrknox The version on brouter-next.m11n.de is outdated.

I've merged the changes and deployed the new version to bikerouter.de.

[0709wiwiwi]

@mjaschen Does the job. Excellent. Thanks.

[drdrknox]

I've also tested it, perfect job and great addition to the brouter functions!

[nrenner]

@0709wiwiwi this seems to be unrelated to the current issue - can you please open a new issue for that.

[0709wiwiwi]

OK Roger. I hope I did it correctly. (Not used to be active here)