I'm trying to add a leaflet map to an Angular 2 project, which shows a layer from an ESRI mapserver as a tileLayer. As such:

ngOnInit(): void {
    let map = L.map('map', {
        crs: L.CRS.EPSG3857});
    map.setView([51.19612, 4.4206237], 10)
    let tileLayer = L.tileLayer('http://geodata.antwerpen.be/arcgissql/rest/services/P_Publiek/P_basemap_wgs84/MapServer/tile/{z}/{x}/{y}', {
        minZoom: 1, maxZoom: 18, maxNativeZoom: 21, bounds: [[51.13, 4.28], [51.27, 4.56]]

The initialization of the map works as intended, and the map tries to add tiles from the correct baseUrl. However when it searches for the {x} and {y} coordinates, something gets messed up. For zoomlevel 10 I get an 404 for http://geodata.antwerpen.be/arcgissql/rest/services/P_Publiek/P_basemap_wgs84/MapServer/tile/10/524/342 which is correct as the tiles for that zoomlevel are situated around 68300 {x} and 71000 {y}.

I am not an expert regarding mapserver/leaflet/coordinate systems, so I could be missing something obvious, but in the documentation on leaflet or in the various examples I haven't seen anything regarding defining the origin of tiles.

I have tried what's suggested here: https://stackoverflow.com/questions/22504251/set-map-center-in-leaflet-with-3857-lat-lon

Following plnker gives the very basic case with the corresponding url and the returning wrong results: wrong tiles plunker.

My question ultimately is: am I missing something regarding the definition of the tiles or is there something in the configuration of the mapserver/layer which I need to take in to account?

EDIT: tested the same plunker with the maptile from OSM (http://{s}.osm.maptiles.xyz/{z}/{x}/{y}.png) and these give back some result. The direction of the tiles is not correct, but at least they get found. Maybe something in the configuration of the original mapserver is wrong?

  • In the tileLayer constructor, where you're passing-in your layer options (i.e. the url, the zoom values, etc), try adding "tms": false ..or optionally, "tms": true. See if one or the other bring the layer to life. – elrobis Apr 6 '17 at 15:06
  • Setting "tms": true increases the {y} to 682. "tms": false seems to be the default as it returns the same results. – Ast Apr 6 '17 at 18:30
  • Gotcha. I should have read more closely. Since this is an ESRI-served tileset, you likely need to add the L.esri.TiledMapLayer support to your project and instantiate your layer according to their documentation. Leaflet itself is certainly not the issue, rather Leaflet's tileLayer class is trying to instantiate this layer using an incongruent tiling standard. – elrobis Apr 6 '17 at 22:54
  • @elrobis cheers for the input. I already tried using the esri-leaflet toolset, but for the moment that seems to be a no-go for this project as there is no typescript support available for esri-leaflet for the moment. Think I might have to take a look at OL3, see what that gives me. – Ast Apr 7 '17 at 7:49

Your Answer

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

Browse other questions tagged or ask your own question.