Retina Basemap

Displaying basemaps at higher resolutions on retina devices with the detectRetina option. In this example the base layer is added at retina resolutions and the labels are added at regular resolutions.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Retina Basemap</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-E0DKVahIg0p1UHR2Kf9NX7x7TUewJb30mxkxEm2qOYTVJObgsAGpEol9F6iK6oefCbkJiA4/i6fnTHzM6H1kEA=="
    crossorigin=""></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

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

<script>
  var map = L.map('map').setView([41.96, -82.12], 8);

  // use the detect retina option to load retina tiles for this layer.
  L.esri.basemapLayer('DarkGray', {
    detectRetina: true
  }).addTo(map);

  // include the labels at normal resolution
  L.esri.basemapLayer('DarkGrayLabels').addTo(map);
</script>

</body>
</html>

Edit this sample on GitHub

Terms