---
title: "Leaflet detect retina/HiDPI display | Leaflet"
description: "Detect retina/HiDPI displays for high-resolution Leaflet JS map images."
---
> 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.
# Leaflet detect retina/HiDPI display
This tutorial shows how to detect a retina/HiDPI display to utilize the high resolution in the map images using Leaflet JS.
Using the `detectRetina` in the tileLayer options if the user is on a retina display, it will request four tiles of half the specified size and a bigger zoom level in place of one to utilize the high resolution.
You can also use the [scale parameter](https://docs.maptiler.com/cloud/api/maps/#tag/maps/GET/maps/{mapId}/{tileSize/}/{z}/{x}/{y}{scale}.{format})(`@2x`) in the tileLayer url to get the “retina”/HiDPI images directly from the server regardless of the device resolution. For example: `https://api.maptiler.com/maps/satellite-v4/{z}/{x}/{y}@2x.jpg`.
### NPM module setup
```bash
npm install --save leaflet
```
#### main.js
```js
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const map = L.map('map').setView([45.43725,10.69844], 14.84);
const layer = L.tileLayer(`https://api.maptiler.com/maps/satellite-v4/{z}/{x}/{y}.png?key=${key}`,{
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
crossOrigin: true,
detectRetina: true,
}).addTo(map);
```
#### index.html
```html
Leaflet detect retina/HiDPI display | NPM example
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
```
### Basic JavaScript setup
```html
Detect retina
```
Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
## Learn more
Example using the [scale parameter](https://docs.maptiler.com/cloud/api/maps/#tag/maps/GET/maps/{mapId}/{tileSize/}/{z}/{x}/{y}{scale}.{format}.path.scale) in the `tileLayer` url.
```js
const myLayer = L.tileLayer(
`https://api.maptiler.com/maps/satellite-v4/{z}/{x}/{y}@2x.jpg?key=${key}`,
{
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution:
'\u003ca href="https://www.maptiler.com/copyright/" target="_blank"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href="https://www.openstreetmap.org/copyright" target="_blank"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e',
crossOrigin: true,
},
).addTo(map);
```
## Related examples
### [How to use Leaflet](https://docs.maptiler.com/leaflet/examples/how-to-use-leaflet/)
Tutorials
Create and display Leaflet maps on web pages with MapTiler.
### [Custom Map](https://docs.maptiler.com/leaflet/examples/custom-map/)
Tutorials
Display custom MapTiler maps on web pages with Leaflet JS.
### [Display Marker](https://docs.maptiler.com/leaflet/examples/default-marker/)
Tutorials
Add default map markers using Leaflet JS web mapping library.
### [Make a map with pins](https://docs.maptiler.com/leaflet/examples/map-with-pins/)
Examples
Create maps with custom pins and markers in Leaflet JS.