topic Re: How do I remove the zoom-to action from the default popup? in ArcGIS JavaScript Maps SDK Questions

How do I remove the zoom-to action from the default popup?

MarkL — Thu, 10 Mar 2016 17:23:24 GMT

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,

Re: How do I remove the zoom-to action from the default popup?

SteveCole — Sun, 12 Dec 2021 04:16:25 GMT

Just add this to your project's CSS:

.zoomTo {
display:none;
}

It will hide the Zoom To link.

Steve

Re: How do I remove the zoom-to action from the default popup?

MarkL — Thu, 10 Mar 2016 17:32:50 GMT

Thanks. Nothing like a little CSS to clean things up.

Re: How do I remove the zoom-to action from the default popup?

RobWaller — Thu, 10 Mar 2016 19:35:28 GMT

You can also do it in code by clearing the popup actions, this works for me:

view.popup.viewModel.actions = [];

Re: How do I remove the zoom-to action from the default popup?

KristianEkenes — Thu, 24 Mar 2016 17:06:35 GMT

Steve/Mark,

In 4.0 final Popup actions will be a collection of Accessor objects, which has a visible property. So rather than use CSS you can set this property to false:

// hides zoomTo action from popup

view.popup.viewModel.actions.getItemAt(0).visible = false;

This will also make it convenient to show/hide actions based on other logic or attribute values.

Re: How do I remove the zoom-to action from the default popup?

JohnRitsko — Wed, 30 Mar 2016 18:16:04 GMT

This is what I used:

.esriPopup .actionsPane .zoomTo {

display: none;

}

Re: How do I remove the zoom-to action from the default popup?

Aytunc — Fri, 05 Feb 2021 21:07:16 GMT

Except for the simple solution I explained below, unfortunately none of the solutions I've found online worked for me to remove the "Zoom To" option from the default popup.

Solution: You simply need to remove the "Zoom To" action from the "actions" array. Emptying the array worked for me since I haven't added any additional actions to this array (by default, the array only contains one action: "Zoom To")

In JavaScript, there are many different ways to delete all elements of an array. What I personally did was:

view.popup.actions = [];

Above, "view" denotes the SceneView instance I created. This "view" instance might have a different name (and not necessarily has to be a SceneView) in your code but the rest should be the same...

Tip: you can always check the contents of your "actions" array by logging its contents in the console using:

var count=0; view.popup.actions.forEach(element => { console.log("Item " + count + " : " + element.id ); count++; });

For more details, click here to check out the official documentation of actions in popup.

Re: How do I remove the zoom-to action from the default popup?

GregoryBologna — Fri, 30 Dec 2022 19:36:58 GMT

You can remove all default actions

// Removes the default actions from the popup

view.popup.viewModel.includeDefaultActions = false;

includeDefaultActions

Re: How do I remove the zoom-to action from the default popup?

lochd — Tue, 02 May 2023 17:07:22 GMT

Only this solution works for me after a lot of tries. Thanks!

Re: How do I remove the zoom-to action from the default popup?

AbhinavGarg — Sun, 05 Nov 2023 05:52:06 GMT

same here

Re: How do I remove the zoom-to action from the default popup?

pdtanimot — Tue, 02 Jan 2024 20:34:37 GMT

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;

Re: How do I remove the zoom-to action from the default popup?

GregoryBologna — Tue, 02 Jan 2024 21:27:42 GMT

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(`--------------------`); } ); }

Re: How do I remove the zoom-to action from the default popup?

pdtanimot — Tue, 02 Jan 2024 21:42:29 GMT

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.

Re: How do I remove the zoom-to action from the default popup?

ekleiman22 — Mon, 08 Jan 2024 14:39:00 GMT

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.

Re: How do I remove the zoom-to action from the default popup?

GregoryBologna — Mon, 08 Jan 2024 15:24:50 GMT

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

Re: How do I remove the zoom-to action from the default popup?

pdtanimot — Wed, 31 Jan 2024 18:02:54 GMT

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.

Re: How do I remove the zoom-to action from the default popup?

Tim_Shapiro — Mon, 10 Jun 2024 06:51:44 GMT

Is there a line to add in JSON?

Re: How do I remove the zoom-to action from the default popup?

pdtanimot — Wed, 26 Jun 2024 16:11:01 GMT

Yes, this can be done. But had to find a json programmer.

Re: How do I remove the zoom-to action from the default popup?

Paco — Thu, 15 Aug 2024 22:03:48 GMT

Another option that worked great for me-

view.popup.visibleElements = {
actionBar: false,
};

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#VisibleElements