Intro to popups

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

Popups provide an easy way to add interactivity to your ArcGIS 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 the Locator task 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 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:

 require([
    "esri/tasks/Locator",
    "esri/Map",
    "esri/views/MapView"
  ], function(
     Locator,
     Map,
     MapView
   ) {

    // Create a locator task using the world geocoding service
    var locatorTask = new Locator({
       url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    });

    // Create the Map
    var map = new Map({
       basemap: "streets"
    });

    // Create the MapView
    var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-116.3031, 43.6088],
        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.

 view.on("click", function(event) {
    event.stopPropagation();

    // Get the coordinates of the click on the view
    // around the decimals to 3 decimals
    var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
    var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

    view.popup.open({
        // 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 display in the popup's content. Once user clicks on the view, call locatorTask.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.

// Execute a reverse geocode using the clicked location
locatorTask.locationToAddress(event.mapPoint).then(function(response) {
  // If an address is successfully found, show it in the popup's content
  view.popup.content = response.address;
}).catch(function(error) {
  // If the promise fails and no result is found, show a generic message
  view.popup.content = "No address was found for this location";
});