Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

182 lines (163 sloc) 7.55 KB
<!DOCTYPE html>
<html>
<head>
<title>Map Navigation Control Options - Azure Maps Web SDK Samples</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" />
<meta name="description" content="This sample shows all the map navigation controls on the map and how they react with different option settings." />
<meta name="keywords" content="maps, map, API, SDK, GIS, navigation controls, pan, zoom, pitch, tilt, rotate, satellite, aerial, imagery" />
<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, controls = [];
function GetMap() {
//Initialize a map instance.
map = new atlas.Map("myMap", {
center: [-122.33, 47.6],
zoom: 12,
view: 'Auto',
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: '<Your Azure Maps Key>'
}
});
//Wait for map resources to be ready before loading controls.
map.events.add('ready', addControls);
}
function addControls() {
//Remove all controls on the map.
map.controls.remove(controls);
controls = [];
//Get input options.
var positionOption = getSelectValue('controlPosition');
var controlStyle = getSelectValue('controlStyle');
//Create a zoom control.
controls.push(new atlas.control.ZoomControl({
zoomDelta: parseFloat(getSelectValue('zoomControlDelta')),
style: controlStyle
}));
//Create a pitch control and add it to the map.
controls.push(new atlas.control.PitchControl({
pitchDegreesDelta: parseFloat(getSelectValue('pitchControlDelta')),
style: controlStyle
}));
//Create a compass control and add it to the map.
controls.push(new atlas.control.CompassControl({
rotationDegreesDelta: parseFloat(getSelectValue('compassControlRotationDelta')),
style: controlStyle
}));
//Create a style control and add it to the map.
controls.push(new atlas.control.StyleControl({
style: controlStyle
}));
//Add controls to the map.
map.controls.add(controls, {
position: positionOption
});
}
function getSelectValue(id) {
var elm = document.getElementById(id);
return elm.options[elm.selectedIndex].value;
}
</script>
<style>
.sidePanel {
width: 350px;
height: 580px;
float: left;
margin-right: 10px;
}
#myMap {
position: relative;
width: calc(100% - 360px);
min-width:290px;
height: 600px;
float: left;
}
</style>
</head>
<body onload="GetMap()">
<div class="sidePanel">
<fieldset style="width:320px;margin-bottom:10px;">
<legend>Map Navigation Control Options</legend>
This sample shows all the map navigation controls on the map and how they react with different option settings. <br /><br />
To test the zoom delta, simply press the zoom button to see how the map zoom per click changes, moving several levels at a time when the delta is greater than one. <br /><br />
To test the pitch and compass rotation deltas, hover over the appropriate control and use the addition buttons that appear to see how the new delta has changed the behavior of the button. <br /><br />
See the <a href="https://docs.microsoft.com/azure/azure-maps/map-add-controls" target="_blank">Add map controls</a> and <a href="https://docs.microsoft.com/azure/azure-maps/choose-map-style" target="_blank">Choose map style</a> documentation for more examples using the map navigation controls.
</fieldset>
<h3>Control Options</h3>
<table>
<tr title="The position the control will be placed on the map. If not specified, the control will be located at the default position it defines.">
<td>Control Position:</td>
<td>
<select id="controlPosition" onchange="addControls()">
<option>bottom-left</option>
<option>bottom-right</option>
<option>non-fixed</option>
<option>top-left</option>
<option selected="selected">top-right</option>
</select>
</td>
</tr>
<tr title="The style of the control.">
<td>Control Style:</td>
<td>
<select id="controlStyle" onchange="addControls()">
<option>dark</option>
<option selected="selected">light</option>
</select>
</td>
</tr>
<tr title="The extent to which the map will zoom with each click of the control.">
<td>Zoom Delta:</td>
<td>
<select id="zoomControlDelta" onchange="addControls()">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
</tr>
<tr title="The angle that the map will tilt with each click of the control.">
<td>Pitch Delta:</td>
<td>
<select id="pitchControlDelta" onchange="addControls()">
<option>5</option>
<option selected="selected">10</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
</select>
</td>
</tr>
<tr title="The angle that the map will rotate with each click of the control.">
<td>Compass Rotation Delta:</td>
<td>
<select id="compassControlRotationDelta" onchange="addControls()">
<option>5</option>
<option>10</option>
<option selected="selected">15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
</select>
</td>
</tr>
</table>
</div>
<div id="myMap"></div>
</body>
</html>
You can’t perform that action at this time.