Planetary computer tiles

Question

I'm trying to figure out how can I use Planetary computer as a provider of tiles.

I found how can I get links for a particular region, but unfortunately, Planetary Computer has a different format of URLs that supported by WebTileLayer.

examples of URLs -

https://planetarycomputer.microsoft.com/api/data/v1/item/tiles/WebMercatorQuad/{z}/{x}/{y}@1x?collection=3dep-lidar-dsm&item=VA_UpperMiddleNeckQL2_B2_2018-dsm-2m-1-2&assets=data&nodata=-9999
https://planetarycomputer.microsoft.com/api/data/v1/item/tiles/WebMercatorQuad/{z}/{x}/{y}@1x?collection=3dep-lidar-dsm&item=VA_UpperMiddleNeckQL2_B2_2018-dsm-2m-1-1&assets=data&nodata=-9999

As you can see the only difference is "item", but seems that WebTileLayer works with subdomains only.

Can anyone recommend which layer to use or how I can tweak WebTileLayer to work not with subdomains.

I already tried:

let customTileLayer = WebTileLayer.createSubclass({
      properties: {
        urlTemplate: "https://planetarycomputer.microsoft.com/api/data/v1/item/tiles/WebMercatorQuad/undefined/undefined/undefined@1x?collection=3dep-lidar-returns&item={subDomain}&assets=data&colormap_name=lidar-returns&nodata=-9999",
        subDomains: ['VA_UpperMiddleNeckQL2_B2_2018-dsm-2m-1-1', 'VA_UpperMiddleNeckQL2_B2_2018-dsm-2m-1-2']
      },
      getTileUrl: function (level: any, row: any, col: any) {
        return this.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row);
      }
    });

but it is not working

JohnGrayson · Answer

Not sure if this helps as I'm not familiar enough with this service, but here's an example of how you can extend the BaseTileLayer to access the service and use custom parameters:

https://codepen.io/john-grayson/pen/VwXWbjK

JohnGrayson · Answer

Correct, the data you're trying to load seems to represent two distinct datasets and the way to configure each one is via the URL parameters and not as part of the base URL, so you will need two different layers.  It always helps is you have a simple CodePen or similar showing us what you're trying, that way we can better understand your issues.

Karrok · Answer

strange, I copied these names...

anyway, seems that I got a conception of WebTileLayer incorrectly, the intention of this layer is to load tiles from different subdomains in parallel, right?

But my intention was - to load tiles from different URLs for some particular boundary box and seems that I "found" a way how to do this, but this solution is working pretty bad so far

// tileObjects - array of objects with fields { bbox: number[]; link: string }

Two more URLs to load items:

https://planetarycomputer.microsoft.com/api/data/v1/item/tiles/WebMercatorQuad/{z}/{x}/{y}@1x?collection=3dep-lidar-dtm-native&item=USGS_LPC_CA_LosAngeles_2016_LAS_2018-dtm_native-2m-1-9&assets=data&nodata=-9999
https://planetarycomputer.microsoft.com/api/data/v1/item/tiles/WebMercatorQuad/{z}/{x}/{y}@1x?collection=3dep-lidar-dtm-native&item=USGS_LPC_CA_LosAngeles_2016_LAS_2018-dtm_native-2m-1-10&assets=data&nodata=-9999

with tiles -

https://planetarycomputer.microsoft.com/api/data/v1/item/tiles/WebMercatorQuad/11/348/818@1x?collection=3dep-lidar-dtm-native&item=USGS_LPC_CA_LosAngeles_2016_LAS_2018-dtm_native-2m-1-9&assets=data&nodata=-9999
https://planetarycomputer.microsoft.com/api/data/v1/item/tiles/WebMercatorQuad/11/348/817@1x?collection=3dep-lidar-dtm-native&item=USGS_LPC_CA_LosAngeles_2016_LAS_2018-dtm_native-2m-1-10&assets=data&nodata=-9999

so, item names would be ['USGS_LPC_CA_LosAngeles_2016_LAS_2018-dtm_native-2m-1-9', 'USGS_LPC_CA_LosAngeles_2016_LAS_2018-dtm_native-2m-1-10']

I guess I need to work on math with fitting different "items" to each other(boundaries intersection).

If I'm wrong and you know a better way - let me know, please