Popup components provide an easy way to add interactivity to your ArcGIS Maps SDK for JavaScript applications by displaying information in response to a user action. This sample demonstrates how to use the Popup component in a Map component to display a popup at a clicked location in the map. While the popup is typically used in conjunction with layers, you can also display the popup in response to a query or some other action that does not involve a graphic or a feature. In this example, the popup displays the latitude and longitude of the clicked location in the heading and the address of the clicked location in the content with the help of a locator.

Configure the Map and Popup components

Create a Map component and set the basemap, center, and zoom attributes. The map component currently uses the Popup widget by default. To utilize the Popup component instead, add an <arcgis-popup> as a child of the Map component in the “popup” slot. Since the Popup component is not tied to any layers in this example, set the popup-disabled attribute on the Map component to disable the default popup behavior.

<arcgis-map
  basemap="streets-navigation-vector"
  zoom="12"
  center="-71.6899, 43.7598"
  popup-disabled>
  <arcgis-popup slot="popup"></arcgis-popup>
</arcgis-map>

Listen to the map’s click event and display the popup at the clicked location

To display the popup component with location information, add an event listener to the map component’s arcgisViewClick event and get the longitude and latitude of the clicked location. Then set the location and the heading properties and then set the open property to true to display the popup.

viewElement.addEventListener("arcgisViewClick", (event) => {
  const { mapPoint } = event.detail;
  const lat = Math.round(mapPoint.latitude * 1000) / 1000;
  const lon = Math.round(mapPoint.longitude * 1000) / 1000;
  popupComponent.location = mapPoint;
  popupComponent.heading = `Reverse geocode: [${lon}, ${lat}]`;
  popupComponent.open = true;
  const params = {
    location: mapPoint,
  };
  // Execute a reverse geocode using the clicked location
  locator
    .locationToAddress(locatorUrl, params)
    .then((response) => {
      // If an address is successfully found, show it in the popup's content
      popupComponent.content = response.address;
    })
    .catch(() => {
      // If the promise fails and no result is found, show a generic message
      popupComponent.content = "No address was found for this location";
    });
});

Related samples and resources