I am working on developing a webapp using ESRI JS API 4.x. My main requirement is to search some address, zoom on the address, create a buffer, using that that buffer query data from a feature layer and show all intersecting features as graphics on map. I am able to achieve all this successfully. Next requirement is to take a screenshot of map in two different basemaps after the intersecting features are loaded on map. Previously we used to have a graphics layer on load type function which triggers when all the graphics are added on map. In API version 4.x i understand now mostly these type of events are handled using watch utils and observing value of specific variables such as graphics layer loaded.
My issue is, these events trigger first and then graphics are added on map which is killing the entire purpose. Till now i have used following, in all of these my graphics layer status is always loaded even though the graphics which i added are not showing on the map.
My only requirement is to know when graphics are visible on map.
watchUtils.whenFalse(view, "updating", async () => {
console.log('---Watch: view Updating => Graphics Layer Load Stauts : ' + graphicsLayer.loadStatus)
console.log('---Watch: view Updating => toggle.activeBasemap.loadStatus ' + toggle.activeBasemap.loadStatus)
console.log('map.basemap' + map.basemap)
});View => Updating
view.watch('updating', function (evt) {
if (evt === true) {
domClass.add('loadingDiv', 'visible');
console.log('======graphicsLayer.loadStatus')
console.log(graphicsLayer.loadStatus)
console.log('---View Watch Updating Started');
} else {
domClass.remove('loadingDiv', 'visible');
console.log('======graphicsLayer.loadStatus')
console.log(graphicsLayer.loadStatus)
console.log('---View Watch Updating Finish');
}
});layer view => watch
view.whenLayerView(graphicsLayer).then(function (layerView) {
layerView.watch("updating", function (value) {
console.log('---Graphics Layer View Updating');
if (!value) {
console.log('---Graphics Layer View Updating ! value');
}
});
});layerview-create
graphicsLayer.on("layerview-create", function (event) {
// The LayerView for the layer that emitted this event
graphicsLayerView = event.layerView;
console.log('---Graphics layer Layer View Create');
watchUtils.whenFalse(graphicsLayerView, "updating", async () => {
console.log('---Watch: view graphicsLayerView Updating ' + graphicsLayer.loadStatus)
});
});graphics layer => loaded
graphicsLayer.watch("loaded", () => {
console.log('---Graphics layer loaded');
})graphics layer => load Status
watchUtils.watch(graphicsLayer, "loadStatus", () => {
console.log('---Watch: graphicsLayer Load Status : ' + graphicsLayer.loadStatus)
});
