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(@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 install --save leaflet

main.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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Leaflet detect retina/HiDPI display | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Detect retina</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>

  <script>
    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);
  </script>
</body>

</html>

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.

Learn more

Example using the scale parameter in the tileLayer url.


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);

Leaflet detect retina/HiDPI display

main.js

index.html

style.css

Learn more

How to use Leaflet

Custom Map

Display Marker

Make a map with pins

Leaflet detect retina/HiDPI display

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Learn more

Related examples

How to use Leaflet

Custom Map

Display Marker

Make a map with pins