2

What's the best-practice way to show multiple lanes for one OSM way in Mapbox GL JS?

Let's say we have the following OSM way which is a collection of nodes:

enter image description here

Is there an easy way to visualize e.g.:

  • both driving directions at the same time
  • multiple lanes which do not have own geometries in OSM

The following picture demonstrates what the solution would produce:

enter image description here

  • The solution should work no matter of the direction of the way segments (angle)
  • The solution should work in combination with zoom, i.e. when zooming out the lanes should stay "on the road" (this is not the case when using line-offset e.g.)
  • It would be great if the solution can also handle special geometries like roundabouts

I could calculate the geometry for each way in a pre-processing step but I'm at least hoping to find existing solutions which can handle all angles and maybe eben special geometry like roundabouts.

Adding the lanes to OSM itself is no solution, as this needs to work e.g. when there is actually just one road lane which bicycles can ride in both directions.

hb0
  • 71
  • 8
  • I haven't used mapbox-gl-js but I would probably start with symbolizing the lines by one-way type before creating extra geometries. Create some styles for one-way, two-way, roundabout, etc. and then use them based on the feature type from osm. – jbalk Sep 08 '22 at 22:41
  • The problem is, that it we need to color the lanes in different colors, in continuous colors. I.e. I cannot generate all possible color combinations as "symbols". I guess there is no other way than trying to generate the geometries.

    Thanks for the reply anyways.

     – hb0 Sep 12 '22 at 09:00
  • I think you could still create a set of line types using custom style layers. Then create your color ramp. Loop through the layers and set a different color for each from your color ramp. https://docs.mapbox.com/help/glossary/layer/. https://stackoverflow.com/questions/3080421/javascript-color-gradient. I guess you have to decide whether it's more effort to do that or just create the geometries. – jbalk Sep 12 '22 at 17:18
  • https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#line – jbalk Sep 12 '22 at 17:25
  • Maybe I was not clear or miss-understand your suggestion, but we would have to color e.g. the "left lane" yellow and the right lane blue, all from one line geometry (which represents both lanes in your suggestion). As far as I know you can only set one color for one line feature, not colorize parts of it in different colors. – hb0 Sep 13 '22 at 07:31
  • After doing a little more research, it doesn't look like there is a way to use styling to make a double line and color each line different colors. You can make a double line for 1 geometry, but you can only set 1 color. Bummer. Looks like you'll have to add the layer twice with 2 different styles, or maybe 3 layers (2 way roads, 1 way roads for positive direction of travel, 1 way roads for negative direction of travel). You'll have to offset the oneway symbols in separate directions. Are you stuck with mapbox? I believe you could accomplish this task in leaflet using data-driven styles. – jbalk Sep 13 '22 at 16:50
  • If you could set a different color for the double line created by line-gap-width, my idea was to use a complimentary color function to get the opposite color for the second line... I've only worked with leaflet and it appears it's easier to work with styling in leaflet than mapbox js. – jbalk Sep 13 '22 at 16:53
  • Yeah, I think I'll try to generate the geometries and see how it goes, as soon as this feature is becoming urgent. Unfortunately, I cannot move to leaflet right now, as the app depends on Mapbox, but it's good to keep in mind if the feature is important enough to change to another library. Thanks a lot for your interest! I'll keep this issue up to date when I can work on it again. Simply copying and moving the whole layer won't work well with special geometries like roundabouts. I would have to add a layer for each type of road at least, which sounds rather complicated. – hb0 Sep 14 '22 at 08:23
  • It's an interesting problem! Please post your solution if you figure it out. Hey for your line joins, you should look at the line-join and line-cap settings - you can do rounded ends and rounded joins – jbalk Sep 14 '22 at 17:11

0 Answers0