Using Leaflet and Web Map Tile Service (WMTS)

Question

I'm trying to use an API for rendering tiles with a Leaflet map. A link to the API looks like this and I think that the format is WMTS:

https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/{your token}/?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=topowebb&ST YLE=default&TILEMATRIXSET=3006&TILEMATRIX=9&TILEROW=862&TILECOL=887& FORMAT=image%2Fpng

I'm not getting the expected result when rendering the map, the tiles does not seem to be places in the correct order. Here is a jsFiddle showing the map: http://jsfiddle.net/MalinAurora/udj8ed93/2/

I guess it has something to do with the format, but I can't figure out how to solve it.

• bugmenot123: Please see stackoverflow.com/questions/12466634/…
• Mala: I did try with this Leaflet plugin github.com/mylen/leaflet.TileLayer.WMTS, which is based on the same code that is linked in the question. But I got the same result.
• bugmenot123: Please provide a fiddle then.
• Mala: Fiddle using leaflet.TileLayer.WMTS plugin jsfiddle.net/MalinAurora/dotr4gm3/3
• Mala: Well I solved it, but it was so far from the original question that I didn't think it was relevant anymore. I ended up switching to Google Maps. I couldn't fetch the tiles through Lantmäteriet directly, I got them from a Geoserver that had a WMS service. Then I could use this to render the tiles.

Answer 1

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: '&copy; <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