How do I remove the zoom-to action from the default popup? Do I have to manually remove it from the actions array via splice?
Thanks in advance,
M
Solved! Go to Solution.
Dear GregoryBologna: Can you please tell me which file you are editing here? I'm not a Web programmer. I just want to stop the annoying default 'zoom' to and 'dock' options on the New Map Viewer popup.
Thank you.
You can remove all default actions
// Removes the default actions from the popup
view.popup.viewModel.includeDefaultActions = false;
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(`--------------------`);
}
);
}
Just want to thank you for responding so thoroughly. These code fragments will come in very handy if/when I can find and open the editing environment. Happy New Year.
Thank you for your code, it is really helpful and this is the one that works for me to remove zoom and dock options. I tried to use the previous advices such as
view.popup.viewModel.includeDefaultActions = false;
but viewModel is not defined for popup (why?). I'd like to ask an additional question: is it possible to decrease the height of the title band? I do not want to show any title so this band is empty but still has too big height.
Check the node list. It should be there. If you're using VSCode, you can add view.popup.viewModel to watch window.
If you mean the popup title, you can just find the esri style in Chrome developer tools inspector and override their CSS, or depending on how you're building the popup template, add display:none to the title style.
See for more info. https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html
Thanks very much. Gregory. I'm not sure if I can implement it. There are some other options in Experience Builder for the Drag/Drop novice I am. Cheers.
Is there a line to add in JSON?
Yes, this can be done. But had to find a json programmer.
Another option that worked great for me-
view.popup.visibleElements = {
actionBar: false,
};