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 it is just the Polyline you want to plot between points and indicate with two different colors, you can use the offset property of LineLayerOptions and plot the lines using the following JavaScript.

  var dataSource = new atlas.source.DataSource();
  map.sources.add(dataSource);

  //Create a line and add it to the data source.
  dataSource.add(new atlas.data.LineString([[-73.972340, 40.743270], [-74.004420, 40.756800]]));

  //Create a line layer to render the line to the map.
  map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
    strokeColor: 'green',
    strokeWidth: 1,
    offset: -2
  })); 
  
  map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
    strokeColor: 'red',
    strokeWidth: 1,
    offset: 2
  })); 
});

The above JavaScript would produce the following Ploy Lines on Azure Maps.

Optionally, you can add a distinct data source if you prefer and map the layers for each data source. But you can achieve the same output by using a single data source as indicated above.

I have built the JavaScript code based on the Azure Maps documentation Add Line Layer to the Map where you can find great code references to add symbols and line gradients. Here is the link to the LineLayers interface which provides a list of options that you can use when rendering line layers in Azure Map.

Answer 2

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']
}));