topic Re: How to customize Zoom-Out Event in ArcGIS JavaScript Maps SDK Questions

How to customize Zoom-Out Event

ShaningYu — Tue, 13 Apr 2021 17:27:14 GMT

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.

Re: How to customize Zoom-Out Event

KenBuja — Tue, 13 Apr 2021 17:40:39 GMT

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

Re: How to customize Zoom-Out Event

ShaningYu — Tue, 13 Apr 2021 18:13:09 GMT

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

Re: How to customize Zoom-Out Event

KenBuja — Tue, 13 Apr 2021 18:40:33 GMT

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