Multiple Lines with different line color in Azure Map as per the data source

siddharth bansal 346 Reputation points
2023-12-19T11:20:58.6733333+00:00

I have a data source which is in a key value pair fashion, data source has 3 keys and I want to show 3 different lines on the map with 3 different colors , when calling the add line layer method in loop , the last color of the array is being applied .

what is the correct approach to handle multiple line scenario.

Kindly help in achieving the above mentioned scenario.

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
783 questions
{count} votes

1 answer

Sort by: Most helpful
  1. rbrundritt 18,926 Reputation points Microsoft Employee
    2023-12-19T17:23:52.96+00:00

    The main way to achieve this is to use data driven styles. If the color is a property of each feature you can use a simple get expression. For example, if your property was called myColor you could set the stroke color property of the line layer to ['get', 'myColor'] and it would apply the value of that property for each line when rendering that line. Here is a code sample:

    var data = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            "myColor": "#00ff4c"
          },
          "geometry": {
            "coordinates": [[-115.53846,43.50652],[-109.62032,38.38176]
            ],
            "type": "LineString"
          },
          "id": 0
        },
        {
          "type": "Feature",
          "properties": {
            "myColor": "#0000ff"
          },
          "geometry": {
            "coordinates": [[-92.73803,44.49236],[-99.65292,40.87626]
            ],
            "type": "LineString"
          },
          "id": 1
        },
        {
          "type": "Feature",
          "properties": {
            "myColor": "#ff0000"
          },
          "geometry": {
            "coordinates": [[-104.76121,46.07021],[-106.19402,43.28018]
            ],
            "type": "LineString"
          },
          "id": 2
        }
      ]
    };
    
    //Create a data source an add it to the map.
    var datasource = new atlas.source.DataSource();
    map.sources.add(datasource);
    
    //Add the data to the datasource.
    datasource.add(data);
    
    //Add a line layer.
    map.layers.add(
    	new atlas.layer.LineLayer(datasource, null, {
    		//Use data drive style for color.
    		strokeColor: ['get', 'myColor'],
    		strokeWidth: 3
    	})
    );
    

    If you have some metric or category value stored as a property, you could use that with a match, case, or interpolation expression.

    Note that the color can be any CSS color string (hex string, CSS color name, rgb/rgba string).

    1 person found this answer helpful.
    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.