In your JavaScript block or file where you are setting up your MapView popup properties. One way is to create an object literal with popup properties and assign the object to the MapView popup property. Add a watch to monitor mapview zoom events. Take a look at the code fragment where I set includeDefaultActions and other properties.
// popup defaults
let default_popup = {
viewModel: {
actions: {
zoom: false,
},
actionsMenuEnabled: false, // actions within the popup should display in a menu item
includeDefaultActions: false, // Indicates whether or not to include defaultActions in the Popup's UI.
},
// Works better without dock enabled.
dockEnabled: false,
dockOptions: {
// Disables the dock button from the popup.
buttonEnabled: false,
// Ignore default sizes that trigger responsive docking.
breakpoint: false,
// or...Dock the popup when the size of the view is less than or equal to breakpoint pixels.
// breakpoint: {
// width: 352,
// height: 522
// },
//position: 'top-left' // default is auto.
},
// Shows pagination for the popup if available.
// This allows the user to scroll through various
// selected features using either arrows
visibleElements: {
featureNavigation: true,
closeButton: true,
},
// autoCloseEnabled: true,
// DEPRECATED Replacement: view.popupEnabled
// autoOpenEnabled: false, // use when needing to stop the click event propagation
// https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#popupEnabled
// popupEnabled: false // view's default popup is loaded on demand when true
};
// 2D map instance
let view = new MapView({
map: map,
container: 'myMapViewer',
center: [lon, lat],
zoom: 12,
navigation: {
// allow it on mobile
momentumEnabled: true,
mouseWheelZoomEnabled: true,
browserTouchPanEnabled: true,
},
padding: padding,
constraints: {
maxScale: 0,
minScale: 300000,
// When true, the view snaps to the next LOD when zooming in or out.
// When false, the zoom is continuous. This does not apply when
// zooming in/out using two finger pinch in/out.
// snapToZoom: false
},
popup: default_popup,
});
/**
* Called when mapview is loaded.
*/
view.when(() => {
// do something after map loaded
afterMaploaded();
})
.catch((error) => {
// report error if browser doesn't support webgl.
let tf = error.name.includes("webgl");
doLogException('view.when', error, tf);
});
/**
* Execute processes that may only run after the map has loaded.
*/
const afterMaploaded = async () => {
handleViewWatches();
// ...
};
/**
* Watch mapview events
*/
function handleViewWatches() {
// Watch view.
reactiveUtils.watch(
() => [
view?.updating,
view?.stationary,
view?.navigating,
view?.interacting,
view?.zoom,
],
([updating, stationary, navigating, interacting, zoom]) => {
console.log(`updating: ${updating}`);
console.log(`zoom: ${view.zoom}`);
console.log(`scale: ${view.scale}`);
console.log(`extent.height: ${view.extent.height}`);
console.log(`extent.width: ${view.extent.width}`);
console.log(`--------------------`);
}
);
}
