How to create a FeatureTable from MapImageLayer within a WebMap?

[RYANCARL]

My goal is to load a sublayer from my MapImageLayer  into a FeatureTable so that the table will filter with the extent of the view.

My problem is that when I am querying for the sub layers I am not able to call things like allSublayers on the MapImageLayer because typescript says that it is a type esri.Layer rather than a MapImageLayer.

So something like this:

const foundLyr = webMap.layers.find((lyr) => lyr.type === 'map-image');

Does anyone know how to solve this?

[ReneRubalcava]

Oh, if you are doing this before the View and Map loads, you need to load the webmap, then load the MapImageLayer and then you can get to the sublayers. Not sure about the TS error you're getting, but if you had a github repo, could take a look.

The Sublayer has a createFeatureLayer() method you can use for something like this.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-Sublayer.html#crea...

Then you can create a FeatureTable from the FeatureLayer.

[RYANCARL]

@ReneRubalcava I am in a super locked down network and we are using ArcGIS Enterprise. As far as I can tell ArcGIS Online does not allow me to publish a map image layer from ArcPro. 

Do you just need the code base or would attempting to provide the data be the best option?

[ReneRubalcava]

A snippet for the typescript error would help, where you get a type mismatch on the layer. Could be as simple as doing "as Sublayer" or something like that. I don't need the whole code or data.

[RYANCARL]

Ok so here is a snippet from the code, I tried to pull out anything that would detract from what I am attempting to accomplish.

The code itself:

const ProjectMap: React.FunctionComponent = () => {
  const mapDiv = useRef<null | HTMLDivElement>(null);
  const [mapView, setMapView] = useState<null | MapView>(null);

    useEffect(() => {
    if (mapDiv.current) {
      const webMap = new WebMap({
        portalItem: {
          id: 'c63925bb216a4186980d5a7419a7e918',
        },
      });

      const view = new MapView({
        map: webMap,
        container: mapDiv.current,
      });

      view.when(() => {
        const lyr = webMap.layers.getItemAt(0);
        console.log('layer from webmap:');
        console.log(lyr);
        lyr.allSublayers.find((sublayer) => sublayer.id === 0);
      });

      setMapView(view);
    }
  }, []);

  return <div ref={mapDiv} className="mapDiv" />;
};
export default ProjectMap;

The errors that I am seeing related to the types are:

 

 And the console output of the layer that I initially got from the web map is here (showing the loaded value and type of the item):
 

 

 I really appreciate you helping with this, I watch all your youtube stuff its great! 

[ReneRubalcava · Accepted solution]

The Collection getItemAt method doesn't know you expect to get a MapImageLayer, so you can do this

const lyr = webMap.layers.getItemAt(0) as MapImageLayer;