3

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/… – bugmenot123 Jan 22 '16 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 '16 at 13:03
  • Please provide a fiddle then. – bugmenot123 Jan 22 '16 at 14:08
  • Fiddle using leaflet.TileLayer.WMTS plugin jsfiddle.net/MalinAurora/dotr4gm3/3 – Mala Jan 22 '16 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 '18 at 7:43
5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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