Performance issue when adding too many tiles to the map

[furkancelik]

Hi, I added more tiles as in the picture. (I need more tiles) I want to increase this number of tiles but there is a performance issue. How can we solve this?

Code

const GRID_SIZE = [50, 50];

  const tileWidth = 360 / GRID_SIZE[0];
  const tileHeight = 180 / GRID_SIZE[1];
  const tilesData = [];
  [...Array(GRID_SIZE[0]).keys()].forEach((lngIdx) =>
    [...Array(GRID_SIZE[1]).keys()].forEach((latIdx) =>
      tilesData.push({
        lng: -180 + lngIdx * tileWidth,
        lat: -90 + (latIdx + 0.5) * tileHeight,
      })
    )
  );

How many tiles are created when I make grid size [50,50]?
(I need 1000000 tiles in total. )

[vasturiano]

@furkancelik in that example a grid size of [50,50] would lead to 50x50 = 2500 tiles.

1M tiles seems well beyond what would be achievable with these tile objects (each is essentially a sliced segment of a ThreeJs sphere). I would say that going above 20k tiles at any given time starts struggling performance wise.

[luke-anykraft]

@vasturiano following up on an old thread here. Is there optimization available to improve the performance despite 20K++ tiltes? For example, I found this project online, which seems to use a very similar (if not the same) package as react-globe, which loads with pretty much no lag, despite having hundreds of thousands of tiles.