Support for drawing a line based on direction?

[quicklywilliam]

Our use case for Mapbox involves drawing the right and left lanes of a road separately. For example, the green line here is headed north while the yellow line heads south:

We'd like a way to specify in the style file that lines should be drawn directionally – i.e. that they are drawn 'outside' or 'inside' their center depending on direction.

[quicklywilliam]

Adding @incanus, who expressed an interest in the issue =). Also @ezheidtmann who works with us.

[incanus]

@ericfischer @peterqliu @andreasviglakis @nickidlugash Any ideas here?

[peterqliu]

We have a line-gap-width property that splits a line into two, but they'll be the same color.

To my knowledge, the best way to do this would be supplying your own data for the two-lane geometry as separate linestrings (such as via geoJSON), and then style them appropriately as separate layers.

[e-n-f]

@incanus In CartoCSS the way to do this is with line-offset, which will push the northbound line one direction and the southbound line the other. Is there a GL equivalent?

If not, the best thing I can think of is to special-case it during vector tile generation.

[quicklywilliam]

@ericfischer yeah that looks like exactly what we need. We're considering switching back to TileMill, will give it a shot.

[quicklywilliam]

For reference, there's a long discussion of this property in https://github.com/mapbox/mapbox-gl-style-spec/issues/131.

[jorgebarrios87]

Line offset is a crucial need for any transportation data map, where we need to show speeds, traffic counts, etc. by direction (e.g., northbound). As I understand it, line casing would not work as it'll just draw the same line on both sides of the road. I'd love a line-offset property that could just bump a line by x pixels based on the line's direction. This is a pretty quick setting in ArcMap or QGIS, and it looks like TileMill also had it.

[danpat]

Adding a reference to this: http://www.me.berkeley.edu/~mcmains/pubs/DAC05OffsetPolygon.pdf

which was helpfully pointed out by @flippmoke in the context of his work on mapnik's line-offset property, which has gone through several iterations.

In short, single-sided offsets are non-trivial to implement.

[jfirebaugh]

Support for a line-offset property was added. Follow-up rendering issues such as https://github.com/mapbox/mapbox-gl-js/issues/2316 should now go to separate issues.