-
Notifications
You must be signed in to change notification settings - Fork 452
/
Lazy Load the Map.html
126 lines (105 loc) · 5.57 KB
/
Lazy Load the Map.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lazy Load the Map - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<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" /><meta name="version" content="1.0" />
<meta name="screenshot" content="screenshot.jpg" />
<script>
var map;
function LoadMapControl() {
if (!LazyMapLoader.IsLoaded()) {
LazyMapLoader.LoadMapControl(getMap, function (msg) {
alert(msg);
});
} else if (map == null) {
getMap();
}
}
function getMap() {
//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 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://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]'
}
});
}
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', 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css');
document.body.appendChild(styles);
//Load the Atlas JavaScript SDK.
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js');
//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.');
};
}
document.body.appendChild(script);
} else if(error) {
error('Unable to access Azure Maps SDK. No internet connection.');
}
} else if (loaded && _callback) {
_callback();
}
};
this.IsLoaded = function () {
return isLoaded();
};
};
</script>
</head>
<body>
<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. Additionally, this method can also be used to detect
if there is an issue accessing the Azure Maps Web SDK.
</fieldset>
</body>
</html>