Adding Australian topographic base map WMTS to Leaflet web map

Question

I am trying to add this topographic WMTS from Geoscience Australia as a base map to a Leaflet web map.

In QGIS I can create a new wmts connection and add the service using the connect point URL - https://services.ga.gov.au/gis/rest/services/Topographic_Base_Map/MapServer/WMTS/1.0.0/WMTSCapabilities.xml

Layer properties:

The service can also be seen in ArcGIS online map viewer, however I can not work out how to add this as a base map in my Leaflet web map.

I have looked at the Leaflet Docs and tried to create a L.tileLayer()/ L.tileLayer.wms()

e.g.

var topo_basemap = L.tileLayer('https://services.ga.gov.au/gis/rest/services/Topographic_Base_Map/MapServer/WMTS/1.0.0/Topographic_Base_Map/{z}/{x}/{y}.png').addTo(pMap);

and

var topo_basemap = L.tileLayer.wms('https://services.ga.gov.au/gis/rest/services/Topographic_Base_Map/MapServer/WMTS',
{
format: 'image/png',
transparent: true,
layers: 'Topographic_Base_Map'
}).addTo(pMap);

The base map doesn't load. Inspecting the browser console, it seems like Leaflet is requesting tiles, but there are multiple OpaqueResponseBlocking warnings and I just don't know enough about this to start troubleshooting. I don't know if the problem is invalid/incorrect parameters in the tileLayer() constructor or something else.

How can I add this WMTS service as a basemap to my Leaflet web map?

Answer 1

The below three will work, but only up to and including zoom 12:

L.tileLayer('https://services.ga.gov.au/gis/rest/services/Topographic_Base_Map/MapServer/tile/{z}/{y}/{x}');
L.tileLayer('https://services.ga.gov.au/gis/rest/services/Topographic_Base_Map/MapServer/WMTS/tile/1.0.0/Topographic_Base_Map/default/GoogleMapsCompatible/{z}/{y}/{x}.png');
L.tileLayer('https://services.ga.gov.au/gis/rest/services/Topographic_Base_Map/MapServer/WMTS/tile/1.0.0/Topographic_Base_Map/default/default028mm/{z}/{y}/{x}.png');

Despite capabilities document stating that zooms up to 23 are available, for zooms higher than 12 service returns status 400.