I am working on showing my ESRI tiled layer to a simple Leaflet web viewer.

The tiled layer is hosted from ArcGIS Online.

I tested both the ESRI Leaflet plugin and the original Leaflet's tyleLayer with Leaflet API.

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}');

The initialization of the map worked as intended, and the map tried to add tiles from the correct URL. However when it searched for the {x} and {y} coordinates, something got messed up. Either option gave me a whole bunch of 404 responses. From the Developer Tool, I found the actual tiles it was trying to load did not exist at all. For example Leaflet tried to load


However, the actual Level 8 tiles only range from MapServer/tile/8/16028/10942 to MapServer/tile/8/16201/11189

Is there anything I did wrong?


1 Answer 1


I managed to get it working wihout esri_leaflet plugin by using Proj4Leaflet plugin. Parameters for customizing CRS 3857 were taken from ArcGIS service description at https://tiles.arcgis.com/tiles/RylLPiI61AyfENce/arcgis/rest/services/VISCAmap3857/MapServer. Description of EPSG:3875 for Proj4js comes from http://epsg.io/3857

var customCRS = new L.Proj.CRS('customCRS',
               '+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: [-20037700, 30241100],
                 resolutions: [2116.670900008467, 1058.3354500042335, 529.1677250021168, 264.5838625010584, 132.2919312505292, 66.1459656252646, 46.30217593768521, 26.458386250105836, 13.229193125052918],

var map = L.map('map', {
    crs: customCRS

var esriLayer = L.tileLayer("http://tiles.arcgis.com/tiles/RylLPiI61AyfENce/arcgis/rest/services/VISCAmap3857/MapServer/tile/{z}/{y}/{x}", {
    tileSize: 256,
    maxZoom: 8,
    minZoom: 0,
    attribution: '&copy VISCA map'

map.setView([-36, 144], 0);
  • Thanks @TomazicM. I was unable to get your example working. I have a base map from OpenStreetMap, i.e. var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; <a href="openstreetmap.org/copyright">OpenStreetMap</a>' }); as well as a few other overlays. When the map's "crs" option was modified to customCRS, the basemap and the overlays were missing. It seems the map was messed up with projections. Any idea?
    – alextc
    Jan 22, 2018 at 0:22
  • Can you please get another working example with the OpenStreetMap as the basemap?
    – alextc
    Jan 22, 2018 at 3:55
  • The answer is correct considering how the question is formulated. There are no other layers mentioned there. Regarding your additional explanation of the problem, to my knowledge (I'm GIS beginner, see gis.stackexchange.com/questions/252777/…) it is not possible to show layers with different CRS in the same map.
    – TomazicM
    Jan 22, 2018 at 16:38
  • Sure. I am happy to mark it answered. I will open another thread for the basemap issue.
    – alextc
    Jan 22, 2018 at 22:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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