Get all features in extent

AnAlien

Hi guys, I'd like to have a list displayed external to the webMap in my app that shows all features in the current extent. And then the user should be able to zoom/pan and have the list automatically update with only the features available in the new extent (after zooming/panning). 

See image to see the functionality I am trying to implement: 

 

The results of a search should be displayed on a map as well as the map being able to filter (as user drags/zooms). 

How can I get a list of features that is dynamically tied to the extent? 

IbrahimE

I know this is a late message, but you can achieve this by doing the following:

    const getAllLayerViews = mapView.map.allLayers.map(layer => mapView.whenLayerView(layer));

    const layerViews = await Promise.all(getAllLayerViews);
    layerViews.forEach(layerView => {
        // monitor layer loading status
        const watchUpdatesHandle = watch(
            () => layerView.updating,
            updating => {
                const layer = getLayerFromId(layerView.layer.id, layers);
                if (!layer) {
                    return;
                }
                controller.broadcast("layerLoadingStatus", {
                    layer: layer,
                    isLoading: updating
                });

                // if it finished loading, then broadcast visible features
                if (!updating && isQueryable(layerView.layer)) {
                    const allQuery = new Query();
                    allQuery.geometry = mapView.extent;
                    allQuery.spatialRelationship = "intersects";
                    layerView.layer
                        .queryFeatures(allQuery)
                        .then(visibleFeatures => {
                            controller.broadcast("visibleFeaturesChanged", {
                                layer: layer,
                                features: visibleFeatures
                            });
                        })
                        .catch(console.error);
                }
            }
        );

        // clean up when the layer is destructed
        layerView.addHandles(watchUpdatesHandle);
    });

 
This snippet starts off by watching the loading status of all layers available on your webmap (using ESRI's `watch` utility - very useful and more resources about that here: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html)

Then once the layer is no longer loading, check if the `layer` supports the `queryFeatures` method, if it does, then we create a new filter which uses the extent/viewport of the map itself in the `Query`. Finally, broadcast these changes to your UI so that it informs you of what is currently visible in the map view.