topic Re: Graphics layer on load in ArcGIS JavaScript Maps SDK Questions

Graphics layer on load

OneBrothers — Thu, 07 Apr 2022 20:04:34 GMT

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

Re: Graphics layer on load

ReneRubalcava — Thu, 07 Apr 2022 20:40:57 GMT

The graphics layer doesn't change its load status based on graphics added. Loaded just means the layer was created, since it doesn't need to load anything. Watching for the view updating property should let you know when new features are drawn on the map.

Re: Graphics layer on load

OneBrothers — Fri, 08 Apr 2022 11:42:40 GMT

yes i am doing this, but strange thing is i get the event before even graphics are shown on map. As soon as i am out of this event the graphics appear on map.

Re: Graphics layer on load

ReneRubalcava — Fri, 08 Apr 2022 15:21:51 GMT

How exactly are you measuring? Is this based on a screenshot? I tried this and I can't tell 100%, but it looks like it's fired after display. I used alert here because alert is blocking, and I can see the points when the alert is up

https://codepen.io/odoe/pen/JjMvOdV?editors=1000

Re: Graphics layer on load

ChristopheSuter — Mon, 11 Apr 2022 10:34:11 GMT

Didi you try to watch your graphics "layer" property ..

myGraphic.watch('layer', (layer) => {

if (layer){

//graphic is shown ...

}

})

Using watchUtils.whenDefinedOnce can also help with this...

Re: Graphics layer on load

OneBrothers — Fri, 15 Apr 2022 22:05:26 GMT

I tried the solution which you shared with console.log msg and it appears to be appearing either exactly at the same time or after it shows, but yes you are right i am measuring it on the basis of screenshot as i am take a screenshot as soon as graphics are loaded. I tried that and the first screenshot appeared with no graphics and the second one which i called after 3 sec wait appeared with graphics.