Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
101 lines (86 sloc) 4.08 KB
<!DOCTYPE html>
<title>Lazy Load the Map - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<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="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() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.33, 47.6],
zoom: 12,
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
//A reusable class that makes it easy to lazy load the Azure Maps Atlas map SDK.
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) {
var loaded = isLoaded();
if (!_isLoading && !loaded) {
_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', '');
setTimeout('LazyMapLoader.__LoadCallback();', 100);
} else if (loaded) {
this.IsLoaded = function () {
return isLoaded();
this.__LoadCallback = function () {
if (isLoaded()) {
_isLoading = false;
} else {
setTimeout('LazyMapLoader.__LoadCallback();', 100);
<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>Lazy Load the Map</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.
You can’t perform that action at this time.