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

luckachi — Wed, 06 Sep 2023 14:42:04 GMT

We are now receiving this error message on our web maps, which unfortunately doesn't tell me much considering the element 'viewDiv' does exist. Nothing has changed in the code other than updating to 4.27. Images show in the code where the viewDiv is mentioned. Help would be appreciated as this map is used quite frequently.

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

JoelBennett — Wed, 06 Sep 2023 17:47:22 GMT

It appears to be because you have a child element (an img) within that div. Evidently the SDK expects an empty div for a container. You should be able to accomplish the same functionality by moving the img element into the div one level up.

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

luckachi — Wed, 06 Sep 2023 18:05:54 GMT

Hi @JoelBennett ... unfortunately moving the loading element to a different div did not solve the problem. Still returning an error and the loading animation just spins without the map loading. It also doesn't resolve the issue if I completely remove the gif.

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

JoelBennett — Wed, 06 Sep 2023 19:05:25 GMT

Hmm...I arrived at that by getting the same error when adding an img to the div used by the mapview container.

The most common reason for this error would be that the div doesn't exist in the DOM at the time you're trying to access it. What do you get if you place the code below before the MapView constructor?

console.log(document.getElementById("viewDiv") == null);

If it says "true" then that's the issue, in which case I would recommend moving the script tag that starts up your application to a place lower in the document (perhaps right before the closing body tag).

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

luckachi — Wed, 06 Sep 2023 19:55:02 GMT

@JoelBennett - it did return "true". When you say the script tag, are you referring to the whole esri map code or a specific section? Right now the php has some script and style blocks at the top for screen sizes, the script for the loading icon, then the esri map code, then some div formatting for different screen sizes for drop down menus, then the map section. We actually do not have any <body> tags.

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

JoelBennett — Wed, 06 Sep 2023 19:56:30 GMT

It's likely the part you're referring to as the esri map code. All of that should be contained within a <script> tag, and you can probably just cut and paste that right before the closing body tag.

For example:

<html>  <body>  <div id="viewDiv"></div>  <script type="text/javascript"> //etc var view = new MapView({ //etc }); //etc </script> </body> </html>

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

luckachi — Wed, 06 Sep 2023 19:59:08 GMT

Looks like moving the entire esri block to just before the "viewDiv" section did the trick!

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

JoelBennett — Wed, 06 Sep 2023 20:06:00 GMT

Sounds good. On a side note, the container can contain child elements. It is not a requirement of the SDK that the container have no child elements, as I erroneously suggested previously.

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

luckachi — Wed, 06 Sep 2023 20:12:14 GMT

Ah, good to know and no worries. I moved the loading gif back to where it was and everything seems a okay - for now 😬