Select to view content in your preferred language

Leaflet tms propertly equivalent in ESRI WebTiledLayer

739
2
02-13-2018 01:09 AM
RaghuM
by
New Contributor

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)

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Emeritus

Raghu,

   What is the WKIDs of these two tiled map services?

0 Kudos
RaghuM
by
New Contributor

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

0 Kudos