Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<title>Icon template options - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how the icon template options effect the rendering of built-in icon templates."/>
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, template, icon templates, symbols, fill patterns, image template" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="" type="text/css" />
<script src=""></script>
<script type='text/javascript'>
var map, datasource, layout = 'symbol';
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//Initialize a map instance.
map = new atlas.Map('myMap', {
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//Use Azure Active Directory authentication.
authType: 'anonymous',
clientId: 'c9f2f391-13f1-407b-a4a5-f0a241bacfbf', //Your Azure Active Directory client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Azure Active Directory Token.
var tokenServiceUrl = '';
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
//Alternatively, use an Azure Maps key. Get an Azure Maps key at 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('<option value="', templateNames[i], '" selected="selected">', templateNames[i], '</option>');
} else {
html.push('<option value="', templateNames[i], '">', templateNames[i], '</option>');
document.getElementById('TemplateNames').innerHTML = html.join('');
//Wait until the map resources are ready.'ready', function () {
map.controls.add(new atlas.control.StyleControl(), {
position: 'top-right'
datasource = new atlas.source.DataSource();
//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']
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.createFromTemplate('myTemplatedIcon', templateName, color, sColor, scale).then(function () {
//Reload the geometry to trigger a re-render.
switch (layout) {
case 'symbol':
datasource.setShapes([new[0, 0])]);
case 'line':
datasource.setShapes([new[[-50, -20], [0, 40], [50, -20]])]);
case 'polygon':
datasource.setShapes([new[[[-50, -20], [0, 40], [50, -20], [-50, -20]]])]);
function getSelectValue(id) {
var elm = document.getElementById(id);
return elm.options[elm.selectedIndex].value;
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div style="position:absolute;top:10px;left:10px;background-color:white;border-radius:10px;padding:10px;">
<tr title="The method in which to use the icons.">
<input type="radio" name="layout" checked="checked" onclick="update('symbol')">Symbol icon<br>
<input type="radio" name="layout" onclick="update('line')">Line symbols<br>
<input type="radio" name="layout" onclick="update('polygon')">Polygon fill
<tr title="The name of the template to use.">
<td>Template Name:</td>
<select id="TemplateNames" onchange="update()"></select>
<tr title="The primary color for the template.">
<td>Primary Color:</td>
<input type="color" value="#1A73AA" id="PrimaryColor" onchange="update()" />
<input type="checkbox" id="PrimaryColorTransparent" onclick="update()" />Transparent
<tr title="The secondary color for the template.">
<td>Secondary Color:</td>
<input type="color" value="#ffffff" id="SecondaryColor" onchange="update()" />
<input type="checkbox" id="SecondaryColorTransparent" onclick="update()" />Transparent
<tr title="The amount to scale the icon template by.">
<form oninput="o.value=Scale.value">
<input type="range" id="Scale" value="1" min="0.1" max="5" step="0.1" oninput="update()" onchange="update()" />
<output name="o" for="Scale">1</output>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Icon template options</h1></legend>
This sample shows how the icon template options effect the rendering of built-in icon templates.