How to mix map-components-react with @arcgis/core

[RyanSutcliffe]

Our team is updating one of our React apps that uses the ArcGIS JavaScript Maps SDK.  We are switching from the esriLoader pattern to @ArcGIS/core. We saw that it is "recommended" to use the React Wrapped Components that are available recently and I have been exploring that. 

Looking into it though, all the examples (ex1) I see show pretty basic apps. A map with a couple of widgets in them. 

For us we have very customized styling, location and placement of ESRI tools and widgets. We also have custom built React components that use the SDK modules within them (for example our own basemap tools). 

Is it possible to mix these two approaches? From a brief look I don't see a way for example to get a reference to the raw map or view from these web components so that I can manipulate it directly or pass it around in state to different components. In vanilla web components I see this pen for example which allows getting access to the view, map instance. However there is no equivalent for the React-based ones. 

I also don't see a way to for example really control the placement/UX of the standard ESRI widgets within an app this way, besides just sticking them in the four corners of the view. 

Has anyone any guidance on this and/or are there any code pens or examples that I am missing or should look into? Thanks!

[RyanSutcliffe]

What I was hoping was that we could perhaps use the new React web components the way we used the old ESRI/react-arcgis based ones some years ago. We relied on that to set up a MapView or 3d SceneView and then expose the map and view in state to our own components. I don't think this is possible here.

[ReneRubalcava · Accepted solution]

You can still import arcgis/core modules as needed. You could create your own Map/WebMap with whatever layers you want and provide it to the `ArcGisMap` component's `map` property. I don't have an example showing that, but this demo mixes the components and use of core.

https://github.com/odoe/arcgis-map-comps-nextjs/blob/main/app/map/%5Bslug%5D/page.tsx

You don't need to use the ArcGisMap ui to place your components, just don't make them children of the map component and they have a property called referenceElement you pass a reference too. This does require you have a useRef for each component and for the map to hook it up.

Each component has a `referece-element`/`referenceElement` you can use.

https://developers.arcgis.com/javascript/latest/references/map-components/?path=/docs/component-refe...

In the map and scene components, you can provide your own map as well.

https://developers.arcgis.com/javascript/latest/references/map-components/?path=/docs/component-refe...

[RyanSutcliffe]

Ah of course! I didn't think to make use of useRef to get a reference to the class itself. I see what you mean with your links to the nextjs example. 

Also I see now how a map instance can be passed into <ArcGISMap />. 

It also makes sense that `referenceElement` is also expected a ref as that is what we currently do when embedding ESRI UX elements like widgets into our own components.

Thanks for the help. Look forward to trying this out further.