Changing Leaflet Base CRS using Proj4js

Question

I am trying to change the CRS of a web mapping service in Norway. The projection is EPSG:25832.

Here is the WMTS service: https://kartkatalog.geonorge.no/metadata/norge-i-bilder/norge-i-bilder-wmts-euref89-utm32/61ed45e1-2ef3-4f94-873c-e9dcb6be4aa6

Here is the example from Proj4Leaflet Documentation:

var crs = new L.Proj.CRS('EPSG:2400',
  '+lon_0=15.808277777799999 +lat_0=0.0 +k=1.0 +x_0=1500000.0 ' +
  '+y_0=0.0 +proj=tmerc +ellps=bessel +units=m ' +
  '+towgs84=414.1,41.3,603.1,-0.855,2.141,-7.023,0 +no_defs',
 {
  resolutions: [8192, 4096, 2048] // 3 example zoom level resolutions
 }
);

The WMS loads using the code below when the CRS information is not being used. The map centers on northern Norway but it should be centering near Oslo.

There is something wrong with the CRS information then or how I am using proj4.js?

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',
{
  resolutions: [
     131073, 65537, 32769, 16385, 8193, 4097, 2049, 1025, 513, 257, 
129, 
65, 33, 17, 9, 5, 3, 2
  ],
  origin: [-2000000.0, 9045984.0],
  bounds:  L.bounds( [-2000000.0, 3500000.0], [3545984.0, 9045984.0])
})

var key ='****************'

var map = L.map('mapid',{
zoomControl: false,
zoomSnap: 0.1,
// crs: crs,
continuousWorld: true,
worldCopyJump: false
}).setView([59.877812, 8.590628], 5);

var gkt = '***************';
var url = 
'http://gatekeeper{s}.geonorge.no/BaatGatekeeper/gk/gk.nib_utm32_wmts_v2?&gkt='
+ gkt 
+'&layer=Nibcache_UTM32_EUREF89&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={x}&TileRow={y}';

var wms = new L.TileLayer(url, {
   subdomains: ['1', '2', '3'],
   maxZoom: 16,
   minZoom: 0,
   attribution: ''
 }).addTo(map)

Answer 1

How do you find the Bounds of your WMTS?

Typically (as per any OGC service) you'd make a GetCapabilities request. Something like:

https://gatekeeper1.geonorge.no/BaatGatekeeper/gk/gk.nib_utm32_wmts_v2?REQUEST=GetCapabilities&service=WMTS&

but in this instance some other parameter is required.

In this situation, there is also published metadata that tells us the extents of the service:

<srv:extent>
    <gmd:EX_Extent>
        <gmd:geographicElement>
            <gmd:EX_GeographicBoundingBox>
                <gmd:westBoundLongitude>
                    <gco:Decimal xmlns:gco="http://www.isotc211.org/2005/gco">2</gco:Decimal>
                </gmd:westBoundLongitude>
                <gmd:eastBoundLongitude>
                    <gco:Decimal xmlns:gco="http://www.isotc211.org/2005/gco">33</gco:Decimal>
                </gmd:eastBoundLongitude>
                <gmd:southBoundLatitude>
                    <gco:Decimal xmlns:gco="http://www.isotc211.org/2005/gco">57</gco:Decimal>
                </gmd:southBoundLatitude>
                <gmd:northBoundLatitude>
                    <gco:Decimal xmlns:gco="http://www.isotc211.org/2005/gco">72</gco:Decimal>
                </gmd:northBoundLatitude>
            </gmd:EX_GeographicBoundingBox>
        </gmd:geographicElement>
        <gmd:temporalElement>
            <gmd:EX_TemporalExtent>
                <gmd:extent>
                <gml:TimePeriod xmlns:gml="http://www.opengis.net/gml" gml:id="id_1">
                    <gml:beginPosition/>
                    <gml:endPosition/>
                </gml:TimePeriod>
                </gmd:extent>
            </gmd:EX_TemporalExtent>
        </gmd:temporalElement>
    </gmd:EX_Extent>
</srv:extent>

Answer 2

nmtoken is right, you need to request capabilities from the server. In your case you just need to add gkt (key) parameter with valid key value to the request:

https://gatekeeper1.geonorge.no/BaatGatekeeper/gk/gk.nib_utm32_wmts_v2?REQUEST=GetCapabilities&service=WMTS&gkt=gkt_value

I sneaked gkt key from https://www.norgeskart.no/ site and got the following values (excerpt from GetCapabilities reply):

<ows:Identifier>Nibcache_UTM32_EUREF89_v2</ows:Identifier>
  <ows:BoundingBox crs="urn:ogc:def:crs:EPSG::25832">
  <ows:LowerCorner>-2000000.0 3500000.0</ows:LowerCorner>
  <ows:UpperCorner>3545984.0 9045984.0</ows:UpperCorner>
  </ows:BoundingBox>

In your case origin (upper left corner) would be:

origin: [-2500000.0, 9045984.0]

And by the way, I never was able to get WMTS plugin to work correctly togeteher with proj4leaflet. I constructed WMTS tile request myself. In your case it would be something like:

var gkt = 'gkt_value';
var url = 'http://gatekeeper{s}.geonorge.no/BaatGatekeeper/gk/gk.nib_utm32_wmts_v2?&gkt='
+ gkt +'&layer=Nibcache_UTM32_EUREF89&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={x}&TileRow={y}';

var layer = new L.TileLayer(url, {
  subdomains: ['1', '2', '3'],
  maxZoom: 16,
  minZoom: 0,
  attribution: ''    });

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],
     bounds:  L.bounds( [-128543, 8015869], [1165657, 6381457]),
     resolutions: resol
   });

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

map.addLayer(layer);
map.setView([59.877812, 8.590628], 5);