JSFiddle - React, Tailwind, and code Playground

by Brian Houlihan

HTML

<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.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.js"></script>
   <body>
      <div class="sidePanel">
         <fieldset style="width:320px;margin-bottom:10px;">
            <legend>Get drawn shapes from drawing manager</legend>
            This sample shows how to get the shapes that have been drawn on the map using the grawing managers <b>drawingManager.getSource()</b> function.
         </fieldset>
         <input type="button" value="Get drawn shapes" onclick="getDrawnShapes()"/>
         <textarea id="CodeOutput"></textarea>
      </div>
      <div id="map"></div>
    <div id="drawingChanging">drawingChanging</div>
    <div id="drawingEnded">drawingEnded</div>
    <div id="drawingErased">drawingErased</div>
      <div id="drawingcomplete">drawingcomplete</div>
    <div id="polygonClick">polygonClick</div>
    <div id="drawingStarted">drawingStarted</div>
   </body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#map {
  position: relative;
  width: calc(100% - 360px);
  min-width: 290px;
  height: 600px;
  float: left;
}

.sidePanel {
  width: 350px;
  height: 580px;
  float: left;
  margin-right: 10px;
}

#CodeOutput {
  width: 340px;
  height: 450px;
  overflow-y: auto;
}

JavaScript

//Initialize a map instance.
var map = new atlas.Map('map', {
    center: [-73.97, 40.78],
    zoom: 12,
    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: 'subscriptionKey',
             subscriptionKey: 'm-PKCAc-sY-T7_ou5MlR640D7CHongB5j7hP4WWTk5c'
    }
});


//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({ buttons: ['draw-point','draw-polygon','edit-geometry'], position: 'top-right', style: 'dark' })
                });

  map.controls.add([new atlas.control.StyleControl(),new atlas.control.ZoomControl()], {
    position: "bottom-right"
  });
                
var dataSource = new atlas.source.DataSource();
  map.sources.add(dataSource);
  
  /*Create a rectangle*/
  var newShape = new atlas.Shape(
  new atlas.data.Polygon([[
   [-73.98235, 40.76799],
   [-73.95785, 40.80044],
   [-73.94928, 40.7968],
   [-73.97317, 40.76437],
   [-73.98235, 40.76799]
   ]])
   );
  dataSource.add(newShape);
  //drawingManager.source.shapes.push(newShape);
  
  /*Create and add a polygon layer to render the polygon to the map*/
  map.layers.add(new atlas.layer.PolygonLayer(dataSource, null,{
    fillColor: "red",
    fillOpacity: 0.7
  }), 'labels');
  
});

function getDrawnShapes() {
            var source = drawingManager.getSource();
            
            document.getElementById('CodeOutput').value = JSON.stringify(source.toJson(), null, ' ');
        }
        function highlight(id) {
        document.getElementById('CodeOutput').value = "here: "+id;
        //Highlight the mouse event div to indicate that the event has fired.
        document.getElementById(id).style.background = 'LightGreen';

       ...