Tiles of arcgis layer do not load at all

Question

I tried using a specific arcgis layer with leaflet. However, I do not really know if I use it correctly or missed an important point, as the tiles are not loading and I do not get any error messages. Maybe someone know, what I did wrong / how to solve my problem.

Here is the initialisation of my leaflet map (the overlay 'hamburg' is the arcgis layer I am talking about):

angular.extend($scope, {
      hamburg: {
        lat: 53.551086,
        lng: 9.993682,
        zoom: 13
      },
      layers: {
        baselayers: {
          osm: {
            name: 'OpenStreetMap',
            type: 'xyz',
            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            layerOptions: {
              subdomains: ['a', 'b', 'c'],
              attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
              continuousWorld: true,
              opacity: 0.9,
              detectRetina: true,
              reuseTiles: true
            }
          }
        },
        overlays: {
          hamburg: {
            name: 'hamburg',
            url: 'https://tiles.arcgis.com/tiles/KHQBPiNdn2v7ViKB/arcgis/rest/services/Hafenkarte_FE/MapServer',
            type: 'xyz'
          }
        }
      },
      defaults: {
        zoomControlPosition: 'topright',
        maxZoom: 17,
        minZoom: 13,
        scrollWheelZoom: true
      }
    });

Thanks!

Answer 1

This isn't working because you are defining the layer as an xyz layer which Esri layers aren't. Using Esri layers requires you to load the leaflet-esri library and define a different layertype. When i visit the URL you're trying to use and append /WMSServer i see that's it's an Esri image layer with a mosaic rule, which is to my knowledge not support in the directive, but i could be wrong. There are lots of examples on the directive's example page on how to use Ersi layers with the directive. I suggest you take a look (under tab layers):

http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/basic/first-example

More on using Leaflet and Esri in general can be found here:

http://esri.github.io/esri-leaflet/