Implementing a cache cleanup method.

src/components/map/TileSet.tsx

@@ -4,6 +4,7 @@ import { isEqual, range } from 'lodash';
 import { Rectangle, TileKeyObject } from './types';
 import tileUri from './uris';
 import Tile from './Tile';
+import { tileSetConfig } from './config';
 
 /**
  * @hidden
@@ -47,7 +48,6 @@ export interface TileSetProperties {
  *
  * Idea stolen [on the web](https://dev.to/tiagof/react-re-mounting-vs-re-rendering-lnh)
  *
- * TODO: cache housekeeping
  *
  *
  */
@@ -88,10 +88,21 @@ export const TileSet: react.FC<TileSetProperties> = memo(
                   }}
                 />
               );
+            } else {
+              const tile = tiles.get(key);
+              tiles.delete(key);
+              tiles.set(key, tile);
             }
           });
         }
       );
+      if (tiles.size > tileSetConfig.cacheSize) {
+        const oldestTileKeys = [...tiles.keys()];
+        oldestTileKeys.splice(-tileSetConfig.cacheSize);
+        oldestTileKeys.forEach((tileKey) => {
+          tiles.delete(tileKey);
+        });
+      }
       globalThis.cacheForTileSet.set(key, tiles);
     }
 

src/components/map/config.ts

@@ -9,3 +9,7 @@ export const handlersConfig = {
   /** Controls the activity of the double touch move event */
   doubleTouchMoveThrottleDelay: 100,
 };
+
+export const tileSetConfig = {
+  cacheSize: 1000,
+}