how can i add Bi directional lines in azure maps

Question

is there any way we can add two polylines between two coordinates new atlas.data.LineString([[point A],[point B]]) new atlas.data.LineString([[point B],[point A]]) like this currently it shows only one line when i add this to data source

Answer 1

If you have one linestring and you want a second linestring with coordinates in the opposite order, you can create a deep copy of the linestring, and then reverse the coordinate array, then add the lines to the data source. For example, if you have a GeoJSON linestring object:

var line = new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]);

//Create a deep copy of the line.
var newLine  = JSON.parse(JSON.stringify(line));

//Reverse the order of the coordinates in the new line.
newLine.coordinates.reverse();

As you noted, these lines will overlap when rendered. What you can do to add a visual separation, turn one of these into a GeoJSON feature and add a unique property that can be seen by the data driven styles, then use the offset option of the LineLayer. For example:

//Create a feature from the line and add some property we can use to know this is a reverse copy of a line when styling.
var newFeature = new atlas.data.Feature(newLine, { isCopy: true });

//Add the feature to the data source instead of the new line.
datasource.add(newFeature);

//Have two-line layers with a filter 

//Line layer for original lines.
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
    strokeColor: 'green',
    strokeWidth: 1,
    offset: -2,
    filter: ['!', ['has', 'isCopy']]
})); 

//A second line layer that renders the line copies
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
    strokeColor: 'red',
    strokeWidth: 1,
    offset: 2,
    filter: ['has', 'isCopy']
}));