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/Elevations by bounding box.html

Go to file
 
 
Cannot retrieve contributors at this time
305 lines (250 sloc) 11.1 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<title>Elevation by bounding box - 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 elevations in a grid pattern with a bounding box." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, services, elevations, elevation, DEM" />
<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>
<!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>
<script type='text/javascript'>
var map, datasource, layer, drawingManager;
var elevationBoundsUrl = 'https://{azMapsDomain}/elevation/lattice/json?api-version=1.0&bounds={bounds}&rows={rows}&columns={columns}';
var maxSamples = 2000;
var colors = ['#006837', '#1a9850', '#66bd63', '#a6d96a', '#d9ef8b', '#ffffbf', '#fee08b', '#fdae61', '#f46d43', '#d73027', '#a50026'];
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: [-119.949, 46.53],
zoom: 12,
style: 'satellite',
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 data source for the route line.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create a layer for rendering the elevation points.
layer = new atlas.layer.BubbleLayer(datasource, null, {
color: [
'interpolate',
['linear'],
['get', 'elevation'],
400, '#006837',
450, '#1a9850',
500, '#66bd63',
550, '#a6d96a',
600, '#d9ef8b',
650, '#ffffbf',
700, '#fee08b',
750, '#fdae61',
800, '#f46d43',
850, '#d73027',
900, '#a50026'
],
//Don't outline the bubbles. This will make them blend together to create a heat map like visual.
strokeWidth: 0
});
map.layers.add(layer);
//Create an instance of the drawing manager and display the line drawing option of the drawing toolbar.
drawingManager = new atlas.drawing.DrawingManager(map, {
toolbar: new atlas.control.DrawingToolbar({
buttons: ['draw-rectangle'],
position: 'top-left',
style: 'light'
})
});
///Clear the map and drawing canvas when the user enters into a drawing mode.
map.events.add('drawingmodechanged', drawingManager, drawingModeChanged);
//Monitor for when a rectangle drawing has been completed.
map.events.add('drawingcomplete', drawingManager, getElevations);
});
}
function drawingModeChanged(mode) {
//Clear the drawing canvas and data source.
if (mode.startsWith('draw')) {
drawingManager.getSource().clear();
datasource.clear();
}
}
function getElevations(rectangle) {
//Exit drawing mode and clear the drawing canvas.
drawingManager.setOptions({ mode: 'idle' });
drawingManager.getSource().clear();
//Get the bounding box of the rectangle.
var bbox = rectangle.getBounds();
//Get the width and height of the bounding box in meters.
var nw = atlas.data.BoundingBox.getNorthWest(bbox);
var width = atlas.math.getDistanceTo(nw, atlas.data.BoundingBox.getNorthEast(bbox));
var height = atlas.math.getDistanceTo(nw, atlas.data.BoundingBox.getSouthWest(bbox));
//In this sample we want to create an evenly distributed grid, so aspect ratio will be used to determine the number of requires rows/columns.
var aspectRatio = width / height;
//The square root of the max number of samples, gives use the number of row/columns for a perfect square. Apply the square root of the aspect ratio to this to handle rectangles.
var numRows = Math.floor(Math.sqrt(maxSamples / aspectRatio));
var numColumns = Math.floor(Math.sqrt(maxSamples * aspectRatio));
//Format line coordinates as "SouthwestCorner_Longitude,SouthwestCorner_Latitude,NortheastCorner_Longitude,NortheastCorner_Latitude"
var bounds = bbox.join(',');
var url = elevationBoundsUrl.replace('{bounds}', bounds).replace('{rows}', numRows).replace('{columns}', numColumns);
//Show loading icon.
document.getElementById('loadingIcon').style.display = '';
processRequest(url).then(response => {
if (response.error) {
alert(response.error.message);
return;
}
var points = [];
var minElv = Infinity;
var maxElv = -Infinity;
//Loop through the elevations, create point features with an elevation property and calculate min/max elevation.
response.data.forEach(c => {
points.push(new atlas.data.Feature(new atlas.data.Point([c.coordinate.longitude, c.coordinate.latitude]), {
elevation: c.elevationInMeter
}));
if (c.elevationInMeter < minElv) {
minElv = c.elevationInMeter;
}
if (c.elevationInMeter > maxElv) {
maxElv = c.elevationInMeter;
}
});
//Calculate a new style expression based on the
updateStyle(minElv, maxElv);
//Overwrite the points to the data source.
datasource.setShapes(points);
//Hide loading icon.
document.getElementById('loadingIcon').style.display = 'none';
});
}
function updateStyle(minElv, maxElv) {
//Get the difference between min/max elevation.
var de = maxElv - minElv;
//If the difference is 0, set de to 1 to prevent devide by zero issues.
if (de === 0) {
de = 1;
}
var elvStep = de / colors.length;
var exp = [
'interpolate', //This will cause the colors from each data point to create a gradient between points.
['linear'],
['get', 'elevation'],
];
for (var i = 0; i < colors.length; i++) {
//Set the elevation interval and its color.
exp.push(minElv + elvStep * i, colors[i]);
}
layer.setOptions({ color: exp });
//Create legend, with highest value first.
//Determine a reasonable value to round by.
var roundFactor = (de < 10) ? 10 : 1;
var colorSquares = [];
var elvSteps = [];
for (var i = colors.length; i >= 0; i--) {
colorSquares.push(`<div class="colorSquare" style="background-color:${colors[i]}"></div>`);
elvSteps.push(`<div class="colorSquare">${Math.round((minElv + elvStep * i) * roundFactor) / roundFactor}m</div>`);
}
var legend = [
'<div style="font-size:14px;font-weight:bold;">Elevation</div><div style="float:left">',
...colorSquares,
'</div><div style="float:left;margin:9px 5px 0 5px;">',
...elvSteps,
'</div></div>'
];
document.getElementById('legend').innerHTML = legend.join('');
}
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>
<style>
#legend {
position: absolute;
top: 10px;
right: 10px;
background-color: white;
border-radius: 10px;
padding: 10px;
font-size: 11px;
}
.colorSquare {
width: 16px;
height: 16px;
text-align: center;
}
</style>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div id="legend">
<div style="font-size:14px;font-weight:bold;">Elevation</div>
<div style="float:left">
<div class="colorSquare" style="background-color:#d7191c"></div>
<div class="colorSquare" style="background-color:#fdae61"></div>
<div class="colorSquare" style="background-color:#ffffbf"></div>
<div class="colorSquare" style="background-color:#a6d96a"></div>
<div class="colorSquare" style="background-color:#1a9641"></div>
</div>
<div style="float:left;margin:9px 5px 0 5px;">
<div class="colorSquare">200m</div>
<div class="colorSquare">150m</div>
<div class="colorSquare">100m</div>
<div class="colorSquare">50m</div>
</div>
</div>
<div style="position:absolute;top:0px;left:calc(50% - 100px);background-color:white;padding:5px;">Draw rectangle on the map</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">Elevation by bounding box</h1></legend>
This sample shows how to get elevations in a grid pattern with a bounding box.
The color of each data point is set using a data-driven style based on the elevation value.
The style is dynamically scaled based on the
<br /><br />
<b>Modules used:</b> Drawing, Services<br /><br />
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>