Addings WMTS to Leaflet?

I’m looking to find a way to add the WMTS version of my configuration to Leaflet.

I’ve found instructions on how to integrate a sentinel-hub configuration into Leaflet using the Playground. However, the Playground provides an example code for a Leaflet map that uses the WMS version.

Is there any way to get an example of a Leaflet map utilizing the WMTS version?

Hey, unfortunately we don’t have a Leaflet example ready, but it is similar to using WMS in Leaflet.

We have a documentation page for WMTS with an example for OpenLayers, which can help you see what parameters to set.

A plugin is needed for using WMTS in Leaflet:

For basic usecases the code looks pretty similar to the one for WMS that you already found.

You will need to extend the WMTS class if you want to use any of the custom params for a more complex usecase (custom params are listed here - some of them, like downsampling and upsampling, can be set in the layers in the dashboard though).

Hopefully this helps.
Cheers.

Thank you for the detailed response. I was able to find a solution based on your suggestions.

I used this npm package: * @mladen/leaflet.tilelayer.wmts - npm

However, I needed to update the code to make it work with the sentinel hub WMTS server:

  1. Originally, the L.TileLayer.WMTS object that this package creates structured the GetTile request URL with both the tilematrixSet and tilematrix values combined with a colon, and passed into the tilematrix parameter - ie. &tilematrix=PopularWebMercator512:7. This URL construction needed be updated to separate these values - ie. &tilematrix=7&tilematrixSet=PopularWebMercator512

  2. The WMTS layer used as a reference in this object had 22 values in its matrix, which were zero based vs. the 20 values in the sentinel configuration which were 1-based. This required updating the getDefaultMatrix function to produce the correct matrix

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.