Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
197 lines (173 sloc) 7.17 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>Drawing toolbar 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 how the different options of the drawing toolbar change the user experience." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, drawing tools, drawing manager, toolbar, drawing toolbar" />
<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/0/atlas-drawing.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/drawing/0/atlas-drawing.min.js"></script>
<script type='text/javascript'>
var map, drawingManager, drawingToolbar;
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.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 until the map resources are ready.
map.events.add('ready', function () {
//Create a drawing toolbar.
drawingToolbar = new atlas.control.DrawingToolbar();
//Create an instance of the drawing manager and display the drawing toolbar.
drawingManager = new atlas.drawing.DrawingManager(map, {
toolbar: drawingToolbar
});
});
}
function setButtons(elm) {
var buttons = [];
for (var i = 0; i < elm.length; i++) {
if (elm.options[i].selected) {
buttons.push(elm.options[i].value);
}
}
drawingToolbar.setOptions({
buttons: buttons
});
}
function setNumColumns(elm) {
drawingToolbar.setOptions({
numColumns: parseInt(elm.value)
});
}
function styleToolbar(elm) {
drawingToolbar.setOptions({
style: elm.value
});
}
function positionToolbar(elm) {
drawingToolbar.setOptions({
position: elm.value
});
}
function showToolbar(elm) {
drawingToolbar.setOptions({
visible: elm.checked
});
}
function setContainerId(elm) {
var containerId = null;
if (elm.checked) {
containerId = 'test';
}
drawingToolbar.setOptions({
containerId: containerId
});
}
</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><h1 style="font-size:16px">Drawing toolbar options</h1></legend>
This sample shows how the different options of the drawing toolbar change the user experience.
<br /><br />
Double click, press "c", click the toolbar, or change drawing mode to complete drawing.
</fieldset>
<table>
<tr title="Specifies which buttons to display in the toolbar.">
<td>Buttons:</td>
<td>
<select onchange="setButtons(this)" multiple="multiple">
<option selected="selected">draw-point</option>
<option selected="selected">draw-line</option>
<option selected="selected">draw-polygon</option>
<option selected="selected">draw-rectangle</option>
<option selected="selected">draw-circle</option>
<option selected="selected">edit-geometry</option>
</select>
</td>
</tr>
<tr title="Specifies the number of columns to display the buttons with. ">
<td>Num columns:</td>
<td>
<select onchange="setNumColumns(this)">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option selected="selected">Infinity</option>
</select>
</td>
</tr>
<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>Position:</td>
<td>
<select onchange="positionToolbar(this)">
<option>bottom-left</option>
<option>bottom-right</option>
<option selected="selected">non-fixed</option>
<option>top-left</option>
<option>top-right</option>
</select>
</td>
</tr>
<tr title="The style of the control.">
<td>Style:</td>
<td>
<select onchange="styleToolbar(this)">
<option>dark</option>
<option selected="selected">light</option>
</select>
</td>
</tr>
<tr>
<td>Visible:</td>
<td><input type="checkbox" onclick="showToolbar(this)" checked="checked" /></td>
</tr>
<tr>
<td>Container ID:</td>
<td><input type="checkbox" onclick="setContainerId(this)" /> show in test area</td>
</tr>
</table>
<br/>
<fieldset style="width:320px;margin-bottom:10px;">
<legend><h1 style="font-size:16px">Test area</h1></legend>
<div id="test"></div>
</fieldset>
</div>
<div id="myMap"></div>
</body>
</html>
You can’t perform that action at this time.