<html>
<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>

<body>
  <div id="map"></div>
  
  <div id="eventPanel" style="position:absolute;top:0;left:0;background-color:white;padding:10px;"></div>

    <input type="button" value="Open Popup" onclick="openPopup()" style="position:absolute;top:10px;right:10px;"/>
</body>
</html>
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#map {
  width: 100%;
  height: 100%;
}
var popup, events = ['drag', 'dragstart', 'dragend', 'open', 'close'];

//Initialize a map instance.
var map = new atlas.Map('map', {
  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 a popup.
  popup = new atlas.Popup({
    content: '<div style="padding:10px;">Hello World</div>',
    position: [0, 0],
    draggable: true
  });

  popup.open(map);

  for (var i = 0; i < events.length; i++) {
    //Add the event to the popup.
    map.events.add(events[i], popup, highlight);

    //Add a div to highlight the event.
    document.getElementById('eventPanel').innerHTML += '<div id="' + events[i] + '">' + events[i] + '</div>';
  }
});

function highlight(e) {
  //Highlight the div to indicate that the event has fired.
  document.getElementById(e.type).style.background = 'LightGreen';

  //Remove the highlighting after a second.
  setTimeout(function () { document.getElementById(e.type).style.background = 'white'; }, 1000);
}

function openPopup() {
  popup.open(map);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.