Skip to content
Permalink
master
Switch branches/tags

AzureMapsGovCloudCodeSamples/AzureMapsCodeSamples/Image Layer/Image Layer Options.html

Go to file
 
 
Cannot retrieve contributors at this time
468 lines (413 sloc) 21.7 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Layer 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 the image layer affect rendering." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, image, raster, layer, ground overlay, groundoverlay" />
<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 src="../Common/scripts/clipboard.min.js"></script>
<script type='text/javascript'>
var map, imageLayer, defaultOptions, removeDefaults;
var coordinateRx = /^-?[0-9]+\.?[0-9]*\s*,+\s*-?[0-9]+\.?[0-9]*$/;
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', {
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 style control and add it to the map.
map.controls.add(new atlas.control.StyleControl({
style: 'dark',
mapStyles: 'all'
}), {
position: 'top-right'
});
//Create an image layer and add it to the map below the labels.
imageLayer = new atlas.layer.ImageLayer(getSourceOptions());
map.layers.add(imageLayer, 'labels');
defaultOptions = imageLayer.getOptions();
//Update the image layer with the options in the input fields.
updateImageLayer(true, true);
});
new ClipboardJS('.copyBtn');
}
function updateImageLayer(updateSource, updateView) {
var options = getInputOptions();
var source = getSourceOptions();
//Update all the options in the image layer.
if (updateSource) {
options = Object.assign(options, source);
map.layers.remove(imageLayer);
imageLayer = new atlas.layer.ImageLayer(options);
map.layers.add(imageLayer, 'labels');
if (updateView) {
//Update the map view based on the bounds of the coordinates.
map.setCamera({
bounds: atlas.data.BoundingBox.fromPositions(source.coordinates)
});
}
} else {
imageLayer.setOptions(options);
options = Object.assign(options, source);
}
document.getElementById('CodeOutput').value = JSON.stringify(options, null, '\t').replace(/\"([^(\")"]+)\":/g, "$1:");
}
function getSourceOptions() {
var coords;
if (document.getElementById('useBoundsRotation').checked) {
var north = parseFloat(document.getElementById('NorthBounds').value);
var south = parseFloat(document.getElementById('SouthBounds').value);
var east = parseFloat(document.getElementById('EastBounds').value);
var west = parseFloat(document.getElementById('WestBounds').value);
var rotation = parseFloat(document.getElementById('Rotation').value);
coords = atlas.layer.ImageLayer.getCoordinatesFromEdges(north, south, east, west, rotation);
} else {
coords = [
parseCoordinate('TopLeft', 'top left'),
parseCoordinate('TopRight', 'top right'),
parseCoordinate('BottomRight', 'bottom right'),
parseCoordinate('BottomLeft', 'bottom left')
];
}
return {
url: document.getElementById('ImageUrl').value,
coordinates: coords
};
}
function getInputOptions() {
removeDefaults = document.getElementById('RemoveDefaults').checked;
return {
contrast: getPropertyValue('contrast', parseFloat(document.getElementById('Contrast').value)),
fadeDuration: getPropertyValue('fadeDuration', parseFloat(document.getElementById('FadeDuration').value)),
hueRotation: getPropertyValue('hueRotation', parseFloat(document.getElementById('HueRotation').value)),
maxBrightness: getPropertyValue('maxBrightness', parseFloat(document.getElementById('MaxBrightness').value)),
minBrightness: getPropertyValue('minBrightness', parseFloat(document.getElementById('MinBrightness').value)),
opacity: getPropertyValue('opacity', parseFloat(document.getElementById('Opacity').value)),
saturation: getPropertyValue('saturation', parseFloat(document.getElementById('Saturation').value)),
minZoom: getPropertyValue('minZoom', parseFloat(document.getElementById('MinZoom').value)),
maxZoom: getPropertyValue('maxZoom', parseFloat(document.getElementById('MaxZoom').value)),
visible: getPropertyValue('visible', document.getElementById('Visible').checked)
};
return Object.assign(layerOptions, sourceOptions);
}
function parseCoordinate(elmId, name) {
var query = document.getElementById(elmId).value;
if (coordinateRx.test(query)) {
var vals = query.split(',');
return [parseFloat(vals[0]), parseFloat(vals[1])];
}
alert('Invalid coordinate for ' + name + ' corner of image.');
return null;
}
function getPropertyValue(propertyName, value) {
if (removeDefaults && defaultOptions[propertyName] === value) {
return undefined;
}
return value;
}
function getSelectValue(id) {
var elm = document.getElementById(id);
return elm.options[elm.selectedIndex].value;
}
function toggleCoordInput() {
if (document.getElementById('useBoundsRotation').checked) {
document.getElementById('boundsRotationOptions').style.display = '';
document.getElementById('coordinateOptions').style.display = 'none';
} else {
document.getElementById('coordinateOptions').style.display = '';
document.getElementById('boundsRotationOptions').style.display = 'none';
}
}
function openTab(elm, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
elm.className += " active";
}
</script>
<style>
#myMap {
position: relative;
width: calc(100% - 375px);
min-width:290px;
height: 600px;
float: left;
}
.sidePanel {
width: 325px;
height: 580px;
float: left;
margin-right: 10px;
}
#CodeOutput {
width: 300px;
height: 400px;
overflow-y: auto;
}
.copyBtn {
float: right;
}
table td:nth-of-type(1) {
width: 130px;
}
table td:nth-of-type(2) {
width: 200px;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 6px 8px;
transition: 0.3s;
font-size: 14px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body onload="GetMap()">
<fieldset class="sidePanel">
<legend><h1 style="font-size:16px">Image Layer Options</h1></legend>
This sample shows how the different options of the image layer affect rendering.
<br /><br />
<div class="tab">
<button class="tablinks active" onclick="openTab(this, 'StyleOptions')">Base Options</button>
<button class="tablinks" onclick="openTab(this, 'MediaOptions')">Media Options</button>
<button class="tablinks" onclick="openTab(this, 'ImageSource')">Image Source</button>
<button class="tablinks" onclick="openTab(this, 'Code')">Code</button>
</div>
<div id="StyleOptions" class="tabcontent" style="display:block;">
<table>
<tr title="An integer specifying the minimum zoom level to render the layer at.">
<td>Min Zoom:</td>
<td>
<form oninput="minz.value=MinZoom.value">
<input type="range" id="MinZoom" value="0" min="0" max="24" step="1" oninput="updateImageLayer()" onchange="updateImageLayer()" />
<output name="minz" for="MinZoom">0</output>
</form>
</td>
</tr>
<tr title="An integer specifying the maximum zoom level to render the layer at.">
<td>Max Zoom:</td>
<td>
<form oninput="maxz.value=MaxZoom.value">
<input type="range" id="MaxZoom" value="24" min="0" max="24" step="1" oninput="updateImageLayer()" onchange="updateImageLayer()" />
<output name="maxz" for="MaxZoom">24</output>
</form>
</td>
</tr>
<tr title="Specifies if the layer is visible or not.">
<td>Visible:</td>
<td><input id="Visible" type="checkbox" onclick="updateImageLayer()" checked="checked" /></td>
</tr>
</table>
<p>
In addition to the options in this tool, the ImageLayer also has options for;
</p>
</div>
<div id="MediaOptions" class="tabcontent">
<table>
<tr title="The duration in milliseconds of a fade-in transition when changing visibility of the image layer. ">
<td>Fade Duration</td>
<td>
<form oninput="fadeDuration.value=FadeDuration.value">
<input type="range" id="FadeDuration" value="300" min="0" max="1000" step="100" oninput="updateImageLayer()" onchange="updateImageLayer()" />
<output name="fadeDuration" for="FadeDuration">300</output>
</form>
</td>
</tr>
<tr title="A number between 0 and 1 that indicates the opacity at which the overlay will be drawn.">
<td>Opacity</td>
<td>
<form oninput="opacity.value=Opacity.value">
<input type="range" id="Opacity" value="1" min="0" max="1" step="0.1" oninput="updateImageLayer()" onchange="updateImageLayer()" />
<output name="opacity" for="Opacity">1</output>
</form>
</td>
</tr>
<tr title="A number between -1 and 1 that increases or decreases the contrast of the overlay.">
<td>Contrast</td>
<td>
<form oninput="contrast.value=Contrast.value">
<input type="range" id="Contrast" value="0" min="-1" max="1" step="0.1" oninput="updateImageLayer()" onchange="updateImageLayer()" />
<output name="contrast" for="Contrast">0</output>
</form>
</td>
</tr>
<tr title="Rotates hues around the color wheel. A number in degrees.">
<td>Hue Rotation</td>
<td>
<form oninput="hueRotation.value=HueRotation.value">
<input type="range" id="HueRotation" value="0" min="0" max="360" step="1" oninput="updateImageLayer()" onchange="updateImageLayer()" />
<output name="hueRotation" for="HueRotation">0</output>
</form>
</td>
</tr>
<tr title="A number between 0 and 1 that increases or decreases the maximum brightness of the overlay.">
<td>Max Brightness</td>
<td>
<form oninput="maxBrightness.value=MaxBrightness.value">
<input type="range" id="MaxBrightness" value="1" min="0" max="1" step="0.1" oninput="updateImageLayer()" onchange="updateImageLayer()" />
<output name="maxBrightness" for="MaxBrightness">1</output>
</form>
</td>
</tr>
<tr title="A number between 0 and 1 that increases or decreases the minimum brightness of the overlay.">
<td>Min Brightness</td>
<td>
<form oninput="minBrightness.value=MinBrightness.value">
<input type="range" id="MinBrightness" value="0" min="0" max="1" step="0.1" oninput="updateImageLayer()" onchange="updateImageLayer()" />
<output name="minBrightness" for="MinBrightness">0</output>
</form>
</td>
</tr>
<tr title="A number between -1 and 1 that increases or decreases the saturation of the overlay.">
<td>Saturation</td>
<td>
<form oninput="saturation.value=Saturation.value">
<input type="range" id="Saturation" value="0" min="-1" max="1" step="0.1" oninput="updateImageLayer()" onchange="updateImageLayer()" />
<output name="saturation" for="Saturation">0</output>
</form>
</td>
</tr>
</table>
</div>
<div id="ImageSource" class="tabcontent">
<table>
<tr title="URL to an image to overlay. Images hosted on other domains must have CORs enabled.">
<td>Image Url:</td>
<td>
<input type="text" id="ImageUrl" value="../Common/images/image-overlays/Foto_a%C3%A9rea_de_Una%C3%AD_detalhando_o_c%C3%B3rrego_Canabrava_3.jpg" />
</td>
</tr>
<tr>
<td colspan="2">
<input id="useBoundsRotation" type="checkbox" onclick="toggleCoordInput()"/> Use bounds and rotation<br />
<table id="boundsRotationOptions" style="display:none">
<tr><td colspan="2"><b>Bounds:</b></td><td></td></tr>
<tr title="The northern most coordinate of the bounds.">
<td>&nbsp;&nbsp;&nbsp;North:</td>
<td>
<input type="number" id="NorthBounds" min="-85.0511" max="85.0511" value="-16.365232" />
</td>
</tr>
<tr title="The sothern most coordinate of the bounds.">
<td>&nbsp;&nbsp;&nbsp;South:</td>
<td>
<input type="number" id="SouthBounds" min="-85.0511" max="85.0511" value="-16.367425" />
</td>
</tr>
<tr title="The eastern most coordinate of the bounds.">
<td>&nbsp;&nbsp;&nbsp;East:</td>
<td>
<input type="number" id="EastBounds" min="-180" max="180" value="-46.893370" />
</td>
</tr>
<tr title="The western most coordinate of the bounds.">
<td>&nbsp;&nbsp;&nbsp;West:</td>
<td>
<input type="number" id="WestBounds" min="-180" max="180" value="-46.896867" />
</td>
</tr>
<tr title="The rotation of the image.">
<td><b>Rotation:</b></td>
<td>
<form oninput="rotation.value=Rotation.value">
<input type="range" id="Rotation" value="298" min="0" max="360" step="1" /> <!--oninput="updateImageLayer(true)" onchange="updateImageLayer(true)" />-->
<output name="rotation" for="Rotation">298</output>
</form>
</td>
</tr>
</table>
<table id="coordinateOptions">
<tr><td colspan="2"><b>Corner Position:</b></td><td></td></tr>
<tr title="The coordinate of the top left corner of the image.">
<td>&nbsp;&nbsp;&nbsp;Top Left:</td>
<td>
<input type="text" id="TopLeft" value="-46.896948,-16.367295" />
</td>
</tr>
<tr title="The coordinate of the top right corner of the image.">
<td>&nbsp;&nbsp;&nbsp;Top Right:</td>
<td>
<input type="text" id="TopRight" value="-46.895306,-16.364333" />
</td>
</tr>
<tr title="The coordinate of the bottom right corner of the image.">
<td>&nbsp;&nbsp;&nbsp;Bottom Right:</td>
<td>
<input type="text" id="BottomRight" value="-46.893289,-16.365362" />
</td>
</tr>
<tr title="The coordinate of the bottom left corner of the image.">
<td>&nbsp;&nbsp;&nbsp;Bottom Left:</td>
<td>
<input type="text" id="BottomLeft" value="-46.894930,-16.368324" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Update Image Source" onclick="updateImageLayer(true, true);" /></td>
</tr>
</table>
</div>
<div id="Code" class="tabcontent">
<textarea id="CodeOutput"></textarea><br /><br />
<input id="RemoveDefaults" type="checkbox" onclick="updateImageLayer()" checked="checked" /> Remove defaults
<button class="copyBtn" data-clipboard-target="#CodeOutput">Copy to clipboard</button>
</div>
</fieldset>
<div id="myMap"></div>
</body>
</html>