Adding offset to GeoJSON layer in Leaflet?

Question

Using the example GeoJSON tutorial code at leafletjs.com.
Change the myLines variable so that the two lines overlap, but run in opposite directions as follows:

var myLines = [{
    "type": "LineString",
    "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
    "type": "LineString",
    "coordinates": [[-110, 55], [-105, 45], [-100, 40]]
}];

This overlapping is a common situation with lineString shapes, especially roads. In QGIS/ArcMap, one can apply an Offset = X to the layer such that a positive offset shifts each line feature X (pixels, map units) to the right, in the direction of travel (starting coordinate to ending coordinate), and a negative offset shifts the line to the left, in the direction of travel.

There does not appear to be an option in Leaflet which would allow one to apply a similar offset in the style to these lines so that they are not shown overlapping. Markers seem to have this option, but not lines. I was hoping the following code would work, but it doesn't since "offset" is not a valid option.

var myStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65,
    "offset": 1.5
};

L.geoJson(myLines, {
    style: myStyle
}).addTo(map);

Does this option exist or is it perhaps called something else?

Answer 1

According to Romain D on it1me.com, it can be done with the Leaflet.PolylineOffset as referenced in the comments by MattPil29 above.

I have adapted it for the data in your example. I turned off your original line by changing opacity to 0 in myStyle. There is probably a more elegant way to not add it.

The other key is flipping the x,y coordinate to make L.Polyline happy.

See a fiddle here, Leaflet Offset geojson

Main code

var myLines = [{
  "type": "LineString",
  "coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
  "type": "LineString",
  "coordinates": [[-110, 55], [-105, 45], [-100, 40]]
}];

var myStyle = {
  "color": "#ff7800",
  "weight": 5,
  "opacity": 0,
  "offset": 1.5
};

L.geoJson(myLines, {
  style: myStyle,
  onEachFeature: function(feature){
    var coords = feature.coordinates;
    var lengthOfCoords = feature.coordinates.length;

    //reverse x, y order for L.polyline
    for (i=0;i<lengthOfCoords;i++)
      {
      // swap x and y, save x in var holdLon then drop back into second position
        holdLon = coords[i][0];
        coords[i][0] = coords[i][1];
        coords[i][1] = holdLon;
     }

    var offset = L.polyline(coords, {offset: 5, color: 'black'}).addTo(map);
  }
}).addTo(map);

edit: If you don't want the original lines at all just remove the

.addTo(map)

in the last line, leave it as

)};

Then you can remove

style: myStyle,