diff --git a/src/components/map/TileSet.tsx b/src/components/map/TileSet.tsx index 707b617..318a6f0 100644 --- a/src/components/map/TileSet.tsx +++ b/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 = 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); } diff --git a/src/components/map/config.ts b/src/components/map/config.ts index aebc69c..014bb7a 100644 --- a/src/components/map/config.ts +++ b/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, +}