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 set
function which takes center
and scale
arguments.
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 set
function creates a new MapView. A new DIV element is created to hold the MapView called popup
.
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.
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.
return popupView.container;