Select to view content in your preferred language

view.destroy() seems to not destroy layers

48
0
yesterday
BenjaminLecuona
Emerging Contributor
Hi community,
 
I am confused about the purpose and impact of `view.destroy()`.
 
In an Angular project I am working on, users frequently switch between maps. The problem is that after several switches, the application's memory usage increases abnormally.
 
After investigating, I found that at least one cause of this memory leak is that layers added to maps do not seem to be destroyed when `view.destroy()` is called.
 
I created sample code to reproduce this issue.
 
  • Scenario 1:
    • Step 1: Open the "Memory" tab in DevTools and check the total JS heap size 👉 59 MB.
    • Step 2: Switch from the "no map component" to the "map WITH layer component", then go back to the "no map component". Open the "Memory" tab in DevTools, click the "Collect garbage" button, and check the total JS heap size. 👉 It is now 95 MB. (+36 MB)
    • Step 3: Repeat the same navigation (switch from "no map component" to "map WITH layer component", then back to "no map component", collect garbage, and check the heap size). 👉 The total JS heap size is now 102 MB (+7 MB).
    • Step 4: If you repeat this navigation multiple times, you will see the total JS heap size increase by about 8 MB each time (probably the memory occupied by the layer): 👉 110 MB, 118 MB, 126 MB, etc.
  • Scenario 2:
    • If you follow the same steps as in Scenario 1, but navigate between "no map component" and "map WITHOUT layer component" instead, you will see the total JS heap size remains constant, except for the initial increase between steps 1 and 2 (+36 MB), which is probably due to the basemap requests cache (not sure).
To sum up, for any map without layers, the `view.destroy()` function seems to correctly clean up the map and its resources. However, as soon as a map has layers, its `map.destroy()` method does not seem to remove the layers' resources.
 
Confused by this, I also tried adding `map.allLayers.forEach(l => l.destroy())` and `map.destroy()` before calling `view.destroy()`, but got the same result.
 
In this sample code, the "memory leak" may seem negligible, but with heavy layers, the application's memory increases very quickly.
 
Thanks in advance for any help.
0 Replies