leaflet – Fixing WMTS Code in Leaflet

leafletwmts

I know this have been touched upon before, but the other posts did not entirely do it for me.
I'm trying to make a minimal Leaflet .html page with a map, containing a WMTS map. The code looks like this:

<html>
<head>
    <title>TEST leaflet.TileLayer.WMTS</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>        
    <script src="https://rawgithub.com/mylen/leaflet.TileLayer.WMTS/master/leaflet-tilelayer-wmts.js"></script>
</head>
<body>
    <div id="map" style="height: 100%; width: 80%"></div>
    <script>  // based on https://github.com/mylen/leaflet.TileLayer.WMTS

        var map = L.map('map', {CRS: L.CRS.EPSG25832});

        //  http://jordbrugsanalyser.dk/geoserver/gwc/service/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities
        var markWMTSlayer = new L.TileLayer.WMTS('http://jordbrugsanalyser.dk/geoserver/gwc/service/wmts', {
                                                layer: "Marker13", 
                                                format: "image/png", 
                                                style: "default", 
                                                tilematrixSet: "GST"});
        map.addLayer(markWMTSlayer);

        // http://data.geus.dk/arcgis/rest/services/GtW/S035_Jordartskort_25000/MapServer/WMTS/1.0.0/WMTSCapabilities.xml
        var jordWMTSlayer = new L.TileLayer.WMTS('data.geus.dk/arcgis/rest/services/GtW/S035_Jordartskort_25000/MapServer/WMTS', {
                                                layer: "GtW_S035_Jordartskort_25000", 
                                                format: "image/png", 
                                                style: "default", 
                                                tilematrixSet: "default028mm"});
        //map.addLayer(jordWMTSlayer);

        L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
        var baseLayers = {"jord": jordWMTSlayer, "mark": markWMTSlayer};
        L.control.layers(baseLayers, {}).addTo(map);            
    </script>
</body>

The resulting page can be seen live here: http://snapseatlas.dk/daftest/daf.html

Not that there is much to see, because only a grey background is shown.

I suspect my problem can be either:
1) I missed something fundamental, because I'm an Leaflet amateur, or
2) Something with the projection (EPSG:25832, is common in Denmark).

So please – Can somebody with a bit more Leaflet/WMTS experience have a look, and tell me what I'm doing wrong.

/M

Best Answer

There are quite a few reasons your code does not work.

First, there is map.setView call missing. Even everything else would be ok, map wouldn't show without this call.

Second, your WMTS service is using CRS EPSG 25832 projection, which is not natively supported in Leaflet. To use it, you must use Proj4Leaflet plugin.

Third, if you use Proj4Leaflet plugin, then leaflet.TileLayer.WMTS plugin won't work. You have to construct WMTS call yourself.

Fourth, the right name for your markWMTSlayer layer in WMTS service is Jordbrugsanalyser:Marker13.

Below is code, where I took CRS definition from somwhere else, so resolutions and origin are debatable. I also could not find any such data in WMTS GetCapabilites info.

<html>
<head>
  <title>TEST leaflet.TileLayer.WMTS</title>
  <meta charset="UTF-8">
  <meta content="width=device-width" name="viewport">
  <link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    <script src="https://kartena.github.io/Proj4Leaflet/lib/proj4-compressed.js"></script>
    <script src="https://kartena.github.io/Proj4Leaflet/src/proj4leaflet.js"></script>
</head>

<body>
<div id="map" style="height: 100%; width: 80%"></div>

<script>
   var resol = [
      21664, 10832, 5416, 2708, 1354, 677, 338.5, 169.25, 84.625, 42.3125, 21.15625, 10.578125, 5.2890625, 2.64453125, 1.322265625, 0.661132813, 0.330566406
   ];

    var crs = new L.Proj.CRS('EPSG:25832','+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
                 {
                     origin: [-2000000.0, 9045984.0],
                   resolutions: resol
                   });

    var map = L.map('map', {
      crs: crs
    });

   function getTileMatrix(data) {
     return 'L' + ('0' + data.z).slice(-2);
   }

   var url = 'http://jordbrugsanalyser.dk/geoserver/gwc/service/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=GST&format=image%2Fpng&layer=Jordbrugsanalyser:Marker13&tilematrix={getMatrix}&TileRow={y}&TileCol={x}'

   var markWMTSlayer = new L.TileLayer(url, {
     maxZoom: 16,
     minZoom: 0,
     getMatrix: getTileMatrix,
     attribution: '&copy; Styrelsen for Dataforsyning og Effektivisering'
   });

    map.addLayer(markWMTSlayer);

    L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
    var baseLayers = {"mark": markWMTSlayer};
    L.control.layers(baseLayers, {}).addTo(map);            

    map.setView([39.877812, 45.890628], 2);
</script>

</body>

</html>
Related Question