Problems using tiledMapLayer with MapServer

• Browser and version: Version 59.0.3071.115 (Official Build) (64-bit)
• Version of Leaflet (L.version): 1.1.0
• Version of esri Leaflet (L.esri.VERSION): 2.0.8
• I’m using the CDN (not webpack, browserigy,…)

What happens is: tile layer doesn’t load and I was expecting tiles to load ^_^.

---

Detailed explanation:

I was trying to reproduce this same example but with another MapServer, as you can check it in Plunker. But it doesn’t load the tiles:

I also tested the service with the ArcGIS Online Web Map Viewer and the services works properly: http://arcg.is/5mH00

It seems to be something related with the X & Y in the URL because some tiles load and some doesn’t.

I also tried using leaflet.TileLayer.WMTS but it didn’t work either

Any thoughts?

[jgravois]

when I try to merge this code with my application, it is throwing me an error:

see https://github.com/Esri/esri-leaflet/issues/1342

[jgravois]

there are a couple things going on with your tiled service

1. the SSL cert isn’t trustworthy
2. the web server doesn’t support CORS
3. the tiling scheme of the map service includes a single non-standard lod at level 0.

// Google/Bing/OSM/ArcGIS Online tile servers start at 156543/5.9165
{
  "level": 0,
  "resolution": 4.0448008356352134E12,
  "scale": 15287405654300000
},
{
  "level": 1,
  "resolution": 156543.03392800014,
  "scale": 5.91657527591555E8
}

this API makes a best faith effort to correct non-standard lods that we recognize, but even after downgrading to http and forcing a JSONP metadata request, i wasn’t able to get the layer to display the way it should.

// still no bueno
L.esri.tiledMapLayer({
  url: 'http://www.girona.cat/servergis/rest/services/MapesBase/Topografic_Girona/MapServer',
  useCors: false
}).addTo(map);

to resolve the problem you can instead define a custom crs for Leaflet manually.

// JSONP because server doesn't support CORS
L.esri.get.JSONP('http://www.girona.cat/servergis/rest/services/MapesBase/Topografic_Girona/MapServer', {}, function(error, response) {
  // loop through the lods of the esri tile service and pluck individual resolutions
  response.tileInfo.lods.forEach(function (lod) {
    serviceResolutions.push(lod.resolution);
  });

  // define a custom web mercator coordinate system for leaflet with one additional LOD
  var crs = new L.Proj.CRS("EPSG:3857","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs", {
    origin: [response.tileInfo.origin.x, response.tileInfo.origin.y ],
    resolutions: serviceResolutions
  });

  var map = L.map('map', {
    crs: crs
  }).setView([41.975680, 2.818628], 12);

  // by default you can only zoom in on a tileLayer to level 18
  L.tileLayer('http://www.girona.cat/servergis/rest/services/MapesBase/Topografic_Girona/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Powered by <a href="https://esri.com">Esri</a> | UMAT. Ajuntament de Girona',
    maxZoom: 23
  }).addTo(map);
}); 

live demo (based on logic you can find in our non-mercator projection sample)