Correct syntax to add WMTS to Leaflet map

Question

Trying to show FAA sectional charts on leaflet map. The map does render in QGIS. QGIS layer properties shows:

Name: VFR_Sectional
URL: https://tiles.arcgis.com/tiles/ssFJjBXIUyZDrSYZ/arcgis/rest/services/VFR_Sectional/MapServer/WMTS
Source: crs=EPSG:3857&dpiMode=7&format=image/jpgpng&layers=VFR_Sectional&styles=default&tileMatrixSet=default028mm&url=https://tiles.arcgis.com/tiles/ssFJjBXIUyZDrSYZ/arcgis/rest/services/VFR_Sectional/MapServer/WMTS
Provider: wms

Code snippet in Leaflet that I tried:

url = 'https://tiles.arcgis.com/tiles/ssFJjBXIUyZDrSYZ/arcgis/rest/services/VFR_Sectional/MapServer/WMTS';
var TopoLayer = L.tileLayer(url, {
  layers: 'VFR_Sectional',
  dpiMode: '7',
  format: 'image/jpgpng',
  tileMatrixSet: 'default028mm'
}).addTo(mymap);

No success, blank map. Can someone advise on the correct Leaflet syntax to use?

Did you try to add it like L.tileLayer.wms(...)..addTo(mymap); ? — Taras
– Taras ♦, Commented Sep 11, 2024 at 20:34
See also this thread for more details: gis.stackexchange.com/questions/177823/… — Taras
– Taras ♦, Commented Sep 11, 2024 at 20:36

TomazicM · Accepted Answer · 2024-09-11 21:24:33Z

If you look at the WMTS specification at https://tiles.arcgis.com/tiles/ssFJjBXIUyZDrSYZ/arcgis/rest/services/VFR_Sectional/MapServer/WMTS, you'll se that WMTS service URL should be constructed like that:

https://tiles.arcgis.com/tiles/ssFJjBXIUyZDrSYZ/arcgis/rest/services/VFR_Sectional/MapServer/WMTS/tile/1.0.0/VFR_Sectional/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}

Sequence {TileMatrix}/{TileRow}/{TileCol} actually means {z}/{y}/{x}. From service definition you can also see than min zoom is 8 and max zoom is 12.

So code to display layer could looks something like this:

var map = L.map('map', {
  center: [36, -114.96],
  zoom: 8,
  minZoom: 8,
  maxZoom: 12
});

var template =
  'https://tiles.arcgis.com/tiles/ssFJjBXIUyZDrSYZ/arcgis/rest/services/VFR_Sectional/MapServer/WMTS/tile/1.0.0/VFR_Sectional/{style}/{tileMatrixSet}/{z}/{y}/{x}'

var layer = L.tileLayer(template, {
  tileMatrixSet: 'default028mm',
  style: 'default'
}).addTo(map);

This would show you the following map:

Thank you TomazicM, that was the solution we were looking for! Now, if only the ESRI had a better service that posted readable online FAA sectional charts. — CD5014
– CD5014, Commented Sep 12, 2024 at 13:47

Stack Exchange Network

Correct syntax to add WMTS to Leaflet map

1 Answer 1

Your Answer

Linked

Hot Network Questions

Correct syntax to add WMTS to Leaflet map

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions