arcgis-features and mapimagelayer

LefterisKoumis

I use this script to display the popup in the arcgis-features.

I need to determine if the arcgis-features after it runs if it is empty or found features.

If i click on a featurelayer , then the console states that the component is not empty. 

However, if i click on a mapimagelayer it states that the component is empty even though there is a feature inside the arcgis-features. Why?

 const hitTestResult = await arcgisMap.view.hitTest(screenPoint);
    const mapPoint = arcgisMap.view.toMap(screenPoint);

    await arcgisFeatures.open({ 
      location: mapPoint, 
      features: results.map(r => r.graphic), // Include any client-side features found
      fetchFeatures: true 
    }).then((response) => {
      checkIfFeaturesEmpty()
    })
   

 

function checkIfFeaturesEmpty() {
  if (arcgisFeatures && arcgisFeatures.features) {
    if (arcgisFeatures.features.length === 0) {
      console.log('The <arcgis-features> component is empty.');
      return true;
    } else {
      console.log('The <arcgis-features> component is not empty and contains ' + arcgisFeatures.features.length + ' features.');
      return false;
    }
  } else {
    console.log('The <arcgis-features> element or its features property is not available yet.');
    return null; 
  }
}

 

Sage_Wall

Hi @LefterisKoumis ,

I checked with our Features expert, and fetchFeatures will return the features for both MapImageLayer and FeatureLayer. This means you don’t need to manually set the features property in addition to enabling fetchFeatures.

The reason the features property appears empty when you test it with your checkIfFeaturesEmpty method is that the open method’s promise resolves when the Features component opens—not when it has finished fetching all features from the map point.

To handle this, set up a reactiveUtils.watch on the features property and then call your checkIfFeaturesEmpty function, similar to what’s demonstrated in this CodePen: https://codepen.io/sagewall/pen/JoKKJGz?editors=1000

viewElement.addEventListener("arcgisViewClick", (event) => {
        const {
            mapPoint
        } = event.detail;
        arcgisFeatures.open({
            location: mapPoint,
            fetchFeatures: true,
        });
    });
    reactiveUtils.watch(
        () => arcgisFeatures.features,
        () => {
            checkIfFeaturesEmpty()
        })

    function checkIfFeaturesEmpty() {
        if (arcgisFeatures && arcgisFeatures.features) {
            if (arcgisFeatures.features.length === 0) {
                console.log('The <arcgis-features> component is empty.');
                return true;
            } else {
                console.log('The <arcgis-features> component is not empty and contains ' + arcgisFeatures.features.length + ' features.');
                return false;
            }
        } else {
            console.log('The <arcgis-features> element or its features property is not available yet.');
            return null;
        }
    }

 
Kudos to @LaurenBoyd