var datasource, popup;

//Define an HTML template for a custom popup content laypout.
var popupTemplate = '<div class="customInfobox"><div class="name">{name}</div>{description}</div>';

//Initialize a map instance.
var map = new atlas.Map('map', {
  center: [-122.33, 47.641],
  zoom: 13,
  view: "Auto",
  //Add your Azure Maps subscription key 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, r accessing your Azure Maps accountmap) {
      //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 data source and add it to the map.
  datasource = new atlas.source.DataSource(null, {
    cluster: true
  });
  map.sources.add(datasource);

  //Create three point features on the map and add some metadata in the properties which we will want to display in a popup.
  var point1 = new atlas.data.Feature(new atlas.data.Point([-122.33, 47.64]), {
    name: 'Point 1 Title',
    description: 'This is the description 1.'
  });

  var point2 = new atlas.data.Feature(new atlas.data.Point([-122.335, 47.645]), {
    name: 'Point 2 Title',
    description: 'This is the description 2.'
  });

  var point3 = new atlas.data.Feature(new atlas.data.Point([-122.325, 47.635]), {
    name: 'Point 3 Title',
    description: 'This is the description 3.'
  });

  //Add the symbol to the data source.
  datasource.add([point1, point2, point3]);

  //Add a layer for rendering point data as symbols.
  var symbolLayer = new atlas.layer.SymbolLayer(datasource, null, {
    iconOptions: {
      image: 'pin-red'
    }
  });
  map.layers.add(symbolLayer);

  //Create a popup but leave it closed so we can update it and display it later.
  popup = new atlas.Popup({
    pixelOffset: [0, -18]
  });

  //Add a click event to the symbol layer.
  map.events.add('click', symbolLayer, symbolClicked);
});

function symbolClicked(e) {
  //Make sure the event occured on a point feature.
  if (e.shapes && e.shapes.length > 0) {
    var content, coordinate;

    //Check to see if the first value in the shapes array is a Point Shape.
    if (e.shapes[0] instanceof atlas.Shape && e.shapes[0].getType() === 'Point') {
      var properties = e.shapes[0].getProperties();
      content = popupTemplate.replace(/{name}/g, properties.name).replace(/{description}/g, properties.description);
      coordinate = e.shapes[0].getCoordinates();
    } else if (e.shapes[0].type === 'Feature' && e.shapes[0].geometry.type === 'Point') {

      //Check to see if the feature is a cluster.
      if (e.shapes[0].properties.cluster) {
        content = '<div style="padding:10px;">Cluster of ' + e.shapes[0].properties.point_count + ' symbols</div>';
      } else {
        //Feature is likely from a VectorTileSource.
        content = popupTemplate.replace(/{name}/g, properties.name).replace(/{description}/g, properties.description);
      }

      coordinate = e.shapes[0].geometry.coordinates;
    }

    if (content && coordinate) {
      //Populate the popupTemplate with data from the clicked point feature.
      popup.setOptions({
        //Update the content of the popup.
        content: content,

        //Update the position of the popup with the symbols coordinate.
        position: coordinate
      });

      //Open the popup.
      popup.open(map);
    }
  }
}