For a dataset, Leaflet renders API tile service correctly when tms property is passed. But in ESRI Webtile layer do we have an equivalent option to pass this tms property or should I be using a different layer type to render api tile service?
In leaflet, mapbox streets has been added as the first tile layer and then on top of it another tile service layer has been added.
MapBox streets API Zoom level , X & Y coordinates are - 18 / 65916 / 98537
Custom Tile API Zoom level , X & Y coordinates are - 18 / 65916 / 163606 (how does this y value changes on the above tile in leaflet but not in ESRI. This happens only when tms property is passed in leaflet)
Raghu,
What is the WKIDs of these two tiled map services?
Thanks for getting back Robert. We found the solution, this needs to be done by normalizing the coordinates and use it in getTileUrl
var getNormalizedCoord = function(coord, zoom) {
var y = coord.y;
var x = coord.x;
var tileRange = 1 << zoom;
if (y < 0 || y >= tileRange) {
return null;
}
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {x: x, y: y};
}
yourLayer.getTileUrl = function(l,r,c){
var normalizedCoord = getNormalizedCoord({x:c,y:r}, l);
if (!normalizedCoord) {
return null;
}
var bound = Math.pow(2, l);
var url = this.url.replace('${col}', normalizedCoord.x)
url = url.replace('${row}', (bound - normalizedCoord.y -1))
url = url.replace('${level}', l)
return url;
}
map.addLayer(yourLayer);