Select to view content in your preferred language

Event firing once FeatureLayer (or MapImageLayer) finishes drawing

192
2
Jump to solution
04-07-2025 08:54 AM
jwilner_amica
Occasional Contributor

Is there an event that fires when a FeatureLayer is completely drawn and visible on the map?

Through my documentation search, I have not found one, but I imagine this is a pretty basic functionality that would exist. 

let layer = new FeatureLayer({...})
dsManager.current.createDataSource(dataSourceOptions).then((source) => {
  map.current.view.map.add(layer) 
  map.current.createJimuLayerView(layer, map.current.id, layer.id, source, true)
})

layer.on('layerview-create', () => {...})

Currently, the closest thing I have found is this, however, this event fires far before the layer has finished drawing and displaying to the user. It would also be helpful to find a similar event for a MapImageLayer. 

Thank you!

Similar to this, but for the 4.x API / Experience Builder:

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/fire-event-when-featurelayer-grap...

 

0 Kudos
2 Solutions

Accepted Solutions
JeffreyThompson2
MVP Frequent Contributor

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-layers-LayerView.html#updat...

It's rather awkward to use, but I believe the only way to check this information is to access the LayerView.updating property. If updating is false, it is fully drawn and ready to use. It goes true when the layer first loads or when the data or extents change.

GIS Developer
City of Arlington, Texas

View solution in original post

jwilner_amica
Occasional Contributor

This works exactly as intended. Thank you!

For anyone else who might look at this in the future, here is my implementation.

    function addLayer(layer: FeatureLayer | ImageryLayer, label: string, type) {
        const data: DataSourceJson = {
            id: layer.id + '_ds',
            layerId: layer.id,
            label: label,
            type: type,
        }

        const dataJson = Immutable(data)
        const dataSourceOptions = {
            id: layer.id + '_ds',
            layer: layer,
            dataSourceJson: dataJson,
        }

        dsManager.current.createDataSource(dataSourceOptions).then((source) => {
            map.current.view.map.add(layer)
            map.current.createJimuLayerView(layer, map.current.id, layer.id, source, true).then((layerView) => {
                const interval = setInterval(() => {
                    if (layerView.view && !layerView.view.updating) {
                        clearInterval(interval)
                        map.current.view.goTo(claimsLayerExtent.current);
                        // or any other actions you would like to take!
                    }
                }, 50)
            }).catch((error) => {
                console.error('Error creating LayerView:', error)
            });
        }).catch((error) => {
            console.error('Error creating DataSource:', error)
        });
    }

View solution in original post

0 Kudos
2 Replies
JeffreyThompson2
MVP Frequent Contributor

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-layers-LayerView.html#updat...

It's rather awkward to use, but I believe the only way to check this information is to access the LayerView.updating property. If updating is false, it is fully drawn and ready to use. It goes true when the layer first loads or when the data or extents change.

GIS Developer
City of Arlington, Texas
jwilner_amica
Occasional Contributor

This works exactly as intended. Thank you!

For anyone else who might look at this in the future, here is my implementation.

    function addLayer(layer: FeatureLayer | ImageryLayer, label: string, type) {
        const data: DataSourceJson = {
            id: layer.id + '_ds',
            layerId: layer.id,
            label: label,
            type: type,
        }

        const dataJson = Immutable(data)
        const dataSourceOptions = {
            id: layer.id + '_ds',
            layer: layer,
            dataSourceJson: dataJson,
        }

        dsManager.current.createDataSource(dataSourceOptions).then((source) => {
            map.current.view.map.add(layer)
            map.current.createJimuLayerView(layer, map.current.id, layer.id, source, true).then((layerView) => {
                const interval = setInterval(() => {
                    if (layerView.view && !layerView.view.updating) {
                        clearInterval(interval)
                        map.current.view.goTo(claimsLayerExtent.current);
                        // or any other actions you would like to take!
                    }
                }, 50)
            }).catch((error) => {
                console.error('Error creating LayerView:', error)
            });
        }).catch((error) => {
            console.error('Error creating DataSource:', error)
        });
    }
0 Kudos