Correct parameters to visualize WMS layers in Leaflet and proj4?

Question

I'm struggling to visualize WMS-layers from a REST service using Leaflet. All I see currently is a gray map, not changing anything when moved.

The layers I want to visualize are located in Faroe Island, and are therefore using the CS (coordinatesystem) EPSG:5316. Because EPSG:5316 is not one of the standard CS in Leaflet, I have to use Proj4Leaflet. In Proj4Leaflets GitHub site, there are some instructions on how to set the CRS and layers, and I've tried to follow the instructions with no success.

The two maps are:

• A normal image map
• A contour line map

The code:

   // Imports:
   import { onMount } from 'svelte';
   import L from 'leaflet';
   import 'proj4leaflet'

   const kortalUrlHaedd = 'https://gis.us.fo/arcgis/services/haeddarkurvar/us_haeddarkurvar_2009_2m/MapServer/WMSServer';
   const kortalUrlMynd = 'https://gis.us.fo/arcgis/services/myndakort/us_myndakort_fotm/MapServer/WMSServer'
   const EPSG5136value = '+proj=tmerc +lat_0=0 +lon_0=-7 +k=0.999997 +x_0=200000 +y_0=-6000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs'
 
   // Define the global variable L to new variable:
   $data.leaf = L;
 
   // Center of map.
   var center = [62, -7];
   
   onMount(() => {
     
     var crs = new L.Proj.CRS('EPSG:5316', EPSG5136value, {
       origin: [-5423100, 4002100],
       resolutions: [
         1083.735500804335,
         541.8677504021675,
         270.93387520108377,
         135.46693760054188,
         67.73346880027094,
         33.86673440013547,
         16.933367200067735,
         8.466683600033868,
         4.233341800016934,
         2.116670900008467,
         1.0583354500042335,
         0.5291677250021167,
         0.26458386250105836,
         0.13229193125052918,
         0.06614596562526459,
       ],
     })

     $data.map = $data.leaf.map('map', {
       crs: crs,
     });

     var wmsLayerHaedd = $data.leaf.tileLayer.wms(kortalUrlHaedd, {
       maxZoom: 20,
       minZoom: 8,
     }).addTo($data.map);

     var wmsLayerMynd = $data.leaf.tileLayer.wms(kortalUrlMynd, {
       maxZoom: 20,
       minZoom: 8,
     }).addTo($data.map);

     $data.map.setView(center, 8);
    
   })

Some remarks:

• All interactive code related to Leaflet works (I get coordinates by pressing on a point on the map, code is not shown here), and I get no errors when opening the project.
• The maps seems to be loaded from the REST API, but I'm not sure if it's visible on the map, or something is wrong with the settings, making the map appear somewhere completely off the view, impossible to find.
• I have QGIS installed, and I can successfully add the layers into a QGIS project and visualize them by doing "Layer -> Add layer -> Add WMS/WMTS layer..." and use the links defined in the code by the variables kortalUrlHaedd and kortalUrlMynd.
• These instructions on the Leaflet site are mentioning; "An instance of L.TileLayer.WMS needs at least one option: layers." When adding the layers into QGIS, I see that they do not have any layer name that is inserted into the layers-option as mentioned on this site. Is this a problem?

I'm completely new to the whole "GIS world", so there may be concepts I'm unaware of.

Answer 1

There are a few thing that has to be taken care of for WMS layers to be visible as you want:

• You have WMS layer maxZoom set to 20, but resolutions in your crs definition go only up to 14, so you have to add additional ones.
• For WMS layer you have to specify layers parameter. You can find those in GetCapabilities WMS request. For contours layer there have to be several layers specified, since there are different layers for different resolution.
• For contours layer to be transparent, you have to use format: 'image/png' and transparent: true options.

Code could then looks something like this (plain JS):

 const kortalUrlHaedd = 'https://gis.us.fo/arcgis/services/haeddarkurvar/us_haeddarkurvar_2009_2m/MapServer/WMSServer';
 const kortalUrlMynd = 'https://gis.us.fo/arcgis/services/myndakort/us_myndakort_fotm/MapServer/WMSServer'
 const EPSG5136value = '+proj=tmerc +lat_0=0 +lon_0=-7 +k=0.999997 +x_0=200000 +y_0=-6000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs'

var crs = new L.Proj.CRS('EPSG:5316', EPSG5136value, {
  origin: [-5423100, 4002100],
  resolutions: [
    1083.735500804335,
    541.8677504021675,
    270.93387520108377,
    135.46693760054188,
    67.73346880027094,
    33.86673440013547,
    16.933367200067735,
    8.466683600033868,
    4.233341800016934,
    2.116670900008467,
    1.0583354500042335,
    0.5291677250021167,
    0.26458386250105836,
    0.13229193125052918,
    0.06614596562526459,
    0.033072982813,
    0.016536491406,
    0.008268245703,
    0.004134122852,
    0.002067061426,
    0.001033530713,
    0.000516765356
  ]
});

var map = L.map('map',{
  crs: crs,
  maxZoom: 20,
  minZoom: 8
});


var wmsLayerMynd = new L.TileLayer.WMS(kortalUrlMynd, {
  layers: '1',
  format: 'image/png',
  version: '1.3.0',
  crs: crs,
}).addTo(map);
var wmsLayerHaedd = new L.TileLayer.WMS(kortalUrlHaedd, {
  layers: '1,2,3,4,5,6,8,9,11',
  format: 'image/png',
  version: '1.3.0',
  crs: crs,
  transparent: true
}).addTo(map);

var center = [61.998, -7];
map.setView(center, 10);

Result at zoom 10: