River network WMS layer not showing in Leaflet map

Question

I am trying to display a map of European river network on a Leaflet map, using as data source the EUHydro layer published by CLMS (here is the webpage, and the WMS GetCapabilities document).

Here is the code I wrote for now:

const mapOptions = {};

const map = L.map('map', mapOptions).setView([44.76, 28.10], 8);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);

const EUHydroURL = 'https://image.discomap.eea.europa.eu/arcgis/services/EUHydro/EUHydro_RiverNetworkDatabase/MapServer/WMSServer?';

const wmsOptions = {
  layers: '3',
  format: 'image/png',
  transparent: true,
  version: '1.3.0',
};

const EUHydroLayer = L.tileLayer(EUHydroURL, wmsOptions).addTo(map);

console.log(EUHydroLayer);

I am new to these tools so I probably have errors in my request’s parameters.

I have tried appending service=WMS&request=GetCapabilities&version=1.3.0 to the end of the URL.

I have also tried setting up a CRS to the map with crs: L.CRS.EPSG4326 in mapOptions and wmsOptions.

As a side note, I intend to display all layers in my map, but I am just using one layer for now for testing purposes. I found the layers names from the GetCapabilities document.

Answer 1

Since layer you are trying to show is not a tile layer but WMS layer, you have to use L.tileLayer.wms layer to show it. Since it has a lot of layers that are shown at different zooms, one possible strategy is to request all the layers.

This code:

var tileLayer = L.tileLayer('https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronComposite/EPSG3857/{z}/{x}/{y}.png');

var wmsLayer = L.tileLayer.wms("https://image.discomap.eea.europa.eu/arcgis/services/EUHydro/EUHydro_RiverNetworkDatabase/MapServer/WMSServer", {
    version: '1.3.0',
    layers: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20',
    format: 'image/png',
    transparent: true
});
        
var map = L.map('map', {
  center: [41, 14],
  zoom: 4,
  layers: [tileLayer, wmsLayer]
});

gives the follwing map at zoom 4:

and this map at zoom 9: