Is maxTileCacheSize not considered?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
Hello,
here is my problem, presumingly a bug.
**Environment and introduction**
I'm actually developing an Angular based PWA using MapBox GL JS (version 2.14.1). As the PWA is intended to run on mobile devices, they might be offline or have a very low data rate during an unspecific period of time, which could affect the proper map tile download. To encounter that issue, I add a feature to select a bounding box around a customizable area and preload the tiles in various zoom levels (as shown below). MapBox will then download a large number of tiles in advance and stores them into their native 'mapbox-tiles' cache.
I'm using Chrome 116.0.5845.180 as my browser.
**Expected behavior**
Increasing 'maxTileCacheSize' would allow to store more tiles to the cache.
**Current behavior**
Changing 'maxTileCacheSize' does not affect the number of tiles stored to the cache, which is 500.
**My code**
_Map initialization_
```
const map = new mapboxgl.Map({
accessToken: environment.tokens.mapbox,
style: `mapbox://styles/mapbox/${this.mapStyle}`,
container: 'map',
minZoom: environment.map.minZoom,
maxZoom: environment.map.maxZoom,
maxTileCacheSize: environment.map.maxTileCacheSize, // <-- tile cache size is set here
zoom: transform?.zoom,
center: transform?.center,
});
```
_Preloading tiles_
```
for (let i = 0; i < tiles.length; i++) { // <-- the calculated tiles are fine
if (this.doInterrupt) {
break;
}
const tile = tiles[i];
map.jumpTo({
center: calculator.tileToPoint(tile), // <-- calculates a coordinate concerning the tile
zoom: tile.z,
'preloadOnly': true
} as any);
await map.once('idle');
// ...
}
```
Addition:
I found out, that the actual tile count within the cache is obviously (and exclusively) managed by the a web-worker and the value is stored within [tile_request_cache.js](https://github.com/mapbox/mapbox-gl-js/blob/fae4d31d190e996a85adcd2eb95b6f35c676f316/src/util/tile_request_cache.js#L4).
```
const CACHE_NAME = 'mapbox-tiles';
let cacheLimit = 500; // 50MB / (100KB/tile) ~= 500 tiles // <--- this guy
let cacheCheckThreshold = 50;
```
I didn't find a way to modify this `cacheLimit` without forking or editing local files.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the Map initialization using maxTileCacheSize and inspect src/util/tile_request_cache.js, especially the fixed cacheLimit and its web-worker usage. Reproduce the preload flow with the supplied map.jumpTo calls, then trace whether the option reaches the cache; done means changing maxTileCacheSize changes the effective tile limit instead of retaining 500.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, javascript, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100