Proper map destroy

RazvanVxMt

Hi! I'm working on an Angular app that needs to display maps in different components. When each component is creating its own map after couple of switching between components displaying maps the browser memory started to increase until at some point completely crushes. This is especially easy to replicate on Chrome Dev Tools are opened. My question is what is proper way of releasing the map and all its resources (layers, graphics) in order to avoid the huge memory leak?

AndrewMurdoch1

Good Day

I've had a lot of problems with the memory and Angular, so this is how we keep it in check:

1. Use a Store to keep the view / map, and use the RenderFactory to attach the view / map into and remove it from a container.

2. Make sure you're removing, freeing or deleting as many resources as possible, for instance here is some code from our ngOnDestroy()

public ngOnDestroy(): void {
    this.esriSvc.removeMapViewContainer(this.mapViewEl);

    try {
      this._Attribution?.destroy();
      this._Attribution = null;
    } catch (error) {
      console.log(error);
    }

    try {
      this._clickEvent?.remove();
      this._clickEvent = null;
      this._BasemapGalleryWatcher?.remove();
      this._BasemapGalleryWatcher = null
    } catch (error) {
      console.log(error);
    }


    try {
      this._sketchWidget?.destroy();
      this._sketchWidget = null;

      this.sketchLayer?.destroy();
      this.sketchLayer = null;
    } catch (error) {
      console.log(error);
    }

    try {
      this._view.map.layers.forEach((layer) => {
        layer.clear()
        layer.destroy()
      })

      this._view.map.layers = null;
    } catch (error) {
      console.log(error);
    }

    try {
      this._view.ui.empty();
      this._view.popup = null;
    } catch (error) {
      console.log(error);
    }

    try {
      this._map.removeAll();
    } catch (error) {
      console.log(error);
    }

    try {
      this._widgets.forEach((widget) => {
        if (widget) {
          try {
            widget = null;
          } catch (error) {
            console.log(error);
          }
        }
      })

      this._widgets = [];
    } catch (error) {
      console.log(error);
    }

    //
    // NOTE: This function resets every variable we allocate
    //
    this.destroyStuff();
}

 

3. Litsten to Andy, he's awesome and has helped me in the past.

Using the method I described, I've been able to cycle between 10k maps with essentially 0 memory increase.  You can also look into using a global render setting, if that's applicable, and try to never destroy the map or remove and add it if you don't have to.  I've found in a lot of cases it's better to just hide it, then detach and add it back.  Although I know that can't always be avoided.