<!DOCTYPE html>
<html>
<head>
    <title></title>

    <meta charset="utf-8" />
	
	<!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
	<meta http-equiv="x-ua-compatible" content="IE=Edge" />

	<!-- Ensures the web page looks good on all screen sizes. -->
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- 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>
  
  <style>
    html, body {
      margin: 0;
    }
    
    #myMap {
      height: 100vh;
      width: 100vw;
    }
  </style>
</head>
<body>
    <div id="myMap"></div>
	
	<script type='text/javascript'>
      //URL to custom endpoint to fetch Access token
      var url = 'https://adtokens.azurewebsites.net/api/HttpTrigger1?code=dv9Xz4tZQthdufbocOV9RLaaUhQoegXQJSeQQckm6DZyG/1ymppSoQ==';
    
    	var map = new atlas.Map('myMap', {
    		center: [-122.33, 47.6],
    		zoom: 12,
    		language: 'en-US',
    		view: "Auto",
        //Add your Azure Maps subscription keyclient ID to the map SDK.
        authOptions: {
              authType: "anonymous",
              clientId: "35267128-0f1e-41de-aa97-f7a7ec8c2dbd",
              getToken: function(resolve, reject, map) {
                  fetch(url).then(function(response) {
                      return response.text();
                  }).then(function(token) {
                      resolve(token);
                  });
              }
    }
    	});
    </script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.