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.
Solved! Go to Solution.
Ken: Thanks for your response. How to catch the view.zoom change? Thanks if you can provide additional guide.
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...