Description
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)
mI 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.