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 stackoverflow.com/questions/12466634/… Jan 22, 2016 at 12:35
  • 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.
    – Mala
    Jan 22, 2016 at 13:03
  • Please provide a fiddle then. Jan 22, 2016 at 14:08
  • Fiddle using leaflet.TileLayer.WMTS plugin jsfiddle.net/MalinAurora/dotr4gm3/3
    – Mala
    Jan 22, 2016 at 14:28
  • 1
    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, 2018 at 7:43

1 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',

You can see my full example at https://github.com/kontrollanten/lantmateriet-leaflet


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.