I think the issue you had was because Lantmäteriet is using SWEREF 99/EPSG:3006 projection and Leaflet is using EPSG:3857. My solution was to use proj4leaflet to transform between those projections, like this:
import L from 'leaflet';
import { CRS } from 'proj4leaflet';
const apiKey = process.env.LANTMATERIET_TOKEN;
// This is the important task, where we set the map projection to EPSG:3006
const crs = new L.Proj.CRS('EPSG:3006',
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [
4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8
],
origin: [-1200000.000000, 8500000.000000 ],
bounds: L.bounds( [-1200000.000000, 8500000.000000], [4305696.000000, 2994304.000000])
});
const map = new L.Map('map', {
crs: crs,
continuousWorld: true,
});
new L.TileLayer(`https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/${apiKey}/?service=wmts&request=GetTile&version=1.0.0&layer=topowebb&style=default&tilematrixset=3006&tilematrix={z}&tilerow={y}&tilecol={x}&format=image%2Fpng`, {
maxZoom: 9,
minZoom: 0,
continuousWorld: true,
attribution: '© <a href="https://www.lantmateriet.se/en/">Lantmäteriet</a> Topografisk Webbkarta Visning, CCB',
}).addTo(map);
You can see my full example at https://github.com/kontrollanten/lantmateriet-leaflet
I made a jsfiddle to give you an example of how to create a L.tileLayer from your GetCapabilities document.
It's a quick mockup and could be improved a lot (absolutely no error handling, XML search is rather naive etc.), but gives you an idea about how to get going.
Note: you can use a layer name of your choice, but there is no further dynamics in creating the base URL for the L.tileLayer. All further value parsing is hardcoded (e.g. see the part where the subdomains are extracted and listed). More versatile parsing would require a lot more effort in string matching and so forth...
Best Answer
Technically wmts could be use as a tilelayer, but will have to figure out your Tiling structure. A constructor for a layer could look something like this: