<html>
<head>
    <title></title>

    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Leaflet JS map control resources. -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  
  <!-- Add reference to the Azure Maps Leaflet plugin. -->
  <script src="https://assets.codepen.io/1717245/azure-maps-leaflet.min.js"></script>
</head>
<body>
    <div id="myMap"></div>
</body>
</html>
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#myMap {
  width: 100%;
  height: 100%;
}

//Create a map instance.
var map = L.map('myMap', {
  center: [0, 0],
  zoom: 2
});  

//Add authentication details for connecting to Azure Maps.
var authOptions = {
  //Use Azure Active Directory authentication.
  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));
  }

  //Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
  //authType: 'subscriptionKey',
  //subscriptionKey: '<Your Azure Maps Key>'
};

//Use the static function for creating Azure Maps tile layer easily.
L.tileLayer.azureMaps({ authOptions: authOptions }).addTo(map)

/*
    //Alternatively, create an instance of the Azure Maps Tile Layer and add it to the map.
    var layer = new L.TileLayer.AzureMaps({
      authOptions: authOptions,
      tilesetId: 'fr-FR',
      language: 'fr-FR'
    });
    map.addLayer(layer);
  */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.