More cleanup for the tiled layer cache.

src/components/map/TileSet.tsx

@@ -49,7 +49,6 @@ export interface TileSetProperties {
  * Idea stolen [on the web](https://dev.to/tiagof/react-re-mounting-vs-re-rendering-lnh)
  *
  *
- *
  */
 export const TileSet: react.FC<TileSetProperties> = memo(
   (props: TileSetProperties) => {
@@ -96,14 +95,21 @@ export const TileSet: react.FC<TileSetProperties> = memo(
           });
         }
       );
-      if (tiles.size > tileSetConfig.cacheSize) {
+      if (tiles.size > tileSetConfig.cacheSizePerLayer) {
         const oldestTileKeys = [...tiles.keys()];
-        oldestTileKeys.splice(-tileSetConfig.cacheSize);
+        oldestTileKeys.splice(-tileSetConfig.cacheSizePerLayer);
         oldestTileKeys.forEach((tileKey) => {
           tiles.delete(tileKey);
         });
       }
       globalThis.cacheForTileSet.set(key, tiles);
+      if (globalThis.cacheForTileSet > tileSetConfig.numberOfCachedLayers) {
+        const oldestCachedLayerKeys = [...globalThis.cacheForTileSet.keys()];
+        oldestCachedLayerKeys.slice(-tileSetConfig.numberOfCachedLayers);
+        oldestCachedLayerKeys.forEach((cachedLayerKey) => {
+          globalThis.cacheForTileSet.delete(cachedLayerKey);
+        });
+      }
     }
 
     return <>{Array.from(tiles.values())}</>;

src/components/map/config.ts

@@ -11,5 +11,6 @@ export const handlersConfig = {
 };
 
 export const tileSetConfig = {
-  cacheSize: 1000,
+  cacheSizePerLayer: 1000,
-}
+  numberOfCachedLayers: 20,
+};