This sample shows how to populate the content of a Popup using a function that returns a DOM node. The function reuses a precreated Map component. The popup gets the clicked location from the Scene component and displays its corresponding location within that embedded map.
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 Scene component listens for the arcgisViewClick event. When the user clicks in the scene, the handler reads the clicked mapPoint, sets properties on the popup, then sets the open property to true to display the popup.
On each click, the popup heading is updated with the clicked coordinates, the location is set to the mapPoint, and the content is provided by setContentInfo, which updates and returns the embedded Map component:
viewElement.addEventListener("arcgisViewClick", async (event) => { const mapPoint = event.detail.mapPoint;
if (mapPoint) { // Create lat/lon vars to display in popup title const lat = Math.round(mapPoint.latitude * 1000) / 1000; const lon = Math.round(mapPoint.longitude * 1000) / 1000;
popup.heading = `Coordinates: [${lon}, ${lat}]`; popup.content = setContentInfo(mapPoint); popup.location = mapPoint; popup.open = true;A dedicated Map component is used to display a small 2D map within the popup. It is created once, configured with a basemap, sized to a fixed 200px height, and reused for every interaction:
// Create the map for the popup content const popupContentMap = document.createElement("arcgis-map"); popupContentMap.basemap = "topo-vector"; popupContentMap.style.width = "100%"; popupContentMap.style.height = "200px"; popupContentMap.constraints = { rotationEnabled: false };The setContentInfo function updates the Map component each time the user clicks.
popupContentMap.center = viewElement.center; popupContentMap.scale = viewElement.scale * 2 * Math.max(viewElement.view.width / 250, viewElement.view.height / 250);Existing graphics are cleared and a new one gets added:
popupContentMap.graphics.removeAll(); const pointGraphic = new Graphic({ geometry: new Point({ latitude: mapPoint.latitude, longitude: mapPoint.longitude, }), symbol: new SimpleMarkerSymbol({ size: 8, color: "red", outline: { color: "white", width: 1 }, }), }); popupContentMap.graphics.add(pointGraphic);Lastly, return the DOM node for the Map component.
return popupContentMap;