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 options.html

Go to file
 
 
Cannot retrieve contributors at this time
198 lines (182 sloc) 10.4 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<title>Azure Maps OpenLayers options - 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 the different options of Azure Maps tile layer can be used 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, azMapsSource;
function GetMap() {
//Create an Azure Maps tile source.
azMapsSource = new ol.source.AzureMaps({
//Add authentication details for connecting to Azure Maps.
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: [
new ol.layer.Tile({
source: azMapsSource
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
}
function tilesetIdUpdated(elm){
azMapsSource.setTilesetId(elm.selectedOptions[0].text);
}
function languageUpdated(elm){
var lang = elm.options[elm.selectedIndex].value
azMapsSource.setLanguage(lang);
}
function trafficFlowThicknessUpdated(elm){
azMapsSource.setTrafficFlowThickness(elm.value);
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div style="position:absolute;top:15px;right:15px;border-radius:5px;background-color:#fff;padding:5px;z-index:1000">
<table>
<tr>
<td>Tileset ID:</td>
<td>
<select onchange="tilesetIdUpdated(this)">
<option selected="selected">microsoft.base.road</option>
<option>microsoft.base.darkgrey</option>
<option>microsoft.imagery</option>
<option>microsoft.weather.infrared.main</option>
<option>microsoft.weather.radar.main</option>
<option>microsoft.base.hybrid.road</option>
<option>microsoft.base.labels.road</option>
<option>microsoft.traffic.flow.absolute</option>
<option>microsoft.traffic.flow.reduced-sensitivity</option>
<option>microsoft.traffic.flow.relative</option>
<option>microsoft.traffic.flow.relative-delay</option>
<option>microsoft.traffic.incident.night</option>
<option>microsoft.traffic.incident.s1</option>
<option>microsoft.traffic.incident.s2</option>
<option>microsoft.traffic.incident.s3</option>
</select>
</td>
</tr>
<tr>
<td>Language:</td>
<td>
<select onchange="languageUpdated(this)">
<option value="NGT">Neutral Ground Truth (NGT)</option>
<option value="NGT-Latn">Neutral Ground Truth - Latin exonyms (NGT-Latn)</option>
<option value="ar">Arabic (ar)</option>
<option value="bg">Bulgarian (bg)</option>
<option value="bg-BG">Bulgarian (Bulgaria) (bg-BG)</option>
<option value="ca-ES">Catalan (Spain) (ca-ES)</option>
<option value="cs">Czech (cs)</option>
<option value="cs-CZ">Czech (Czech Republic) (cs-CZ)</option>
<option value="da">Danish (da)</option>
<option value="da-DK">Danish (Denmark) (da-DK)</option>
<option value="nl">Dutch (Netherlands) (nl)</option>
<option value="nl-NL">Dutch (Netherlands) (nl-NL)</option>
<option value="en">English (en)</option>
<option value="en-AU">English (Australia) (en-AU)</option>
<option value="en-CA">English (Canada) (en-CA)</option>
<option value="en-GB">English (United Kingdom) (en-GB)</option>
<option value="en-NZ">English (New Zealand) (en-NZ)</option>
<option value="en-US" selected="selected">English (United States) (en-US)</option>
<option value="fi">Finnish (fi)</option>
<option value="fi-FI">Finnish (Finland) (fi-FI)</option>
<option value="fr">French (fr)</option>
<option value="fr-FR">French (France) (fr-FR)</option>
<option value="de">German (de)</option>
<option value="de-DE">German (Germany) (de-DE)</option>
<option value="el">Greek (el)</option>
<option value="el-GR">Greek (el-GR)</option>
<option value="hu">Hungarian (hu)</option>
<option value="hu-HU">Hungarian (hu-HU)</option>
<option value="id">Indonesian (id)</option>
<option value="id-ID">Indonesian (id-ID)</option>
<option value="it">Italian (it)</option>
<option value="it-IT">Italian (it-IT)</option>
<option value="lt">Lithuanian (lt)</option>
<option value="lt-LT">Lithuanian (lt-LT)</option>
<option value="ms-MY">Malay (ms-MY)</option>
<option value="nb-NO">Norwegian, Bokmal (Norway) (nb-NO)</option>
<option value="pl">Polish (pl)</option>
<option value="pl-PL">Polish (Poland) (pl-PL)</option>
<option value="pt">Portuguese (Brazil) (pt)</option>
<option value="pt-BR">Portuguese (Brazil) (pt-BR)</option>
<option value="pt-PT">Portuguese (Portugal) (pt-PT)</option>
<option value="ru">Russian (ru)</option>
<option value="ru-RU">Russian (Russia) (ru-RU)</option>
<option value="sk">Slovak (sk)</option>
<option value="sk-SK">Slovak (Slovakia) (sk-SK)</option>
<option value="sl">Slovenian (sl)</option>
<option value="sl-SI">Slovenian (sl-SI)</option>
<option value="es">Spanish (es)</option>
<option value="es-ES">Spanish (Spain) (es-ES)</option>
<option value="es-MX">Spanish (Mexico) (es-MX)</option>
<option value="sv">Swedish (sv)</option>
<option value="sv-SE">Swedish (sv-SE)</option>
<option value="th">Thai (th)</option>
<option value="th-TH">Thai - Thailand (th-TH)</option>
<option value="tr">Turkish (tr)</option>
<option value="tr-TR">Turkish (tr-TR)</option>
</select>
</td>
</tr>
<tr>
<td>Traffic flow thickness:</td>
<td>
<form oninput="ft.value=flowThickness.value">
<input type="range" id="flowThickness" value="5" min="1" max="20" step="1" onchange="trafficFlowThicknessUpdated(this)" />
<output name="ft" for="flowThickness">5</output>
</form>
</td>
</tr>
</table>
<br/><br/>
Options not demonstrated:
<ul>
<li>authOptions</li>
<li>timeStamp</li>
<li>view</li>
</ul>
</div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>
<h1 style="font-size:16px">Azure Maps OpenLayers options</h1>
</legend>
This sample shows how the different options of Azure Maps tile layer can be used 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>