var elevationPointUrl = 'https://{azMapsDomain}/elevation/point/json?api-version=1.0&points={points}';

var popup;

//Initialize a map instance.
var map = new atlas.Map('map', {
  center: [-73.985708, 40.75773],
  zoom: 12,
  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 but leave it closed so we can update and display it later.
  popup = new atlas.Popup({
    pixelOffset: [0, -18]
  });

  //Create a draggable HTML marker.
  var marker = new atlas.HtmlMarker({
    draggable: true,
    position: [0, 0],
    position: map.getCamera().center
  });

  //Add a drag start event to hide the popup.
  map.events.add('dragstart', marker, popup.close);

  //Add a drag end event to get the position of the marker, then request the elevation and display it in the popup.
  map.events.add('dragend', marker, function () {
    var pos = marker.getOptions().position;

    //Show loading icon.
    document.getElementById('loadingIcon').style.display = '';
    processRequest(elevationPointUrl.replace('{points}', pos.join(','))).then(response => {
      if (response.error) {
        alert(response.error.message);
        return;
      }

      popup.setOptions({
        position: pos,
        content: `<div style="padding:10px">Elevation: ${response.data[0].elevationInMeter}m</div>`
      });

      popup.open(map);

      //Hide loading icon.
      document.getElementById('loadingIcon').style.display = 'none';
    });
  });

  //Add the marker to the map.
  map.markers.add(marker);
});

function processRequest(url) {
  return new Promise((resolve, reject) => {
    //Replace the domain placeholder to ensure the same Azure Maps cloud is used throughout the app.
    url = url.replace('{azMapsDomain}', atlas.getDomain());

    //Get the authentication details from the map for use in the request.
    var requestParams = map.authentication.signRequest({ url: url });

    //Transform the request.
    var transform = map.getServiceOptions().tranformRequest;
    if (transform) {
      requestParams = transform(request);
    }

    fetch(requestParams.url, {
      method: 'GET',
      mode: 'cors',
      headers: new Headers(requestParams.headers)
    })
      .then(r => r.json(), e => reject(e))
      .then(r => {
      resolve(r);
    }, e => reject(e));
  });
}