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/Azure Maps OpenLayers satellite labels.html

Go to file
 
 
Cannot retrieve contributors at this time
94 lines (81 sloc) 4.5 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<title>Azure Maps OpenLayers satellite labels - 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="TThis sample shows how to render Azure Maps satellite imagery with labels overlaid in the OpenLayers map control." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, raster, imagery, satellite, aerial, tiles, Open Layers, OpenLayers" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the OpenLayers JavaScript and CSS files. -->
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css" />
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<!-- Add reference to the Azure Maps OpenLayers plugin. -->
<script src="../Common/scripts/azure-maps-openlayers.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 a map instance.
map = new ol.Map({
target: 'myMap',
layers: [
//Create a layer group consisting of two layers, imagery and labels from Azure Maps.
new ol.layer.Group({
layers: [
//Add Azure Maps imagery as a background.
new ol.layer.Tile({
source: new ol.source.AzureMaps({
authOptions: authOptions,
tilesetId: 'microsoft.imagery'
})
}),
//Add hybrid road layer which adds roads, boarders and labels, but no background to the map.
new ol.layer.Tile({
source: new ol.source.AzureMaps({
authOptions: authOptions,
tilesetId: 'microsoft.base.hybrid.road'
}),
opacity: 0.8
})
]
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
}
</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">Azure Maps OpenLayers satellite labels</h1>
</legend>
This sample shows how to render Azure Maps satellite imagery with labels overlaid in the OpenLayers map control.
This samples uses the open source <a href="https://github.com/Azure-Samples/azure-maps-openlayers" target="_blank">Azure Maps OpenLayers plugin</a>.
</fieldset>
</body>
</html>