-
Notifications
You must be signed in to change notification settings - Fork 449
/
Show Azure Maps in Leaflet layer control.html
97 lines (82 loc) · 5.66 KB
/
Show Azure Maps in Leaflet layer control.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Show Azure Maps in Leaflet layer control - 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 create add all the different Azure Maps tile layers to the layer control in leaflet." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, tiles, raster, leaflet, leaflet.js, leafletjs" />
<meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
<meta name="screenshot" content="screenshot.jpg" />
<!-- Add references to the Leaflet JS map control resources. -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<!-- Add reference to the Azure Maps Leaflet plugin. -->
<script src="/lib/azure-maps/azure-maps-leaflet.min.js"></script>
<script>
var map;
function getMap() {
//Add authentication details for connecting to Azure Maps.
var 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]'
};
//Create the default road layer.
var roadLayer = L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.base.road' });
//Load the map with the road layer.
map = L.map('myMap', {
center: [0, 0],
zoom: 2,
layers: [roadLayer]
});
//Create a layer for imagery.
var imageryLayer = L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.imagery' });
//Create a group of base map layers.
var baseLayers = {
'Road': roadLayer,
'Dark Grayscale': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.base.darkgrey' }),
'Imagery': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.imagery' }),
'Imagery & Roads': L.layerGroup([
imageryLayer,
L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.base.hybrid.road' })
])
};
//Create a group of overlay layers.
var overlays = {
'Weather - Infrared': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.weather.infrared.main' }),
'Weather - Radar': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.weather.radar.main' }),
'Traffic flow - absolute': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.traffic.flow.absolute' }),
'Traffic flow - reduced-sensitivity': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.traffic.flow.reduced-sensitivity' }),
'Traffic flow - relative': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.traffic.flow.relative' }),
'Traffic flow - relative-delay': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.traffic.flow.relative-delay' }),
'Traffic incident - night': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.traffic.incident.night' }),
'Traffic incident - s1': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.traffic.incident.s1' }),
'Traffic incident - s2': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.traffic.incident.s2' }),
'Traffic incident - s3': L.tileLayer.azureMaps({ authOptions: authOptions, tilesetId: 'microsoft.traffic.incident.s3' })
};
//Add the base map and overlay layers to the layers control.
L.control.layers(baseLayers, overlays).addTo(map);
}
</script>
</head>
<body onload="getMap()">
<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">Show Azure Maps in Leaflet layer control</h1>
</legend>
This sample shows how to create add all the different Azure Maps tile layers to the layer control in leaflet.
This samples uses the open source <a href="https://github.com/Azure-Samples/azure-maps-leaflet" target="_blank">Azure Maps Leaflet plugin</a>.
</fieldset>
</body>
</html>