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/REST Services/Get elevation at position.html

Go to file
 
 
Cannot retrieve contributors at this time
138 lines (113 sloc) 6.41 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<title>Get elevation at position - 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 get the elevation for individual positions on the map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, services, module, elevation, elevations" />
<meta name="author" content="Microsoft Azure Maps" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script type='text/javascript'>
var map, popup;
var elevationPointUrl = 'https://{azMapsDomain}/elevation/point/json?api-version=1.0&points={points}';
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
atlas.setDomain('atlas.azure.us');
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-122.335, 47.608],
zoom: 12,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//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>'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a popup but leave it closed so we can update and display it later.
popup = new atlas.Popup({
pixelOffset: [0, -18]
});
//Create a draggable HTML marker.
var marker = new atlas.HtmlMarker({
draggable: true,
position: [0, 0],
position: map.getCamera().center
});
//Add a drag start event to hide the popup.
map.events.add('dragstart', marker, popup.close);
//Add a drag end event to get the position of the marker, then request the elevation and display it in the popup.
map.events.add('dragend', marker, function () {
var pos = marker.getOptions().position;
//Show loading icon.
document.getElementById('loadingIcon').style.display = '';
processRequest(elevationPointUrl.replace('{points}', pos.join(','))).then(response => {
if (response.error) {
alert(response.error.message);
return;
}
popup.setOptions({
position: pos,
content: `<div style="padding:10px">Elevation: ${response.data[0].elevationInMeter}m</div>`
});
popup.open(map);
//Hide loading icon.
document.getElementById('loadingIcon').style.display = 'none';
});
});
//Add the marker to the map.
map.markers.add(marker);
});
}
function processRequest(url) {
//This is a reusable function that sets the Azure Maps platform domain, sings the request, and makes use of any transformRequest set on the map.
return new Promise((resolve, reject) => {
//Replace the domain placeholder to ensure the same Azure Maps cloud is used throughout the app.
url = url.replace('{azMapsDomain}', atlas.getDomain());
//Get the authentication details from the map for use in the request.
var requestParams = map.authentication.signRequest({ url: url });
//Transform the request.
var transform = map.getServiceOptions().tranformRequest;
if (transform) {
requestParams = transform(url);
}
fetch(requestParams.url, {
method: 'GET',
mode: 'cors',
headers: new Headers(requestParams.headers)
})
.then(r => r.json(), e => reject(e))
.then(r => {
resolve(r);
}, e => reject(e));
});
}
</script>
</head>
<body onload='GetMap()'>
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div style="position:absolute;top:0px;left:calc(50% - 100px);background-color:white;padding:5px;">Drag marker to get elevation.</div>
<img id="loadingIcon" src="../Common/images/loadingIcon.gif" title="Loading" style="position:absolute;left:calc(50% - 25px);top:250px;display:none;" />
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Get elevation at position</h1></legend>
This sample shows how to get the elevation for individual positions on the map. Drag the marker to retrieve a new elevation.
Elevation data from the <a href="https://docs.microsoft.com/azure/azure-maps/how-to-request-elevation-data" target="_blank">Azure Maps Elevation services</a> © DLR 2011-2014 / © Airbus 2021.
</fieldset>
</body>
</html>