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:

• 
  GitHub - alexandre-melard/leaflet.TileLayer.WMTS: Add WMTS layering for leaflet
  
  • has the most detailed example
  
  


• GitHub - alcalin/L.TileLayer.WMTS: Simple Leaflet.js plugin for creating WMTS Tile layers.


• 
  GitHub - lexfoxer/leaflet.wmts: Use WMTS layers in Leaflet
  
  • this one is also available as NPM package (leaflet.wmts - npm)
  
  


• npm packages:
  
  • @mladen/leaflet.tilelayer.wmts - npm
  
  
  • leaflet-tilelayer-wmts - npm
  
  

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