1

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:

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.

2

1 Answer 1

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:

enter image description here

5
  • Thank you, it works! After playing around, i see that i'm not supposed to use a max zoom level of 20, but only 14, and this corresponds with the wms-layer. I played around with the layer names, and found out, that the layers are related to the zoom of the view. That means layers '0,1,2,3' shows when map is zoomed from 14-9, layers '4,5,6' shows in zoom 8-7, and so on. Is this defined by the layer itself or is it possible to map a layer to a different zoom, lets say that '0,1,2,3' shows in zoom 14-7 instead of 14-9? Commented Dec 28, 2022 at 12:38
  • Also, where exactly did you find the names '0', '1', '2' (and so on) to use in the parameter 'layers'? As i see now, the layer names goes from '0' to '11', and i can't see this reflected in the 'GetCapabilities' WMS request: gis.us.fo/arcgis/services/haeddarkurvar/… Commented Dec 28, 2022 at 12:46
  • WMS layer names are in Name property, like <Name>1</Name>. At which zoom layer will be shown is dependent on MaxScaleDenominator property.
    – TomazicM
    Commented Dec 28, 2022 at 12:54
  • "is it possible to map a layer to a different zoom" is a separate question and should be posted as such.
    – TomazicM
    Commented Dec 28, 2022 at 12:55
  • A WMS doesn't have zoom levels, zoom levels are an artificial construct of your client as far as a WMS is concerned. If you make a request to a WMS it will give you a map if you are in the bounds of the data and if the scale of the image is not restricted somehow (but in this case there are no restrictions).
    – nmtoken
    Commented Jan 5, 2023 at 13:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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