Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<title>Lazy Load the Map - 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 to delay the loading of the map SDK until it is needed." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, lazy load, reduce cost, tabs" />
<meta name="author" content="Microsoft Azure Maps" />
<script type='text/javascript'>
var map;
function LoadMapControl() {
if (!LazyMapLoader.IsLoaded()) {
} else if (map == null) {
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
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>'
var LazyMapLoader = new function () {
var _callback = null, _isLoading = false;
function isLoaded() {
//Verify that the atlas namespace is loaded and that the Map class is recognized.
return typeof (atlas) != 'undefined'
&& typeof (atlas.Map) != 'undefined';
this.LoadMapControl = function (callback, error) {
//Check to see if the Web SDK is already loaded. If it is, no sense loading it again.
var loaded = isLoaded();
if (!_isLoading && !loaded) {
//Check that the user is online.
if (navigator.onLine) {
_callback = callback;
_isLoading = true;
//Load the Atlas CSS Styles.
var styles = document.createElement('link');
styles.setAttribute('type', 'text/css');
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('href', '');
//Load the Atlas JavaScript SDK.
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', '');
//If the script loads successfully, trigger the callback.
if (callback) {
script.onload = callback;
//If the script is unable to load, trigger the error callback.
if (error) {
script.onerror = function () {
error('Unable to access Azure Maps SDK.');
} else if (error) {
error('Unable to access Azure Maps SDK. No internet connection.');
} else if (loaded && _callback) {
this.IsLoaded = function () {
return isLoaded();
<input type="button" onclick="LoadMapControl()" value="Load Map" />
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Lazy Load the Map</h1></legend>
This sample shows how to delay the loading of the map SDK until it is needed. This is useful if your map is hidden and not displayed by default (i.e. hosted in a tab).
By waiting until the user actually needs the map before loading it, you can reduce the amount of resources the browser uses initially and speed up your page loading
while also reducing the number of transactions that are generated by your application and thus reducing your costs.