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?

Vind meer berichten getagd met

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

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

Town_ofSnowflake

Got it. Thanks!

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

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

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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