Select to view content in your preferred language

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

1754
5
Jump to solution
09-11-2013 03:29 PM
Town_ofSnowflake
Deactivated User
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?
0 Kudos
1 Solution

Accepted Solutions
JasonZou
Frequent Contributor
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;         }     } }

View solution in original post

0 Kudos
5 Replies
JasonZou
Frequent Contributor
I am confused. By default, zoom in/out function does not require to work with SHIFT key. Here is an sample.
0 Kudos
Town_ofSnowflake
Deactivated User
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); 
0 Kudos
JasonZou
Frequent Contributor
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;         }     } }
0 Kudos
Town_ofSnowflake
Deactivated User
Got it.  Thanks!
0 Kudos
JasonZou
Frequent Contributor
You are welcome, Melo. Please consider to mark this thread as "Answered" so it may be helpful for others. Thanks.
0 Kudos