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

How to customize Zoom-Out Event

ShaningYu

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.

Trouver plus de publications taguées avec

Accepted answers

kenbuja

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

All comments

kenbuja

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-the-4-x-framework/m-p/215224

ShaningYu

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

kenbuja

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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