Change the scale navigation events zoom on dynamic map

[DerekMaune]

Is there a way to change the amount scale is increased/decreased by the mouse click and mouse scroll wheel navigation events on a Dynamic Map?  Failing that, is there a way to override the core portion of these functions?

[StephenLead · Accepted solution]

I'm not sure about changing what happens with the zoom controls, but for the second part of your question, you should be able to override/bypass their default behaviour in favour of your own.

You can switch off the zoom in/out buttons using isZoomSlider = false then add your own +/- buttons to manually set the scale to the desired value, using setScale.

To disable the scroll wheel you can use isScrollWheelZoom = false, then listen for the mouse wheel event and set the scale as above.

Steve

[DerekMaune]

Do you have any idea what function or hook, the default scroll method uses to front-load the zoom events on the client instead of running each individual step on the server?  What I mean is that with the default mouse scroll it will zoom the map in or out as long as you are scrolling and then once you stop it hits the server to update the graphics.  Is there documentation for the javascript map object functions that would allow me to duplicate this behavior?  The only documented functions and events seem to act on a discrete back-and-forth with the server.

[StephenLead]

No idea, sorry. You could try hitting up @derekswingley on Twitter, or hope that he sees this post....

[DerekMaune]

I have the zoom values front-loaded so that they fire as one event when the user stops scrolling.  I just can't figure out how they scale the map graphic.

[DerekMaune]

I have found a workaround that I do not favor overly much.  The rate of zoom on a dynamic map is hardcoded in the _extentUtil function in _coremap.js, but I don't want to rely on an edited framework so I will continue looking for some point to rejoin the normal execution path after overriding capture of the mousewheel events but before a full call to setScale.

[derekswingley1]

Hi Derek,

Can you post your code showing what you have so far? Want to make sure we're on the same page...

[DerekMaune]

rMap.map.disableScrollWheelZoom();
on(dom.byId(a),(!has("mozilla") ? "mousewheel" : "DOMMouseScroll"), function(e){ scroll(e) });
on(map,"zoom-end",function(){locked=false;applyZoom()});
on(map,"zoom-start",function(){locked=true;newScale=-1;});

var newScale = -1;
var locked = false;
var timer;
function scroll(e)
{ var s = e[(!has("mozilla") ? "wheelDelta" : "detail")] * (!has("mozilla") ? 1 : -1);
 if( !locked )
 { rMap.map.onZoomStart();
  newScale = rMap.map.getScale();
 }
 if(s>0) newScale = newScale*0.8;
 else newScale = newScale*1.2;
 clearTimeout(timer);
 timer = setTimeout(function(){rMap.map.onZoomEnd();},1500);
}
 
function applyZoom()
{ rMap.map.setScale(newScale);
}

This correctly queues the scale change up on the client and commits it to a server request as one transaction.  The problem is that it does not provide user input that it is doing so (the default behavior of the map object uses a matrix transform on the image to show it zoom in or out.)  If I submit a setScale() call with each mouse event, the user has to wait for the map to update before they can submit another.

I guess what I want to know is if there's a way to call the function responsible for that transform in the map object, or duplicate it in a way that will not interfere with the map object and/or break on a framework update.

[derekswingley1]

rMap.map.disableScrollWheelZoom();
on(dom.byId(a),(!has("mozilla") ? "mousewheel" : "DOMMouseScroll"), function(e){ scroll(e) });
on(map,"zoom-end",function(){locked=false;applyZoom()});
on(map,"zoom-start",function(){locked=true;newScale=-1;});

var newScale = -1;
var locked = false;
var timer;
function scroll(e)
{ var s = e[(!has("mozilla") ? "wheelDelta" : "detail")] * (!has("mozilla") ? 1 : -1);
 if( !locked )
 { rMap.map.onZoomStart();
  newScale = rMap.map.getScale();
 }
 if(s>0) newScale = newScale*0.8;
 else newScale = newScale*1.2;
 clearTimeout(timer);
 timer = setTimeout(function(){rMap.map.onZoomEnd();},1500);
}
 
function applyZoom()
{ rMap.map.setScale(newScale);
}

This correctly queues the scale change up on the client and commits it to a server request as one transaction.  The problem is that it does not provide user input that it is doing so (the default behavior of the map object uses a matrix transform on the image to show it zoom in or out.)  If I submit a setScale() call with each mouse event, the user has to wait for the map to update before they can submit another.

I guess what I want to know is if there's a way to call the function responsible for that transform in the map object, or duplicate it in a way that will not interfere with the map object and/or break on a framework update.

There's not a public method to do map image scaling, that happens as part of the zoom process and isn't exposed in the API.

Instead of overriding how the map zooms, why not define zoom levels for the map at the various scales you want your users to visit?

[DerekMaune]

The documentation led me to believe there was not a way to do that with the Dynamic maps, only the Tiled.  I'm afraid I'm more of a tech drafted to work with GIS than someone experienced with Esri software.  Will a map service that supplies a Dynamic map provide a Tiled map, can a Dynamic map have it's LOD array set, or would I need to have the GIS people adjust something on the server to provide a Tiled map?