DarlingAzureMaps

polygon for Darling

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

//URL to custom endpoint to fetch Access token
var url = 'https://adtokens.azurewebsites.net/api/HttpTrigger1?code=dv9Xz4tZQthdufbocOV9RLaaUhQoegXQJSeQQckm6DZyG/1ymppSoQ==';

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

function handleEvent(e) {
    console.log(e);
    console.log(e.position)
    }

//Wait until the map resources are ready.
map.events.add('ready', function () {
map.events.add('click', handleEvent);
//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 rectangular polygon.
dataSource.add(new atlas.Shape(
    new atlas.data.Polygon([[
        [
       -88.18287849950245,
       41.7056003575895
      ],
      [
       -88.16142082738304,
       41.69380876113263
      ],
      [
       -88.21137428807644,
       41.69585962887223
      ],
      [
       -88.20279121922894,
       41.704575087207246
      ],
      [
       -88.20261955785173,
       41.704575087207246
      ],
      [
       -88.18287849950245,
       41.7056003575895
      ]
    ]])
));
map.layers.add(new atlas.layer.PolygonLayer(dataSource, null,{
    fillColor: 'red',
    fillOpacity: 0.2
}), 'labels');

              ...