Leaflet Map with UTM33 CRS

Here is a working example for getting leaflet to produce a map with open WMTS tiles from Kartverket, similar to https://norgeskart.no/ (The open WMTS tiles differ slightly in layout and shading and are distributed as paletted png files, which makes them smaller than the ones on norgeskart.no.) Norgeskart uses the default projection of Norway, EPSG:32633 (UMT33), which differs from the leaflet default CRS EPSG:3857 (google projection). The code uses proj4leaflet (which depends on proj4js) to define the CRS.

Here we go, also see index.html for a working example:

    <div style="width: 100vw; height: 100vh" id="map"></div>
    <!-- The Javascript code is licensed under the MIT license (c) Chris Petrich, 2021. SPDX short identifier: MIT -->
    <script type="text/javascript">
      const crsStr = 'EPSG:25833';
      const crsProj4 = '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs';
      // The origin is the <TopLeftCorner> in the response to a GetCapabilities call to
      // https://opencache.statkart.no/gatekeeper/gk/gk.open_wmts?Version=1.0.0&service=wmts&request=getcapabilities
      const crsTileOrg = [-2500000, 9045984];
      // crsBaseResolution is the <ScaleDenominator> at zoom level 0 from the GetCapabilities call times 0.00028
      const crsBaseResolution = 21664;
      // according to the GetCapabilities info, zoom levels 0 through 18 are defined for EPSG:25833
      const crsMaxZoom = 18;
      const crs = new L.Proj.CRS(crsStr, crsProj4,
                        { origin: crsTileOrg, 
                          resolutions: Array.from(Array(crsMaxZoom+2),(e,zoomLevel) => crsBaseResolution/Math.pow(2,zoomLevel))
                        });
      const map = L.map('map', {
          center: [68.44, 17.4], // Narvik, Norway
          zoom: 13,
          crs: crs,
      });
      // map tile IDs are the GetCapabilities <ows:Identifier>
      const owsId = 'norgeskart_bakgrunn';
      const url = 'https://opencache{s}.statkart.no/gatekeeper/gk/gk.open_wmts?&layer='+owsId+'&style=default&tilematrixset='+crsStr+'&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix='+crsStr+':{z}&TileCol={x}&TileRow={y}';
      const kartverketTiles = L.tileLayer(url, {
          subdomains: ['', '2', '3'],
          maxZoom: crsMaxZoom,
          attribution: '<a href="https://www.kartverket.no/">Kartverket</a>',
      });
      map.addLayer(kartverketTiles);
    </script>

Resources used

• overview given by Tor Arve Stangeland at https://github.com/torarve/leaflet-kartverket (no license specified)
• code snipplets for the UTM32 projection and the non-open Kartverket tile server by TomazicM at https://gis.stackexchange.com/a/307651 (CC-BY-SA 3.0 license)
• GetCapabilities file of the WMTS server https://opencache.statkart.no/gatekeeper/gk/gk.open_wmts?Version=1.0.0&service=wmts&request=getcapabilities