mapbox / mapbox/mapbox-gl-js

Is maxTileCacheSize not considered?

Open
#12,890 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

feature :green_apple:
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.