CODEWITHSUNDEEP
leafletesri-leafletesri-oss
Cloudstako
Cloudstako

Reputation: 11

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

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/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/[email protected]"></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>

Upvotes: 1

Views: 393

Answers (1)

john gravois
john gravois

Reputation: 404

i see several different problems going on here:

  1. you shouldn't append /tile/{z}/{y}/{x} to urls when instantiating a tiledMapLayer. we don't do that in our samples.

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

Upvotes: 0

Related Questions