AzureMaps

for Darling Polygons

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.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>
   <body>
      <div class="sidePanel">
         <fieldset style="width:320px;margin-bottom:10px;">
            Save the Polygon
         </fieldset>
         <input type="button" value="Save the Polygon" onclick="getDrawnShapes()"/>
      </div>
      <div id="map"></div>
   </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}

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

JavaScript

//Initialize a map instance.
var map = new atlas.Map('map', {
    center: [-96.808891, 32.779167],
    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: 'i170CZOYVvaFwUNskwXzKkhBvYbt2SHpxv7XFLxg3Kc'
    }
});

//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' })
                });
map.events.add('drawingcomplete', drawingManager, function (shape) {  //alert("polygon: "+polygon.getType()); 
                 //highlight('drawingcomplete'); 
                 var polygon = shape.toJson().geometry;
                 map.events.add('click', polygon, function () { selectThePolygon('polygonClick'); });
                 });
  
});

function getDrawnShapes() {
            var source = drawingManager.getSource();
            
            var polygonjson = JSON.stringify(source.toJson(), null, '    ');
        }