<html>
   <!-- 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>
   <body>
      <div class="sidePanel">
         <fieldset style="width:310px;margin-bottom:10px;">
            <legend>Drawing manager options</legend>
            This sample shows how the different options of the drawing manager change the user experience.
            <br/><br/>
            Double click, press "c", click the toolbar, or change drawing mode to complete drawing.
         </fieldset>
         <h3>Drawing manager Options</h3>
         <table>
            <tr>
               <td>Show toolbar:</td>
               <td><input type="checkbox" onclick="showToolbar(this)" checked="checked" /></td>
            </tr>
            <tr title="Specifies mode the drawing manager is in.">
               <td>Drawing mode:</td>
               <td>
                 <select onchange="updateDraiwngMode(this)">
                        <option>draw-point</option>
                        <option>draw-line</option>
                        <option>draw-polygon</option>
                        <option>draw-circle</option>
                        <option>draw-rectangle</option>
                        <option>edit-geometry</option>
                        <option>erase-geometry</option>
                        <option selected="selected">idle</option>
                    </select>
               </td>
            </tr>
            <tr title="Specifies how the user can interact with the map to draw shapes.">
               <td>Interaction type:</td>
               <td>
                  <select onchange="updateInteractionType(this)">
                     <option>click</option>
                     <option>freehand</option>
                     <option selected="selected">hybrid</option>
                  </select>
               </td>
            </tr>
            <tr title="Specifies the minimum pixel distance the mouse must move before a new position is added to the shape when drawing freehand.">
               <td>Freehand Interval:</td>
               <td>
                  <select onchange="updateFreehandInterval(this)">
                     <option>1</option>
                     <option>2</option>
                     <option selected="selected">3</option>
                     <option>4</option>
                     <option>5</option>
                     <option>10</option>
                     <option>25</option>
                     <option>50</option>
                  </select>
               </td>
            </tr>
           
            <tr title="Specifies if shapes should be draggable when editting.">
                <td>Shape Dragging Enabled:</td>
                <td><input type="checkbox" onclick="updateShapeDragging(this)" checked="checked" /></td>
            </tr>
           
            <tr title="Specifies if shapes can be rotated when editting.">
                <td>Shape Rotation Enabled:</td>
                <td><input type="checkbox" onclick="updateShapeRotation(this)" checked="checked" /></td>
            </tr>
         </table>
      </div>
      <div id="map"></div>
   </body>
</html>
html,
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.sidePanel {
	width: 340px;
	height: 580px;
	float: left;
	margin: 10px;
}

#map {
	position: relative;
	width: calc(100% - 360px);
	min-width: 290px;
	height: 600px;
	float: left;
}
//Initialize a map instance.
var map = new atlas.Map('map', {
  center: [-73.985708, 40.75773],
  zoom: 12,
  view: "Auto",
  //Add your Azure Maps subscription client ID to the map SDK.
  authOptions: {
    authType: "anonymous",
    clientId: "04ec075f-3827-4aed-9975-d56301a2d663", //Your Azure Maps account Client ID is required to access 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() {

  //Create an instance of the drawing manager and display the drawing toolbar.
  drawingManager = new atlas.drawing.DrawingManager(map, {
    toolbar: new atlas.control.DrawingToolbar({
      position: 'top-right',
      style: 'light'
    }),
    //Specifies how the drawing action works. Can be 'click', 'freehand' or 'hybrid'. Default: 'hybrid'
    interactionType: 'hybrid',
    //Specifies the minimum pixel distance the mouse must move before a new position is added to the shape when drawing freehand. Default: 3
    //The smaller the value, the more detailed the drawing, but less performant.
    freehandInterval: 3
  });
});

function showToolbar(elm) {
  if (elm.checked) {
    drawingManager.setOptions({
      toolbar: new atlas.control.DrawingToolbar({
        position: 'top-right',
        style: 'light'
      })
    });
  } else {
    drawingManager.setOptions({
      toolbar: null
    });
  }
}

function updateDraiwngMode(elm) {
  drawingManager.setOptions({
    mode: elm.options[elm.selectedIndex].value
  });
}

function updateInteractionType(elm) {
  drawingManager.setOptions({
    interactionType: elm.options[elm.selectedIndex].value
  });
}

function updateFreehandInterval(elm) {
  drawingManager.setOptions({
    freehandInterval: parseInt(elm.options[elm.selectedIndex].value)
  });
}

function updateShapeDragging(elm) {
  drawingManager.setOptions({ shapeDraggingEnabled: elm.checked });
}

function updateShapeRotation(elm) {
  drawingManager.setOptions({ shapeRotationEnabled: elm.checked });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.