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.

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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.