fix reuseMaps not removing map children (#2092)

visgl · Jan 7, 2023 · 9baded6 · 9baded6
1 parent b95ad3f
commit 9baded6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/components/map.tsx b/src/components/map.tsx
@@ -152,7 +152,9 @@ const Map = forwardRef<MapRef, MapProps>((props, ref) => {
   return (
     <div id={props.id} ref={containerRef} style={style}>
       {mapInstance && (
-        <MapContext.Provider value={contextValue}>{props.children}</MapContext.Provider>
+        <MapContext.Provider value={contextValue}>
+          <div mapboxgl-children="">{props.children}</div>
+        </MapContext.Provider>
       )}
     </div>
   );

diff --git a/src/mapbox/mapbox.ts b/src/mapbox/mapbox.ts
@@ -587,6 +587,11 @@ export default class Mapbox {
   /* eslint-enable complexity,max-statements */
 
   recycle() {
+    // Clean up unnecessary elements before storing for reuse.
+    const container = this.map.getContainer();
+    const children = container.querySelector('[mapboxgl-children]');
+    children?.remove();
+
     Mapbox.savedMaps.push(this);
   }