---
title: "Level of detail control | JavaScript maps SDK"
description: "Modify tile level of detail at high pitch angles."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# 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.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
zoom: 12,
pitch: 77,
center: [0, 0],
style: {
version: 8,
sources: {
numbers: {
type: 'raster',
url: 'https://demotiles.maplibre.org/debug-tiles/number/tiles.json',
tileSize: 256,
maxzoom: 19
}
},
layers: [
{
id: 'numbers',
type: 'raster',
source: 'numbers'
}
]
},
maxZoom: 22,
maxPitch: 85
});
function setLodParamsFromUi() {
const maxZoomVal = document.getElementById('max-zoom-levels-slider').value;
const tileCountVal = document.getElementById('tile-count-ratio-slider').value;
// Update UI labels
document.getElementById('max-zoom-levels-value').textContent = maxZoomVal;
document.getElementById('tile-count-ratio-value').textContent = tileCountVal;
// Apply parameters to our debug tiles source 'numbers'
try {
map.setSourceTileLodParams(maxZoomVal, tileCountVal);
} catch (e) {
console.warn("setSourceTileLodParams failed for source 'numbers':", e);
}
}
map.on('load', () => {
document.getElementById('max-zoom-levels-slider').addEventListener('input', setLodParamsFromUi);
document.getElementById('tile-count-ratio-slider').addEventListener('input', setLodParamsFromUi);
// Initial parameters setup
setLodParamsFromUi();
});
```
#### index.html
```html
Level of Detail Control
```
## 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](https://docs.maptiler.com/sdk-js/examples/3d-map/)
Tutorials
Create and display 3D terrain maps on web pages.
### [Minimap control](https://docs.maptiler.com/sdk-js/examples/control-minimap/)
Tutorials
Display an overview minimap control to aid map navigation.
### [Add a raster tile source](https://docs.maptiler.com/sdk-js/examples/map-tiles/)
Examples
Add a third-party raster source to the map.
### [Raster layer](https://docs.maptiler.com/sdk-js/examples/raster-layer/)
Tutorials
Add a raster image overlay to the map.