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?
myLines
and then returns ageojson
object with the coordinates offset. You would need to loop through the coordinates and and the offset to the values.