Level of detail control

Adjust how many distinct zoom levels are visible on screen and manage the tile density budget at high pitch angles.

This example demonstrates how to use the setSourceTileLodParams() method to optimize map tile loading and rendering performance when the camera is heavily tilted (high pitch), displaying tile boundaries to visualize the Level of Detail (LOD) transitions.

Learn more

How it works

When the map is pitched and the horizon is visible, tiles in the distance appear smaller and closer to the horizon. By default, the rendering engine balances performance and quality by loading fewer, lower-resolution tiles in the distance.

With setSourceTileLodParams(), you can override this behavior:

• Max Zoom Levels On Screen (maxZoomLevelsOnScreen): Limits the variety of distinct zoom levels rendered simultaneously. Lowering this value reduces the “depth” of zoom levels rendered, which can save network requests and memory, but distant areas will look less detailed.
• Tile Count Max/Min Ratio (tileCountMaxMinRatio): Controls the budget of tiles. A higher ratio allows more tiles to be loaded across different zoom levels, while a lower ratio restricts them, forcing distant tiles to stay at a lower zoom level to save resources.

Related examples

3D Terrain Map

Tutorials

Create 3D terrain maps with geocoding in React JS.

Minimap control

Tutorials

Display an overview minimap control to aid map navigation.

Add a raster tile source

Examples

Add a third-party raster source to the map.

Raster layer

Tutorials

Add a raster image overlay to the map.