Intro to popup component

Explore in the sandbox

View live

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.

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.

Use dark colors for code blocksCopy
<arcgis-map basemap="streets-navigation-vector" zoom="12" center="-71.6899, 43.7598" popup-disabled>
  <arcgis-popup slot="popup"></arcgis-popup>
</arcgis-map>

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 title properties within the the open() method to open the popup.

Use dark colors for code blocksCopy
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.open({
    // Set the popup's title to the coordinates of the location
    title: `Reverse geocode: [${lon}, ${lat}]`,
    location: mapPoint, // Set the location of the popup to the clicked location
  });
  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";
    });
});