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.

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;