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

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.

sceneView.popup.open({
// 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.