How to customize Zoom-Out Event

148
3
Jump to solution
3 weeks ago
ShaningYu
Frequent Contributor

I use ESRI JS4.  I want to customize the Zoom-In/Out event somehow.  E.g., when the map is zoom-out to its limit, fire an event to do something.  Since the Zoom In/Out control is ESRI's build-in component, I don't know how to catch the object and then fire a customized event.  Hopefully, I can get hint from this thread.  Thanks. 

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

You could watch for the change of the mapView's zoom property

View solution in original post

0 Kudos
3 Replies
KenBuja
MVP Honored Contributor

You could watch for the change of the mapView's zoom property

View solution in original post

0 Kudos
ShaningYu
Frequent Contributor

Ken:  Thanks for your response.  How to catch the view.zoom change?  Thanks if you can provide additional guide.  

0 Kudos
KenBuja
MVP Honored Contributor

This one way to do it, but the zoom level changes several times as you zoom to the next level. In one run, it  sent out 10 messages as it changed from zoom level 5 to 4.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Intro to MapView - Create a 2D map | Sample | ArcGIS API for JavaScript 4.18</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
      require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
        var map = new Map({
          basemap: "topo-vector"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 4,
          center: [15, 65] // longitude, latitude
        });
        
        view.watch('zoom', zoomChanged);
        
        function zoomChanged(newValue, oldValue, property, object){
          console.log("New value: ", newValue,
              "<br>Old value: ", oldValue,
              "<br>Watched property: ", property,
              "<br>Watched object: ", object);
        }
        
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

 

This thread shows better way to do it: https://community.esri.com/t5/arcgis-api-for-javascript/how-to-simulate-listening-for-zoom-end-in-th...

0 Kudos