AnsweredAssumed Answered

Detect change in zoom when complete

Question asked by alanmervitz on Jun 19, 2017
Latest reply on Jun 19, 2017 by alanmervitz

Hello,

 

I'm trying to detect when a map has been zoomed in or out, and when that is complete to execute a function. I have tried using watchUtils.watch on both the view.zoom and view.extent properties, but am finding that the callbacks get executed too many times.

 

Here's the TypeScript code I'm using, where the console.log statements are getting executed too many times:

constructor(basemap: string = "streets", container: string = "viewDiv", center: number[] = [-104.61, 50.45], zoom: number = 12) {
    this.map = new Map({
        basemap: basemap
    });

    this.view = new MapView({
        container: container,
        map: this.map,
        center: center,
        zoom: zoom
    });

    watchUtils.watch(this.view, "zoom", function (zoom) { console.log(`zoom is now ${zoom}`) });
    watchUtils.watch(this.view, "extent", function (extent) { console.log(`extent is now ${extent}`) });
}

 

Here's what the output looks like in the console:

 

 

Is there a way to detect the change only when the zoom is complete? Perhaps there's another approach for accomplishing this than watching these properties?

Outcomes