1

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.

  • 2
    without being able to see the service metadata, my best guess is that the LODs and/or origin of the coordinate system defined for your own service don't match osm/bing/google – John Gravois Jan 23 '18 at 5:35
  • Thanks @JohnGravois. I have edited the question and attached the URL to the tiled service on AGOL. Please have a look. – alextc Jan 23 '18 at 21:48
2

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.

  • Thanks John! Republishing the service using the same LODs as GM/Bing/AGOL did the trick. – alextc Jan 28 '18 at 23:16
  • glad to hear it. – John Gravois Jan 30 '18 at 0:18
0

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

  • esri tiled services definitely use {z}/{y}/{x} order: github.com/Esri/esri-leaflet/blob/master/src/Layers/… – John Gravois Jan 23 '18 at 5:33
  • Actually I tried both numbering options and neither of them worked for me. I have edited the question by attaching the URL to the tiled service on AGOL. – alextc Jan 23 '18 at 21:44
  • Thanks for testing the code. This hit the same issue as mine did. Leaflet was requesting tiles but the tiles were not found (returning 404 responses). My suspicion is the tiles generated have wrong start and end numbers for each zoom level, but I don't know how to deal with it. They were generated from ArcMap and AGOL based on my predefined tiling schema. – alextc Jan 24 '18 at 5:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.