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.