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! 

[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 

[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,

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

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

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

[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.destroy();
view = null‍‍

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]

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

[BjornSvensson · Accepted solution]

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

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