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.

Please see https://stackoverflow.com/questions/12466634/using-leaflet-with-wmts-server — bugmenot123, Jan 22 '16 at 12:35
I did try with this Leaflet plugin https://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. — Mala, Jan 22 '16 at 13:03
Fiddle using leaflet.TileLayer.WMTS plugin http://jsfiddle.net/MalinAurora/dotr4gm3/3/ — Mala, Jan 22 '16 at 14:28
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. — Mala, Jun 11 '18 at 07:43

kontrollanten · Accepted Answer · 2018-06-16T13:01:00.517

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

Using Leaflet and Web Map Tile Service (WMTS)

1 Answers1