topic Re: [esri.views.MapView] #container element with id 'viewDiv' not found in ArcGIS JavaScript Maps SDK Questions

[esri.views.MapView] #container element with id 'viewDiv' not found

mmatusova — Sat, 06 May 2023 18:58:19 GMT

Hi, I decided to try out a tutorial using the JS SDK, using React, but I am having an issue mentioned in the title.
The app is a simple react app made using npx create-react-app my-app --template typescript.

https://developers.arcgis.com/javascript/latest/display-a-map/ The idea was to follow this tutorial.

I add the needed imports as so, which are:

import Map from "@arcgis/core/Map";

import MapView from "@arcgis/core/views/MapView";

and then create a component called MapComponent, which just returns a div as such:

but then I end up getting the error in the title. I read that you need to set the parent's height to workaround it, but to no avail.

The values and names are from the tutorial above.

But, if anyone has some handy tutorials for ArcGIS in React, I'd be happy to see them.

Re: [esri.views.MapView] #container element with id 'viewDiv' not found

RamaniGanason — Sun, 07 May 2023 13:31:43 GMT

Hi @mmatusova, I think the issue is that you are calling the js function before the div is rendered causing it not to find it. I think you can use useEffect hook for this.

export function MapComponent() { const loadMap = () => { const map = new Map({ basemap: "arcgis-topographic" }); const view = new MapView({ map: map, container: "viewDiv" }) } useEffect(() => { loadMap(); }, []); return <div style={{ height: 100, width: 500 }} id='viewDiv'></div> }

Re: [esri.views.MapView] #container element with id 'viewDiv' not found

mmatusova — Sun, 07 May 2023 14:19:36 GMT

Hi @RamaniGanason !

I ended up figuring it out later on that day fortunately, but thank you so much for confirming this is the right way to do it! 😃