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

luckachi · ‎09-06-2023

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.

JoelBennett · ‎09-06-2023

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

View solution in original post

JoelBennett · ‎09-06-2023

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.

luckachi · ‎09-06-2023

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.

JoelBennett · ‎09-06-2023

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

luckachi · ‎09-06-2023

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

JoelBennett · ‎09-06-2023

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>
<!-- etc -->
<body>
<!-- etc -->
<div id="viewDiv"></div>
<!-- etc -->
<script type="text/javascript">
	//etc
	var view = new MapView({
		//etc
	});
	//etc
</script>
</body>
</html>

luckachi · ‎09-06-2023

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

JoelBennett · ‎09-06-2023

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.

luckachi · ‎09-06-2023

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