Line Layer Options - Azure Maps Web SDK Samples
var map, datasource, lineLayer, defaultOptions, removeDefaults;
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-90, 40],
zoom: 2,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//Use Microsoft Entra ID authentication.
authType: 'anonymous',
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Microsoft Entra ID Token.
var tokenServiceUrl = 'https://web.archive.org./web/20240714095736/https://samples.azuremaps.com/api/GetAzureMapsToken';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a style control and add it to the map.
map.controls.add(new atlas.control.StyleControl({
style: 'dark'
}), {
position: 'top-right'
});
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Add line to data source.
datasource.add(new atlas.data.LineString([[-74.00390, 40.88029], [-87.58300, 41.93497], [-105.20507, 39.77476], [-122.43164, 47.66538]]));
//Create a layer to render the line data.
lineLayer = new atlas.layer.LineLayer(datasource);
map.layers.add(lineLayer);
defaultOptions = lineLayer.getOptions();
//Update the line layer with the options in the input fields.
updateLineLayer();
});
new ClipboardJS('.copyBtn');
}
function updateLineLayer() {
var options = getInputOptions();
//Update all the options in the line layer.
lineLayer.setOptions(options);
document.getElementById('CodeOutput').value = JSON.stringify(options, null, '\t').replace(/\"([^(\")"]+)\":/g, "$1:");
}
function getInputOptions() {
removeDefaults = document.getElementById('RemoveDefaults').checked;
var sda = document.getElementById('StrokeDashArray').value;
var dashArray = undefined;
if (sda && sda != '') {
sda = sda.split(/[\s,]+/);
if (sda && sda.length > 1) {
dashArray = [];
for (var i = 0; i < sda.length; i++) {
dashArray.push(parseInt(sda[i]));
}
}
}
return {
strokeColor: getPropertyValue('color', document.getElementById('StrokeColor').value),
strokeOpacity: getPropertyValue('strokeOpacity', parseFloat(document.getElementById('StrokeOpacity').value)),
strokeWidth: getPropertyValue('strokeWidth', parseFloat(document.getElementById('StrokeWidth').value)),
blur: getPropertyValue('blur', parseFloat(document.getElementById('Blur').value)),
lineCap: getPropertyValue('lineCap', getSelectValue('LineCap')),
lineJoin: getPropertyValue('lineJoin', getSelectValue('LineJoin')),
offset: getPropertyValue('offset', parseFloat(document.getElementById('Offset').value)),
minZoom: getPropertyValue('minZoom', parseFloat(document.getElementById('MinZoom').value)),
maxZoom: getPropertyValue('maxZoom', parseFloat(document.getElementById('MaxZoom').value)),
visible: getPropertyValue('visible', document.getElementById('Visible').checked),
strokeDashArray: dashArray,
translateAnchor: getPropertyValue('translateAnchor', document.getElementById('TranslateAnchor').value),
translate: getPropertyValue('translate', [
parseFloat(document.getElementById('TranslateX').value),
parseFloat(document.getElementById('TranslateY').value)
])
};
}
function getPropertyValue(propertyName, value) {
if (removeDefaults && defaultOptions[propertyName] === value) {
return undefined;
}
return value;
}
function getSelectValue(id) {
var elm = document.getElementById(id);
return elm.options[elm.selectedIndex].value;
}
function openTab(elm, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
elm.className += " active";
}
#myMap {
position: relative;
width: calc(100% - 375px);
min-width:290px;
height: 600px;
float: left;
}
.sidePanel {
width: 325px;
height: 580px;
float: left;
margin-right: 10px;
}
#CodeOutput {
width: 300px;
height: 420px;
overflow-y: auto;
}
.copyBtn {
float: right;
}
table td:nth-of-type(1) {
width: 120px;
}
table td:nth-of-type(2) {
width: 200px;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 6px 8px;
transition: 0.3s;
font-size: 14px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
Line Layer Options
This sample shows how the different options of the line layer affect rendering.
Base Options
Line Options
Code
Min Zoom:
0
Max Zoom:
24
Visible:
In addition to the options in this tool, the LineLayer also has options for;
sourceLayer - used with VectorTileSource.
strokeGradient
filter - used to filter data in layer.
Many options in this layer also support Expressions which are not demonstrated in this sample.
Stroke Color:
Stroke Opacity:
1
Stroke Width:
2
Line Cap:
butt
round
square
Line Join:
bevel
miter
round
Blur:
0
Offset:
0
Stroke Dash Array
Translate Anchor:
map
viewport
Translate:
x:
0
y:
0
Remove defaults
Copy to clipboard