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/{z}/{x}/{y}@2x.jpg.

Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

Learn more

Example using the scale parameter in the tileLayer url.

const myLayer = L.tileLayer(
  `https://api.maptiler.com/maps/satellite/{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

Example

How to use Leaflet: This tutorial shows how to create a Leaflet map and display it on a web page using MapTiler Cloud.

Custom Map

Example

How to display your custom map on a web page: this tutorial demonstrates how to display a custom map from MapTiler Cloud on a web page using Leaflet JS.

Display Marker

Example

Display a Marker on the Map: this tutorial shows how to add the default Marker to the map using Leaflet JS.

Make a map with pins

Example

This tutorial shows how to make a map with pins using Leaflet JS.