[GIS] 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.

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