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 remove the 2d map from the dom

AndreaWeeg

the way our UI works the map can be opened or closed depending on what the user is doing, when i remove the map from the dom it seems to still be holding on to memory, it just keeps going up and up until the browser becomes unresponsive. is there a better way to do this? this is my current code

this.$mainDiv.find(".arc-div").remove();
this.ArcView.map = null;
this.ArcMap.removeAll();
this.ArcMap = null;
this.ArcView = null;

it seems like the tiles are still in memory they get orphaned so it never gets cleaned up. any help would be awesome! thanks!

Find more posts tagged with

Accepted answers

BjornSvensson

view.container = null

should have been enough, but there is a bug with it. We will look at fixing that for next version (4.4).

All comments

BjornSvensson

null should work.

Maybe you have enabled "--strictNullChecks" in your tsconfig?
https://www.typescriptlang.org/docs/handbook/compiler-options.html

Anonymous User

view.container = null is illustrated on the following example which toogle view from 2D to 3D:

Switch view from 2D to 3D | ArcGIS API for JavaScript 4.7

But in Typescript, container property has to be an HTLMDivElement so you get an error (constructor accepts undefined though).

What would be the Typescript way then ?

Cheers !

JonMullen

Sorry for taking a while to respond, but I had a mistake in my code. Thanks.

BjornSvensson

Jon Mullen‌ - yes, this was fixed in 4.4 (as far as we know). Do you have a simple test app for 4.5 (or even better 4.6) that shows the issue you're seeing?

JonMullen

Has this been fixed? I have come across the same issue with 4.5. I see extra DOM elements from previously adding and removing a MapView from the DOM.

BjornSvensson

view.container = null

should have been enough, but there is a bug with it. We will look at fixing that for next version (4.4).

AndreaWeeg

I am opening a support ticket with them, could be a bug in the api since is so new there are things they might have missed. For now I think I am going to try to just have a global map and view so I don't need to destroy them I can just keep reusing them...not sure if it'll work and might be a lot of code change on my side but if it keeps the browser from crashing might be a good option until they can get someone to work on the ticket.

thanks for your help!

Andrea

ThomasSolow

I'm unsure about the best way to remove a map and/or a view. Map.destroy and MapView/SceneView.destroy aren't documented in the 4.X SDK, which sometimes means they're a little rough around the edges.

I would expect that

view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">destroy</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

as well as removing all your other references to the view should be enough. Looking at the state of the view after .destroy is called, most of its properties are set to null and the suspended property is set to true, so even if you didn't set it to null, it's not going to be doing a whole lot after destroy is called.

I can confirm that map.destroy() is throwing an error, but it's not clear to me you would necessarily want to destroy the map when the user toggles the view open and closed, especially if they may toggle that map open again.

Can I ask what happens if you leave the map alone and just destroy/recreate the view (based on the original map) when the user toggles the map closed and back open? Another thing to test would be not destroying anything and just changing the visibility of the div containing the view.

AndreaWeeg

still has a leak. and if i destroy the view it doesn't seem to work when i try to reload the map i just get a white screen so that seems to be a bug too

AndreaWeeg

i'll try that but i did write a simpler html with one of the samples they gave and this is the error it gets

init.js:formatted:10450 Uncaught TypeError: Cannot read property 'remove' of undefined at Object.destroy (init.js:formatted:10450) at Object.destroy (init.js:formatted:5872) at closemap (arctest.html:42) at HTMLButtonElement.onclick (arctest.html:49)

not sure if any esri developers monitor this site but this is the code that breaks

this._layersHandle.remove(); <--this line _layersHandle is null
this._layersHandle = null;
this.layers.drain(this._lyrRemove, this)

RobertScheitlin__GISP

Andrea,

The view has a reference to the map. Try something like this:

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>ArcView<SPAN class="punctuation token">.</SPAN>map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>ArcMap<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>ArcMap <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>ArcView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">destroy</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>$mainDiv<SPAN class="punctuation token">.</SPAN><SPAN class="token function">find</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".arc-div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

AndreaWeeg

I tried that but it throws an error (just says script error), this is what I changed it to (using js 4.2)

this.ArcMap.destroy(); //errors when using this

this.ArcView.destroy(); //this works but map is still in the memory heap (using chrome's memory profiler) and tiles seem to still be there

RobertScheitlin__GISP

Andrea,

You should call the destroy method on the map them remove it from the dom:

https://developers.arcgis.com/javascript/3/jsapi/map-amd.html#destroy

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.