How to create a FeatureTable from MapImageLayer within a WebMap?

329
5
Jump to solution
12-09-2021 12:21 PM
RYANCARL
New Contributor III

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?

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

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;

View solution in original post

0 Kudos
5 Replies
ReneRubalcava
Frequent Contributor II

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
New Contributor III

@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?

0 Kudos
ReneRubalcava
Frequent Contributor II

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.

0 Kudos
RYANCARL
New Contributor III

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:

useEffect.png

screen-shot-types.png

 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):
 

console-log-loaded.png

console-log-2.png

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

0 Kudos
ReneRubalcava
Frequent Contributor II

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;
0 Kudos