Icon template options - Azure Maps Web SDK Samples
var map, datasource, layout = 'symbol';
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
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/20240620123613/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]'
}
});
//Load template names into UI.
var templateNames = atlas.getAllImageTemplateNames();
var html = [];
for (var i = 0; i < templateNames.length; i++) {
if (i === 0) {
html.push('');
} else {
html.push('');
}
}
document.getElementById('TemplateNames').innerHTML = html.join('');
//Wait until the map resources are ready.
map.events.add('ready', function () {
map.controls.add(new atlas.control.StyleControl(), {
position: 'top-right'
});
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
map.layers.add([
//Add a polygon layer for rendering fill patterns.
new atlas.layer.PolygonLayer(datasource, null, {
fillPattern: 'myTemplatedIcon',
fillOpacity: 1,
filter: ['==', ['geometry-type'], 'Polygon']
}),
//Add a line layer for displaying the line.
new atlas.layer.LineLayer(datasource, null, {
strokeColor: 'Purple',
strokeWidth: 3,
filter: ['==', ['geometry-type'], 'LineString']
}),
//Add a symbol layer for rendering the arrow along the line.
new atlas.layer.SymbolLayer(datasource, null, {
lineSpacing: 50,
placement: 'line',
iconOptions: {
image: 'myTemplatedIcon',
allowOverlap: true,
anchor: 'center'
},
filter: ['==', ['geometry-type'], 'LineString']
}),
//Add a symbol layer for rendering images as symbols.
new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'myTemplatedIcon',
allowOverlap: true,
ignorePlacement: true
},
filter: ['==', ['geometry-type'], 'Point']
})
]);
update();
});
}
function update(type) {
if (type) {
layout = type;
}
var color = document.getElementById('PrimaryColor').value;
var colorTransparent = document.getElementById('PrimaryColorTransparent').checked;
if (colorTransparent) {
color = 'transparent';
}
var sColor = document.getElementById('SecondaryColor').value;
var sColorTransparent = document.getElementById('SecondaryColorTransparent').checked;
if (sColorTransparent) {
sColor = 'transparent';
}
var scale = parseFloat(document.getElementById('Scale').value);
var templateName = getSelectValue('TemplateNames');
if (map.imageSprite.hasImage('myTemplatedIcon')) {
map.imageSprite.remove('myTemplatedIcon');
}
map.imageSprite.createFromTemplate('myTemplatedIcon', templateName, color, sColor, scale).then(function () {
//Reload the geometry to trigger a re-render.
switch (layout) {
case 'symbol':
datasource.setShapes([new atlas.data.Point([0, 0])]);
break;
case 'line':
datasource.setShapes([new atlas.data.LineString([[-50, -20], [0, 40], [50, -20]])]);
break;
case 'polygon':
datasource.setShapes([new atlas.data.Polygon([[[-50, -20], [0, 40], [50, -20], [-50, -20]]])]);
break;
}
});
}
function getSelectValue(id) {
var elm = document.getElementById(id);
return elm.options[elm.selectedIndex].value;
}
Layout:
Symbol icon
Line symbols
Polygon fill
Template Name:
Primary Color:
Transparent
Secondary Color:
Transparent
Scale:
1
Icon template options
This sample shows how the icon template options effect the rendering of built-in icon templates.