Popup with DOM node

This sample shows how to populate the content of a Popup using a function that returns a DOM node. This function returns a MapView.container which represents the node of a MapView. The popup gets the clicked location from the SceneView and displays its corresponding location within a MapView.

To use this sample, simply click a location on the map to see its corresponding location in a popup.

Please note that the views do not sync when updated. If this is the desired behavior, please refer to the Overview Map sample.

How it works

The SceneView's popup.open calls a function which creates a MapView.

It listens for the SceneView's click event. Once this occurs, set the title, location, and content properties into the popup.open method. The content property calls a setContentInfo function which takes center and scale arguments.

1
2
3
4
5
6
sceneView.openPopup({
  // Set the popup's title to the coordinates of the location
  title: "Map view coordinates: [" + lon + ", " + lat + "]",
  location: event.mapPoint, // Set the location of the popup to the clicked location
  content: setContentInfo(sceneView.center, sceneView.scale)
});

The setContentInfo function creates a new MapView. A new DIV element is created to hold the MapView called popupDiv.

1
2
3
4
5
6
7
8
const popupDiv = document.createElement("div");
popupDiv.classList.add("mapView");

const popupView = new MapView({
  container: popupDiv,
  map: new Map({
    basemap: "topo-vector"
  }),

The function also centers the MapView within the popup to that of the SceneView and updates its scale based off of the SceneView's height and width. It also disables rotation and removes the UI components.

1
2
3
4
5
6
7
8
center: sceneView.center,
scale: sceneView.scale * 2 * Math.max(sceneView.width / 250, sceneView.height / 250),
constraints: {
  rotationEnabled: false
},
ui: {
  components: []
}

Lastly, return the DOM node for the MapView.

1
return popupView.container;

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close