Revisions to River network WMS layer not showing in Leaflet map

added 2 characters in body

Source Link

edited Mar 27 at 19:08

27k
24
31
42

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: '1'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:

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: '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:

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:

added 1 character in body

Source Link

edited Mar 27 at 14:01

TomazicM

27k
24
31
42

Since layer youryou 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: '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:

Since layer your are trying to show is not 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: '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:

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: '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:

Source Link

created Mar 27 at 10:10

TomazicM

27k
24
31
42

Since layer your are trying to show is not 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: '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:

Stack Exchange Network

Return to Answer