Leaflet fails to overlay my ESRI hosted Tiled Service on the OpenStreetMap basemap

Question

I have a public-accessible tiled service hosted on the ESRI ArcGIS Online platform in EPSG 3857 (Web Sphere Mercator).

The service URL is https://tiles.arcgis.com/tiles/RylLPiI61AyfENce/arcgis/rest/services/VISCAmap3857/MapServer

I would like to view the tiled layer as overlay to the OpenStreetMap basemap using Leaflet.

var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

map = L.map('map', {
    zoom: 7,
    center: [-36.5, 145.5],
    layers: [OpenStreetMap_Mapnik]
});

I have tried both the Leaflet tileLayer and ESRI's Leaflet tiledMapLayer.

var my_tiled_layer_1 = L.esri.tiledMapLayer({
    url: "{MY_ARCGIS_URL}/MapServer"
})

var my_tiled_layer_2 = L.tileLayer('{MY_ARCGIS_URL}/MapServer/tile/{z}/{y}/{x}');

Neither of them worked. I can see the basemap but not the tiled layer. From the browser's development tool window, I can see the {y} {x} numbering was messed up and there were all 404 responses.

Using the post: Leaflet misinterpreting tiles info from an ESRI hosted Tiled Service, I can get the tile layer alone displayed on Leaflet but not correctly overlayed on the OpenStreetMap basemap.

Answer 1

Your own basemap uses the same coordinate system as OSM (wkid:3857/102100) but the origin and levels of detail don't match.

here'a another service you can use to compare: https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer

  // yours
  {  
    "level": 0,
    "resolution": 2116.670900008467,
    "scale": 8000000.0
  },
  {
    "level": 1,
    "resolution": 1058.3354500042335,
    "scale": 4000000.0
  },
  {
    "level": 2,
    "resolution": 529.1677250021168,
    "scale": 2000000.0
  }, // ...

  // everyone else's
  {
    "level": 0,
    "resolution": 156543.03392800014,
    "scale": 591657527.591555
  },
  {
    "level": 1,
    "resolution": 78271.51696399994,
    "scale": 295828763.795777
  },
  {
    "level": 2,
    "resolution": 39135.75848200009,
    "scale": 147914381.897889
  }, // ...

```

the example below demonstrates how to use Esri Leaflet to draw a tiled service with custom LODs, but this won't allow you to overlay it with the OSM tile service.

http://esri.github.io/esri-leaflet/examples/non-mercator-projection.html

To draw both services in the same application, you'll need to republish the service using the same LODs as Google/Bing/ArcGIS Online/OSM.

Answer 2

EDIT: my original post was off-target. Here's an updated post.

I think you've got a projection issue. The layer is using the spatial reference 102100, which is ESRI specific. It may be compatible, but doesn't seem to be... I'd look into seeing if you can change that. I can see that the ESRI Leaflet plugin is requesting tiles, but it must be requesting the wrong tiles, because the data isn't where it should be.

Here's my test in JSFiddle, which should be working. But it's not!

var map = L.map('map').setView([-37, 148], 6);

var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);


L.esri.tiledMapLayer({
    url: "https://tiles.arcgis.com/tiles/RylLPiI61AyfENce/arcgis/rest/services/VISCAmap3857/MapServer"
}).addTo(map);

(The example code is from the ESRI Leaflet examples, here.)