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; } } }

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?

Find more posts tagged with

Accepted answers

StephenLead

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

All comments

DerekMaune

It seems like I've built a decent lod array. I'll have to play with it some more to make sure it works everywhere, but my issue is resolved. Thanks for your help.

derekswingley1

No server side config necessary, you can manually specify zoom levels for a map that doesn't use tiled services. But there's some work involved...

Background info: the recommended, default way to use a JS API map is to create a map then add a tiled service. When you add a tiled service to a map, the map automatically uses the levels defined in that service as the levels for the map and sets the map's spatial reference to that of the tiled service. If you're not using a tiled service, the map doesn't know where to find zoom levels so, if you want specific zoom levels, you have to specify them when you create the map (as well as a spatial reference for the map). In my previous post in this thread, I linked to a post that has code that shows this. Here's a simplified version that creates a map, specifies three zoom levels and add a dynamic service. I've also specified sliderStyle: "large" so you can see a slider with ticks that represents the available zoom levels: http://jsbin.com/adesan/1

For you to do this, you need to figure out which scales you want available in your app, then generate an array of LODs (levels of detail) that you pass to the map constructor when you create your map. The smallest scale will be level zero. As scales get larger, level number goes up. Levels also require a value for resolution which is the number of map units per pixel. You can get this number with the following line of code:

map.extent.getWidth() / map.width

Using that line of code along with map.getScale(), you can piece together an array of LODs to give to the map constructor.

If you want to specify a specific spatial reference, create an extent and pass that to the map constructor as the extent options. The feature layer in any projection sample is helpful for getting an extent in any spatial reference.

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?

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

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

Hi Derek,

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

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.

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.

StephenLead

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

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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