Stac Layer from Tiler Server - possibly incorrect x/y/z

[jlaura]

I am attempting to integrate stac-layer into a custom leaflet web map that displays planetary data. I have deployed a Titiler tiler server to AWS. I am using the following to instantiate a stac-layer on my web map:

      const url_to_stac_item = e.layer.feature.links[0].href;
      fetch(url_to_stac_item).then(res => res.json()).then(async feature => {

        const buildTileUrlTemplate = ({ href, bounds }) => {  
          console.log(bounds);
          let target = feature.properties["ssys:targets"][0].toLowerCase();
          return `https://lswzqqyazn5h732xngeagotvtq0qgecn.lambda-url.us-west-2.on.aws/${target}/tiles/{z}/{x}/{y}.png?url=${href}`
        };
        const lyr = await L.stacLayer(feature, { buildTileUrlTemplate, debugLevel: 2 });
        lyr.on("click", e => {
          this.removeLayer(lyr);
        })
        lyr.addTo(this);
      });
    }

This code is successfully executing and is generating the following URL, which is 404ing because the x/y/z location is out of bounds for the GeoTiff. https://lswzqqyazn5h732xngeagotvtq0qgecn.lambda-url.us-west-2.on.aws/mars/tiles/10/8/356.png?url=https://asc-mars.s3-us-west-2.amazonaws.com/themis_controlled/I63359022RDR/I63359022RDR_B10.tif

When I use leaflet in a Jupyter notebook and specify identical bounds like so:

# Titiler example
import requests
from ipyleaflet import (
    Map,
    basemaps,
    basemap_to_tiles,
    TileLayer,
    WMSLayer,
    GeoJSON,
    projections
)

bounds = (180.77, 38.89, 185.26, 56.81)

m = Map(
    center=(
        (bounds[1] + bounds[3]) / 2,
        (bounds[0] + bounds[2]) / 2
    ),
    zoom=7,
    crs=projections.EPSG4326,
)

layer = TileLayer(
    url="https://lswzqqyazn5h732xngeagotvtq0qgecn.lambda-url.us-west-2.on.aws/mars/tiles/{z}/{x}/{y}?url=https://asc-mars.s3-us-west-2.amazonaws.com/themis_controlled/I63359022RDR/I63359022RDR_B9.tif&rescale=0.0003,0.0009",
    min_zoom=2,
    max_zoom=8,
    zoom=6,
    opacity=1,
    attribution='USGS Astrogeology',
    show_Loading=True
)
m.add_layer(layer)
m

I see the following URL, which renders correctly (albeit with a terrible stretch, but that is fixable later!). https://lswzqqyazn5h732xngeagotvtq0qgecn.lambda-url.us-west-2.on.aws/mars/tiles/5/0/8.png?url=https://asc-mars.s3-us-west-2.amazonaws.com/themis_controlled/I63359022RDR/I63359022RDR_B10.tif

The {z}/{x}/{y} parameters in the URL are completely different! I am trying to understand where the z/x/y parameters are being set and what could possibly be different between the javascript map and the python example. Is this inside of stac-layer, georaster-layer-for-leafet or someplace else?

Addendum - yes, these data are specified in a 0-360 domain that is very common for non-Earth facing data. I made the python example to test that this was working in that domain. Setting the domain to the appropriate -179 to -174 also causes the same z/x/y issues on the javascript side.

[DanielJDufour]

I think the request for a zoom level 10 tile is coming from this line: https://github.com/stac-utils/stac-layer/blob/main/src/utils/tile-layer.js#L18

[DanielJDufour]

It's possible that we are miscalculating the bounds of this layer, but it'll require some more investigation.

[jlaura]

@DanielJDufour Huge thanks for the rapid response. Sounds good on the potential for a bounds miscalculation. Is that something that would be occurring in this library or in another library? I am happy to take a look at the code as well. I'm not just familiar with this project. Any starting point hints, if easy to provide, would be awesome!

[DanielJDufour]

I think this is the line that gets the bounds: https://github.com/stac-utils/stac-layer/blob/main/src/index.js#L297. I'm wondering if it's failing for some reason although it's just a guess.

If I had to guess, I would say that it's an issue with the stac-layer library, but I can't say for certain.