Intro to popups

This tutorial will walk you through working with popups.

Popups provide an easy way to add interactivity to your ArcGIS Maps SDK for JavaScript applications by displaying information in response to a user action. Each view has a popup associated with it. In most cases, the content of the popup allows users to access data attributes from layers and graphics.

While the popup is typically used with a graphics layer or feature layer, you can also display the popup in response to a query or some other action that does not involve a graphic or a feature. For example, you can display the lat/long coordinates of where a user clicks in the view.

This sample will walk you through how to use the default Popup in a view by setting its properties such as content, title and location, and displaying it without pulling information from a PopupTemplate, graphic, or a layer's features. The sample uses locator to reverse geocode a point from a clicked location on the view. The returned address is displayed in the Popup's content while the latitude and longitude of the clicked location are displays within the popup's title.

Prior to completing the following steps, you should be familiar with views and Map. If necessary, complete the following tutorials first:

• Intro to MapView
• Intro to SceneView

1. Require the locator, Map, and MapView modules and create new instances

Create a locator url using the World Geocoding Service. Create a basic Map. Add the Map instance to a View. Your JavaScript should look similar to the code below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
require(["esri/rest/locator", "esri/Map", "esri/views/MapView"], (locator, Map, MapView) => {
  // Create a locator url using the world geocoding service
  const locatorUrl = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer";

  // Create the Map
  const map = new Map({
    basemap: "streets-navigation-vector"
  });

  // Create the MapView
  const view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-71.6899, 43.7598],
    zoom: 12
  });
});

2. Listen to view's click event and display the popup at the clicked location

Listen to click event on the view and get the longitude and latitude of the clicked location. Display the popup at the clicked location and display the coordinates of the clicked location in the popup's title. To do so, we will set the location and the title properties of the popup within the the open() method.

1
2
3
4
5
6
7
8
9
10
11
12
13
view.popupEnabled = false;
view.on("click", (event) => {
  // Get the coordinates of the click on the view
  // around the decimals to 3 decimals
  const lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
  const lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

  view.openPopup({
    // Set the popup's title to the coordinates of the clicked location
    title: "Reverse geocode: [" + lon + ", " + lat + "]",
    location: event.mapPoint // Set the location of the popup to the clicked location
  });
});

3. Locate an address for the clicked location and display the matched address in the popup content

The clicked location is used as input to a reverse geocode method and the resulting address is displayed in the popup's content. Once the user clicks on the view, call the locator.locationToAddress() method and pass the clicked point to get the address for that location. If the matching address is found for the point, set the popup's content property to display the address. Finally, if no address is found for the clicked location, the popup's content displays a generic message indicating that no address was found.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const params = {
  location: event.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
    view.popup.content = response.address;
  })
  .catch(() => {
    // If the promise fails and no result is found, show a generic message
    view.popup.content = "No address was found for this location";
  });