diff --git a/src/components/map/TileSet.tsx b/src/components/map/TileSet.tsx index 318a6f0..2001e45 100644 --- a/src/components/map/TileSet.tsx +++ b/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 = memo( (props: TileSetProperties) => { @@ -96,14 +95,21 @@ export const TileSet: react.FC = 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())}; diff --git a/src/components/map/config.ts b/src/components/map/config.ts index 014bb7a..9fff0bf 100644 --- a/src/components/map/config.ts +++ b/src/components/map/config.ts @@ -11,5 +11,6 @@ export const handlersConfig = { }; export const tileSetConfig = { - cacheSize: 1000, -} + cacheSizePerLayer: 1000, + numberOfCachedLayers: 20, +};