map-add-line-layer.md

title	description	author	ms.author	ms.date	ms.topic	ms.service	ms.custom
Add a line layer to a map | Microsoft Azure Maps	Learn how to add lines to maps. See examples that use the Azure Maps Web SDK to add line layers to maps and to customize lines with symbols and color gradients.	stevemunk	v-munksteve	08/08/2019	conceptual	azure-maps	codepen, devx-track-js

Add a line layer to the map

A line layer can be used to render LineString and MultiLineString features as paths or routes on the map. A line layer can also be used to render the outline of Polygon and MultiPolygon features. A data source is connected to a line layer to provide it with data to render.

Tip

Line layers by default will render the coordinates of polygons as well as lines in a data source. To limit the layer such that it only renders LineString features set the filter property of the layer to ['==', ['geometry-type'], 'LineString'] or ['any', ['==', ['geometry-type'], 'LineString'], ['==', ['geometry-type'], 'MultiLineString']] if you want to include MultiLineString features as well.

The following code shows how to create a line. Add the line to a data source, then render it with a line layer using the LineLayer class.

//Create a data source and add it to the map.
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: 'blue',
    strokeWidth: 5
}));

Below is the complete running code sample of the above functionality.

<iframe height='500' scrolling='no' title='Add a line to a map' src='//codepen.io/azuremaps/embed/qomaKv/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen Add a line to a map by Azure Maps (@azuremaps) on CodePen. </iframe>

Line layers can be styled using LineLayerOptions and Use data-driven style expressions.

Add symbols along a line

This sample shows how to add arrow icons along a line on the map. When using a symbol layer, set the "placement" option to "line". This option will render the symbols along the line and rotate the icons (0 degrees = right).

<iframe height="500" scrolling="no" title="Show arrow along line" src="//codepen.io/azuremaps/embed/drBJwX/?height=500&theme-id=0&default-tab=js,result&editable=true" frameborder='no' loading="lazy" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen Show arrow along line by Azure Maps (@azuremaps) on CodePen. </iframe>

Tip

The Azure Maps web SDK provides several customizable image templates you can use with the symbol layer. For more information, see the How to use image templates document.

Add a stroke gradient to a line

You may apply a single stroke color to a line. You can also fill a line with a gradient of colors to show transition from one line segment to the next line segment. For example, line gradients can be used to represent changes over time and distance, or different temperatures across a connected line of objects. In order to apply this feature to a line, the data source must have the lineMetrics option set to true, and then a color gradient expression can be passed to the strokeColor option of the line. The stroke gradient expression has to reference the ['line-progress'] data expression that exposes the calculated line metrics to the expression.

<iframe height="500" scrolling="no" title="Line with Stroke Gradient" src="//codepen.io/azuremaps/embed/wZwWJZ/?height=500&theme-id=0&default-tab=js,result&editable=true" frameborder='no' loading="lazy" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen Line with Stroke Gradient by Azure Maps (@azuremaps) on CodePen. </iframe>

Customize a line layer

The Line layer has several styling options. Here is a tool to try them out.

<iframe height='700' scrolling='no' title='Line Layer Options' src='//codepen.io/azuremaps/embed/GwLrgb/?height=700&theme-id=0&default-tab=result' frameborder='no' loading="lazy" allowtransparency='true' allowfullscreen='true'>See the Pen Line Layer Options by Azure Maps (@azuremaps) on CodePen. </iframe>

Next steps

Learn more about the classes and methods used in this article:

[!div class="nextstepaction"] LineLayer

[!div class="nextstepaction"] LineLayerOptions

See the following articles for more code samples to add to your maps:

[!div class="nextstepaction"] Create a data source

[!div class="nextstepaction"] Add a popup

[!div class="nextstepaction"] Use data-driven style expressions

[!div class="nextstepaction"] How to use image templates

[!div class="nextstepaction"] Add a polygon layer