How to adjust the pan distance?

844
2
08-09-2016 10:05 AM
CameronBlandy
Occasional Contributor

I have noticed that when using the arrow keys on the keyboard that the map only pans a very small distance. When using the Silverlight api the pan distance is much greater, and in my opinion better.

Is there an esriConfig.defaults setting (or similar) I can set to make the arrow keys pan a greater distance?

0 Kudos
2 Replies
SteveCole
Frequent Contributor

I hope someone else chimes in with an elegant way of doing this because my thoughts are kinda clunky. First, I'd determine how much panning occurs by default. Because of various zoom levels, I'm guessing this is a ratio or percentage based on the current map extent.  Knowing that, you have a baseline to tweak off of.

In order to actually do that, you would need to "cancel" the panning that occurs by default using the arrow keys. You would do that by setting up an event listener based on the keyboard clicks. In that event listener, if you determine that the user clicked one of the arrow keys, you would cancel that event's response (using Dojo's stopEvent) and then proceed with your own logic for adjusting the map extent.

Maybe you determine the arrow keys pan 5% the width or height of the current map extent. If the current map extent is 1,000 feet wide, 5% of that is 50 feet and so the default panning left/right  adds or subtracts 50 horizontally from the current mapextent. Increasing that to 10% would mean an adjustment by 100 feet and so on and so on..

I haven't actually done this so I'm just throwing out unproven ideas.

Steve

0 Kudos
thejuskambi
Occasional Contributor III

The map navigation is maintained within a module call MapNavigationManager. The keyboard panning is a hard-coded value of 10 (Surprised that its hard-coded !! ). Map resolution (zoom level) is also considered. The pan behaves differently for different projection system. For Projected Coordinate system, it ends up moving little.

If you are hosting the api locally, you could update the values. It can be found in the function "_keyDown".

If you are using a CDN vesion, then you could use dojo/aspect to hack in to the function and update the dx and dy. Make sure you require "dojo/aspect" and "dojo/keys".

aspect.before(map.navigationManager, "_keyDown", function(evt){
            var keyCode = evt.keyCode;
            switch (keyCode) {
                case dojoKeys.UP_ARROW:
                case dojoKeys.NUMPAD_8:
                    this._keyDy += 100;
                    break;
                case dojoKeys.RIGHT_ARROW:
                case dojoKeys.NUMPAD_6:
                    this._keyDx -= 100;
                    break;
                case dojoKeys.DOWN_ARROW:
                case dojoKeys.NUMPAD_2:
                    this._keyDy -= 100;
                    break;
                case dojoKeys.LEFT_ARROW:
                case dojoKeys.NUMPAD_4:
                    this._keyDx += 100;
                    break;
                case dojoKeys.PAGE_UP:
                case dojoKeys.NUMPAD_9:
                    this._keyDx -= 100;
                    this._keyDy += 100;
                    break;
                case dojoKeys.PAGE_DOWN:
                case dojoKeys.NUMPAD_3:
                    this._keyDx -= 100;
                    this._keyDy -= 100;
                    break;
                case dojoKeys.END:
                case dojoKeys.NUMPAD_1:
                    this._keyDx += 100;
                    this._keyDy -= 100;
                    break;
                case dojoKeys.HOME:
                case dojoKeys.NUMPAD_7:
                    this._keyDx += 100;
                    this._keyDy += 100;
                    break;
                default:
                    break;
            }
            return arguments;
        });