ESRI TileLayer with non-standard 0 zoom does not load in Leaflet

Question

appreciate some assistance with figuring out why ESRI Tile layer does not load in Leaflet? It loads in OpenLayers and of course when using the ESRI JS API, but I'd like to use Leaflet...

This is the standard Leaflet "Quickstart" example with the Tile Layer url. I've tried many options of both the layer and map constructor and forcing the map to resize and redraw etc, but I can't get it to work...

<html>
<head>
  <meta charset=utf-8 />
  <title>Esri Leaflet Quickstart</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.0.3/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.0.8"></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>
function initmap() {
    map = new L.Map('map');
    //var osmUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png'; <- example from Esri-Leaflet that works fine
    var osmUrl = 'https://citymaps.capetown.gov.za/agsext1/rest/services/Background_Maps/Relief_Map/MapServer/tile/{z}/{y}/{x}';
    var osm = new L.esri.tiledMapLayer({url:osmUrl, noWrap: true});
    map.addLayer(osm);
}
var lat = Number(18.5296);
var lng = Number(-33.9597);
var startLatLng = new L.LatLng(lat, lng);
initmap();
map.setView(startLatLng, 0); 
</script>

</body>
</html>

OpenLayers example of exactly the same that works:

<!DOCTYPE html>
<html>
  <head>
    <title>Tiled ArcGIS MapServer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.1.0/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.1.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var urlRelief    = 'https://citymaps.capetown.gov.za/agsext1/rest/services/Background_Maps/Relief_Map/MapServer';
      var layers = [
/*         new ol.layer.Tile({
          source: new ol.source.OSM()
        }), */
        new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url: urlRelief,
            projection: 'EPSG:4326',
            wrapX: false
          })
        })
      ];

      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [2062612, -4026418],
          zoom: 10
        })
      });
    </script>
  </body>
</html>

Not sure if this is a clue to the problem? The relief map I am trying to load appears to not start at "zoom level 0" i.e. with the whole world on 1 tile at zoom level 0... it "starts" at a zoom level (0) which appears to be a 6x6 grid covering just the extent in question... — Cloudstako, Apr 16 '17 at 11:54

john gravois · Answer 1 · 2017-04-25T18:46:48.080

i see several different problems going on here:

you shouldn't append /tile/{z}/{y}/{x} to urls when instantiating a tiledMapLayer. we don't do that in our samples.
Leaflet (and consequently Esri Leaflet) only know about the explicit tiling scheme used by Google, Bing etc. your service may reference the same base projection, but it utilizes a non standard tiling scheme (ie: the resolutions and scales differ). in Esri Leaflet we attempt to remap LODs, but only when we recognize the scale and resolution.

standard:

  {
    "level": 10,
    "resolution": 152.87405657041106,
    "scale": 577790.554289
  },
  {
    "level": 11,
    "resolution": 76.43702828507324,
    "scale": 288895.277144
  },
  {
    "level": 12,
    "resolution": 38.21851414253662,
    "scale": 144447.638572
  },

yours:

{
    "level": 0,
    "resolution": 135.46693760054188,
    "scale": 512000
},
{
    "level": 1,
    "resolution": 67.73346880027094,
    "scale": 256000
},
{
    "level": 2,
    "resolution": 33.86673440013547,
    "scale": 128000
}

your best option is to stick with Google's standard tiling scheme even if you want to restrict the area of interest. this can be accomplished pretty easily in ArcGIS Desktop whether you end up publishing tiles to ArcGIS Online, ArcGIS Server or creating a custom tile package.

ESRI TileLayer with non-standard 0 zoom does not load in Leaflet

1 Answers1