Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

AzureMapsGovCloudCodeSamples/AzureMapsCodeSamples/Third Party Map Controls/Show Azure Maps in Leaflet layer control.html

Go to file
 
 
Cannot retrieve contributors at this time
99 lines (84 sloc) 5.81 KB
Raw Blame
Open in GitHub Desktop
<!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 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 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" />
<!-- 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="../Common/scripts/azure-maps-leaflet.min.js"></script>
<script type='text/javascript'>
var map;
function GetMap() {
//Add authentication details for connecting to Azure Maps.
var authOptions = {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
azMapsDomain: 'atlas.azure.us',
//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 = "https://azuremapscodesamples.azurewebsites.us/Common/TokenService.ashx";
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>