Get information from a coordinate

2025-04-14

This article shows how to make a reverse address search that shows the address of a selected popup ___location.

There are two ways to make a reverse address search. One way is to query the Reverse Address Search API through the TypeScript REST SDK @azure-rest/maps-search. The other way is to use the Fetch API to make a request to the Reverse Address Search API to find an address. どちらの方法もこの記事で説明します。

Make a reverse search request via REST SDK

import * as atlas from "azure-maps-control";
import MapsSearch from "@azure-rest/maps-search";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Use Azure Active Directory authentication.
      authType: "aad",
      clientId: "<Your Azure Maps Client ID>",
      aadAppId: "<Your Azure Active Directory Client ID>",
      aadTenant: "<Your Azure Active Directory Tenant ID>"
    }
  });

  map.events.add("load", async () => {
    // Use the access token from the map and create an object that implements the TokenCredential interface.
    const credential = {
      getToken: () => {
        return {
          token: map.authentication.getToken()
        };
      }
    };

    // Create a Search client.
    const client = MapsSearch(credential, "<Your Azure Maps Client ID>");

    // Update the style of mouse cursor to a pointer
    map.getCanvasContainer().style.cursor = "pointer";

    // Create a popup
    const popup = new atlas.Popup();

    // Upon a mouse click, open a popup at the selected ___location and render in the popup the address of the selected ___location
    map.events.add("click", async (e) => {
      const position = [e.position[1], e.position[0]];

      // Execute the reverse address search query and open a popup once a response is received
      const response = await client.path("/search/address/reverse/{format}", "json").get({
        queryParameters: { query: position }
      });

      // Get address data from response
      const data = response.body.addresses;

      // Construct the popup
      var popupContent = document.createElement("div");
      popupContent.classList.add("popup-content");
      popupContent.innerHTML = data.length !== 0 ? data[0].address.freeformAddress : "No address for that ___location!";
      popup.setOptions({
        position: e.position,
        content: popupContent
      });

      // Render the popup on the map
      popup.open(map);
    });
  });
};

document.body.onload = onload;

前のコード例では、最初のブロックはマップオブジェクトを構築し、Microsoft Entra ID を使用する認証メカニズムを設定します。 For more information, see Create a map.

2 番目のコードブロックは、アクセストークンを使用して Azure Maps への HTTP 要求を認証する TokenCredential インターフェイスを実装するオブジェクトを作成します。 It then passes the credential object to MapsSearch and creates an instance of the client.

The third code block updates the style of mouse cursor to a pointer and creates a popup object. For more information, see Add a popup on the map.

The fourth block of code adds a mouse click event listener. When triggered, it creates a search query with the coordinates of the selected point. It then makes a GET request to query the Get Search Address Reverse API for the address of the coordinates.

The fifth block of code sets up the HTML popup content to display the response address for the selected coordinate position.

The change of cursor, the popup object, and the click event are all created in the map's load event listener. This code structure ensures map fully loads before retrieving the coordinates information.

Make a reverse search request via Fetch API

Select a ___location on the map to make a reverse geocode request for that ___location using fetch.

import * as atlas from "azure-maps-control";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Use Azure Active Directory authentication.
      authType: "aad",
      clientId: "<Your Azure Maps Client ID>",
      aadAppId: "<Your Azure Active Directory Client ID>",
      aadTenant: "<Your Azure Active Directory Tenant ID>"
    }
  });

  map.events.add("load", async () => {
    // Update the style of mouse cursor to a pointer
    map.getCanvasContainer().style.cursor = "pointer";

    // Create a popup
    const popup = new atlas.Popup();

    // Upon a mouse click, open a popup at the selected ___location and render in the popup the address of the selected ___location
    map.events.add("click", async (e) => {
      //Send a request to Azure Maps reverse address search API
      let url = "https://atlas.microsoft.com/search/address/reverse/json?";
      url += "&api-version=1.0";
      url += "&query=" + e.position[1] + "," + e.position[0];

      // Process request
      fetch(url, {
        headers: {
          Authorization: "Bearer " + map.authentication.getToken(),
          "x-ms-client-id": "<Your Azure Maps Client ID>"
        }
      })
        .then((response) => response.json())
        .then((response) => {
          const popupContent = document.createElement("div");
          popupContent.classList.add("popup-content");
          const address = response["addresses"];
          popupContent.innerHTML =
            address.length !== 0 ? address[0]["address"]["freeformAddress"] : "No address for that ___location!";
          popup.setOptions({
            position: e.position,
            content: popupContent
          });
          // render the popup on the map
          popup.open(map);
        });
    });
  });
};

document.body.onload = onload;

前のコード例では、コードの最初のブロックがマップオブジェクトを構築し、Microsoft Entra ID を使用する認証メカニズムを設定します。手順については、「マップの作成」を参照してください。

The second block of code updates the style of the mouse cursor to a pointer. It instantiates a popup object. For more information, see Add a popup on the map.

The third block of code adds an event listener for mouse clicks. Upon a mouse click, it uses the Fetch API to query the Azure Maps Reverse Address Search API for the selected coordinates address. For a successful response, it collects the address for the selected ___location. It defines the popup content and position using the setOptions function of the popup class.

The change of cursor, the popup object, and the click event are all created in the map's load event listener. This code structure ensures the map fully loads before retrieving the coordinates information.

次の図は、2 つのコードサンプルの結果を示すスクリーンショットです。