<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- 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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/clipboard.min.js"></script>
<script type='text/javascript'>
var map, defaultOptions, removeDefaults;
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
view: 'Auto',
//Add your Azure Maps subscription client ID to the map SDK. Get an Azure Maps client ID at https://azure.com/maps
authOptions: {
authType: "anonymous",
clientId: "04ec075f-3827-4aed-9975-d56301a2d663", //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.net/Common/TokenService.ashx";
fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
}
}
});
//Wait until the map resources are ready.
map.events.add('ready', function() {
defaultOptions = map.getStyle();
//Update the map with the options in the input fields.
updateStyles();
});
new ClipboardJS('.copyBtn');
}
function updateStyles() {
var options = getInputOptions();
//Update the maps style options.
map.setStyle(options);
document.getElementById('CodeOutput').value = JSON.stringify(options, null, '\t').replace(/\"([^(\")"]+)\":/g, "$1:");
}
function getInputOptions() {
removeDefaults = document.getElementById('RemoveDefaults').checked;
var light = {};
var a = getSelectValue('anchor');
if (!removeDefaults || a !== 'map') {
light.anchor = a;
}
var c = document.getElementById('color').value.toUpperCase();
if (!removeDefaults || c !== '#FFFFFF') {
light.color = c;
}
var int = parseFloat(document.getElementById('intensity').value);
if (!removeDefaults || int !== 0.5) {
light.intensity = int;
}
var r = parseFloat(document.getElementById('RadialCoordinate').value);
var az = parseFloat(document.getElementById('AzimuthalAngle').value);
var pa = parseFloat(document.getElementById('PolarAngle').value);
if (!removeDefaults || r !== defaultOptions.light.position[0] || az !== defaultOptions.light.position[1] || pa !== defaultOptions.light.position[2]) {
light.position = [r, az, pa];
}
return {
autoResize: getPropertyValue('autoResize', document.getElementById('autoResize').checked),
renderWorldCopies: getPropertyValue('renderWorldCopies', document.getElementById('renderWorldCopies').checked),
showBuildingModels: getPropertyValue('showBuildingModels', document.getElementById('showBuildingModels').checked),
showFeedbackLink: getPropertyValue('showFeedbackLink', document.getElementById('showFeedbackLink').checked),
showLogo: getPropertyValue('showLogo', document.getElementById('showLogo').checked),
showTileBoundaries: getPropertyValue('showTileBoundaries', document.getElementById('showTileBoundaries').checked),
style: getPropertyValue('style', getSelectValue('style')),
light: (Object.keys(light).length > 0) ? light : undefined
};
}
function getPropertyValue(propertyName, value) {
if (removeDefaults) {
if (propertyName.indexOf('.') > -1) {
var p = propertyName.split('.');
var val = defaultOptions;
for (var i = 0; i < p.length; i++) {
val = val[p[i]];
}
if (val === value) {
return undefined;
}
} else if (defaultOptions[propertyName] === value) {
return undefined;
}
}
return value;
}
function getSelectValue(id) {
var elm = document.getElementById(id);
return elm.options[elm.selectedIndex].value;
}
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>
html,
body {
padding: 0;
margin: 0;
height: 100%
}
#myMap {
position: relative;
width: calc(100% - 365px);
height: 100%;
float: left;
}
.sidePanel {
width: 325px;
height: 580px;
float: left;
margin-right: 10px;
}
#CodeOutput {
width: 290px;
height: 390px;
overflow-y: auto;
}
.copyBtn {
float: right;
}
.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;
height: 440px;
overflow-y: auto;
}
</style>
</head>
<body onload="GetMap()">
<fieldset class="sidePanel">
<legend>
<h1 style="font-size:16px">Map style options</h1>
</legend>
This sample shows how the different style options of the map affect rendering.
<br /><br />
<div class="tab">
<button class="tablinks active" onclick="openTab(this, 'MapStyleOptions')">Style Options</button>
<button class="tablinks" onclick="openTab(this, 'LightingOptions')">Lighting Options</button>
<button class="tablinks" onclick="openTab(this, 'Code')">Code</button>
</div>
<div id="MapStyleOptions" class="tabcontent" style="display:block;">
<table>
<tr title="If true the map will automatically resize whenever the window's size changes. Otherwise map.resize() must be called.">
<td>Auto resize:</td>
<td><input id="autoResize" type="checkbox" onclick="updateStyles()" checked="checked" /></td>
</tr>
<tr title="Specifies if multiple copies of the world should be rendered when zoomed out. ">
<td>Render world copies:</td>
<td><input id="renderWorldCopies" type="checkbox" onclick="updateStyles()" checked="checked" /></td>
</tr>
<tr title="Specifies if buildings will be rendered with their models. If false all buildings will be rendered as just their footprints.">
<td>Show building models:</td>
<td><input id="showBuildingModels" type="checkbox" onclick="updateStyles()" /></td>
</tr>
<tr title="Specifies if the feedback link should be displayed on the map or not.">
<td>Show feedback link:</td>
<td><input id="showFeedbackLink" type="checkbox" onclick="updateStyles()" checked="checked" /></td>
</tr>
<tr title="Specifies if the Microsoft logo should be hidden or not. If set to true a Microsoft copyright string will be added to the map.">
<td>Show logo:</td>
<td><input id="showLogo" type="checkbox" onclick="updateStyles()" checked="checked" /></td>
</tr>
<tr title="Specifies if the map should render an outline around each tile and the tile ID. These tile boundaries are useful for debugging. The uncompressed file size of the first vector source is drawn in the top left corner of each tile, next to the tile ID. ">
<td>Show tile boundaries:</td>
<td><input id="showTileBoundaries" type="checkbox" onclick="updateStyles()" /></td>
</tr>
<tr title="The name of the style to use when rendering the map. Available styles can be found in the supported styles article.">
<td>Style:</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<select id="style" onchange="updateStyles()">
<option value="blank">blank</option>
<option value="blank_accessible">blank_accessible</option>
<option value="grayscale_dark">grayscale_dark</option>
<option value="grayscale_light">grayscale_light</option>
<option value="high_contrast_dark">high_contrast_dark</option>
<option value="night">night</option>
<option value="road" selected="selected">road</option>
<option value="road_shaded_relief">road_shaded_relief</option>
<option value="satellite">satellite</option>
<option value="satellite_road_labels">satellite_road_labels</option>
</select>
</td>
</tr>
</table>
<p>
In addition to the options in this tool, the map also supports the following style options;
<ul>
<li>preserveDrawingBuffer - allows the map canvas to be exported as an image.</li>
<li>language - the language of the map.</li>
<li>view - the geopolical region view to align with.</li>
</ul>
</p>
</div>
<div id="LightingOptions" class="tabcontent">
The following are style options for lighting used for shading building models and extruded polygons.
<br /> <br />
<table>
<tr title="Specifies wether extruded geometries are lit relative to the map or viewport.">
<td>Anchor:</td>
<td>
<select id="anchor" onchange="updateStyles()">
<option value="map" selected="selected">map</option>
<option value="viewport">viewport</option>
</select>
</td>
</tr>
<tr title="The color of the light.">
<td>Color:</td>
<td><input type="color" id="color" value="#FFFFFF" onchange="updateStyles()" /></td>
</tr>
<tr title="Intensity of lighting (on a scale from 0 to 1). Higher numbers will present as more extreme contrast.">
<td>Intensity:</td>
<td>
<form oninput="int.value=intensity.value">
<input type="range" id="intensity" value="0.5" min="0" max="1" step="0.1" oninput="updateStyles()" onchange="updateStyles()" />
<output name="int" for="intensity">0.5</output>
</form>
</td>
</tr>
<tr title="Position of the light source relative to lit (extruded) geometries, in [r radial coordinate, a azimuthal angle, p polar angle].">
<td colspan="2">Position:</td>
</tr>
<tr title="Indicates the distance from the center of the base of an object to its light.">
<td> Radial coordinate:</td>
<td>
<form oninput="r.value=RadialCoordinate.value">
<input type="range" id="RadialCoordinate" value="1.15" min="0" max="3.5" step="0.05" oninput="updateStyles()" onchange="updateStyles()" />
<output name="r" for="RadialCoordinate">1.15</output>
</form>
</td>
</tr>
<tr title="Indicates the position of the light relative to 0° (0° when light.anchor is set to viewport corresponds to the top of the viewport, or 0° when light.anchor is set to map corresponds to due north, and degrees proceed clockwise).">
<td> Azimuthal angle</td>
<td>
<form oninput="az.value=AzimuthalAngle.value">
<input type="range" id="AzimuthalAngle" value="210" min="0" max="360" step="1" oninput="updateStyles()" onchange="updateStyles()" />
<output name="az" for="AzimuthalAngle">210</output>
</form>
</td>
</tr>
<tr title="Indicates the height of the light (from 0°, directly above, to 180°, directly below).">
<td> Polar angle:</td>
<td>
<form oninput="pa.value=PolarAngle.value">
<input type="range" id="PolarAngle" value="30" min="0" max="180" step="1" oninput="updateStyles()" onchange="updateStyles()" />
<output name="pa" for="PolarAngle">30</output>
</form>
</td>
</tr>
</table>
</div>
<div id="Code" class="tabcontent">
<textarea id="CodeOutput"></textarea><br /><br />
<input id="RemoveDefaults" type="checkbox" onclick="updateStyles()" checked="checked" /> Remove defaults
<button class="copyBtn" data-clipboard-target="#CodeOutput">Copy to clipboard</button>
</div>
</fieldset>
<div id="myMap"></div>
</body>
</html>
!
