nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to rubberband zoom w/o the shift key: arcgis api for javascript

Town_ofSnowflake

I want to enable the rubberband zoom effect without users having to hold the shift key down. This behavior is found is Esri navigation bar dijit. I don't want to use the dijit.

How can I get a zoom in/out bounding box to draw without forcing users to use shift key?

Finde mehr Beiträge mit dem Tag

Accepted answers

JasonZou

No need to create navToolbar more than once. Once it's created, just use navToolbar.activate to activate its operation. Here is a sample code.

function activateNavigation(navType) {     if (navType) {         navToolbar.activate(navType);          // for some reason, when switch ZoomIn to ZoomOut or vice versa, the pan operation is enabled.         // I believe it is a bug. Here is a workaround.         if (navType !== "pan" && map.isPan) {             map.disablePan();         }          // set map cursor based on the navigation type         switch (navType) {         case esri.toolbars.Navigation.PAN:             map.setMapCursor("move");             break;         case esri.toolbars.Navigation.ZOOM_IN:         case esri.toolbars.Navigation.ZOOM_OUT:             map.setMapCursor("crosshair");             break;         default:             map.setMapCursor("default");             break;         }     } }

All comments

JasonZou

I am confused. By default, zoom in/out function does not require to work with SHIFT key. Here is an sample.

Town_ofSnowflake

Yes. You are correct. I misread the docs.

Solution:
The zoom in/out is handled by the navigation class. This includes the ability to draw a rubberband box. You can design your own toolbar, you just need the navigation object in your code.

Add to the top of js:

dojo.require("esri.toolbars.navigation");
var navToolbar;

Add to the init function:

navToolbar = new esri.toolbars.Navigation(map);

Create a listener for the button of your choice, and include this:

navToolbar = new esri.toolbars.Navigation(map);

JasonZou

No need to create navToolbar more than once. Once it's created, just use navToolbar.activate to activate its operation. Here is a sample code.

function activateNavigation(navType) {     if (navType) {         navToolbar.activate(navType);          // for some reason, when switch ZoomIn to ZoomOut or vice versa, the pan operation is enabled.         // I believe it is a bug. Here is a workaround.         if (navType !== "pan" && map.isPan) {             map.disablePan();         }          // set map cursor based on the navigation type         switch (navType) {         case esri.toolbars.Navigation.PAN:             map.setMapCursor("move");             break;         case esri.toolbars.Navigation.ZOOM_IN:         case esri.toolbars.Navigation.ZOOM_OUT:             map.setMapCursor("crosshair");             break;         default:             map.setMapCursor("default");             break;         }     } }

Town_ofSnowflake

Got it. Thanks!

JasonZou

You are welcome, Melo. Please consider to mark this thread as "Answered" so it may be helpful for others. Thanks.

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.