Select to view content in your preferred language

Bug: 4.27 continuous zoom mouse wheel not snaping to max/min scale

425
3
07-20-2023 01:29 AM
mattheol
New Contributor II

I'd like to report the bug again. There is a bug with continuous zoom (view.constraints.snapToZoom = false). It's sometimes impossible to zoom in to max scale (or zoom out to min scale) using mouse wheel.

Look at the screenshot below (I zoomed in using mouse wheel and i can't go further with mouse wheel. The only way to achieve max scale is to use '+' button).Screenshot 2023-07-20 at 10.22.12.png

Codepen: https://codepen.io/matiol/pen/PoxamWL

Previous topic: https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/bug-4-25-continuous-zoom-not-snap...

0 Kudos
3 Replies
JoelBennett
MVP Regular Contributor

If this behavior is by design, then it likely won't be classified as a bug, which might explain why you didn't get any traction last time.  Fortunately, working around this is easy.  Below is the code from the script tag in your codepen, with lines 28 - 34 added in order to provide the behavior you're looking for.

      require([
      "esri/Map",
      "esri/views/MapView",
    ], function(
      Map,
      MapView,
      Expand
    ) {
      const map = new Map({
        basemap: 'topo'
      });

      // center the view over 48 states
      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-100, 35],
        zoom: 19,
        constraints: {
          snapToZoom: false
        }
      });
      view.ui.add("scaleDiv", "top-left");
      const scaleDiv = document.getElementById("scaleDiv");
      view.watch('stationary', () => {
            document.getElementById("scaleDiv").innerHTML = `Current scale: ${view.scale}<br> Max scale: ${view.constraints.effectiveMaxScale} <br> Min scale: ${view.constraints.effectiveMinScale}`;
      });
      view.on("mouse-wheel", function(evt) {
        var viewScale = view.scale;
        window.setTimeout(function() {
          if ((viewScale == view.scale) && (viewScale != view.constraints.effectiveMinScale) && (viewScale != view.constraints.effectiveMaxScale))
            view.scale = ((evt.deltaY > 0) ? view.constraints.effectiveMinScale : view.constraints.effectiveMaxScale);
        }, 10);
      });
    });

 

Note that the mouse-wheel event occurs before the setting of the view's scale value.  As a result, when the mouse-wheel event fires, the view's scale property is still set to the value it had before the mouse wheel was moved.  The window.setTimeout call is used to work around that sequence.

mattheol
New Contributor II

Thanks for your reply and this workaround, but I really dislike the idea that this default behavior is desirable. In my opinion you should be able get to max/min scale using mouse-wheel without this kind of workaround and fixing map navigation with setting directly scale on the view object.

0 Kudos
JoelBennett
MVP Regular Contributor

You needn't look far to know you're not alone in believing things in the API should be a certain way although they're not...perhaps here is a good example (and I have a workaround for that one too).  You also needn't look far to find things that truly are bugs that don't get fixed nonetheless...even when documented down to the line of code and presented with a solution (here and here perhaps).  In my 20 years of working with ESRI products, I've come to find that, at the end of the day, it's not a win if the API works as expected...it's a win if the final product works as expected.

0 Kudos