nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Find more posts tagged with

Accepted answers

RRubalcava

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;

All comments

RRubalcava

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;

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!

RRubalcava

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

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

RRubalcava

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#createFeatureLayer

Then you can create a FeatureTable from the FeatureLayer.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.