Detach and reattach a map view to a container

1744
3
07-05-2017 02:13 PM
TJRockefeller
New Contributor III

I am working on an application with a dynamic layout, and I would like to be able to close (remove) the map from the page, and then later reattach the map that was removed to a new HTML container.

for detaching from the page I was trying

    view.container = null;

for reattaching to the page I am just assigning the HTMLDivElement to the container

    view.container = divContainerElement;

When I do this it just kind of works. The widgets that I have set up on the view show up in my container, but the actual map is not shown.

The main difference that I can see in the html is that when the map is initially added there are several child elements inside of <div class="esri-view-surface"... , and after I detach and reattach then the element <div class="esri-view-surface"... has no child elements.

Is what I'm talking about even possible, or is it something that will be available in a future release?

I am using arcgis-js-api 4.3.1

A fiddle with a very basic setup of what I'm trying to do is here Edit fiddle - JSFiddle 

If you press the detach button it will remove the map, and when you reattach you will see that the map kind of comes back with the zoom widget visible and the footer information visible, but no map.

Thanks for any help.

0 Kudos
3 Replies
JordanKing3
New Contributor III

From the 4.4 release notes, bug fixes:

  • BUG-000104500: It is now possible to uninstantiate the MapView's container and reinstantiate.

Wondering if this could be related to your issue? Perhaps try out your code in a 4.4 version as a test.

0 Kudos
TJRockefeller
New Contributor III

Unfortunately that bug fix doesn't seem to be related. I updated my fiddle here Edit fiddle - JSFiddle  to use 4.4 and it is still showing the same problem.

0 Kudos
TJRockefeller
New Contributor III

I found a work around that works well enough. I can keep the same map in memory, but I have to create a new MapView to get it to reattach correctly. I have to save information about the center, zoom, scale, etc. to make sure that the view comes back the same as it was before, but at least I don't have to recreate the map and the layers.

I modified my fiddle here Edit fiddle - JSFiddle to show the work around.

0 Kudos