Adding WMS layer in Mapbox GL JS

Question

I'm trying to layer data from Kartverket (Norwegian Mapping Authority) over my Mapbox map, but currently the only thing I'm getting returned is a transparent image. I'm wondering if there are anyone else that have done anything similar that could help me figure out what could be wrong with the request.

Code

map.on('load', function() {
 map.addSource('wms-test', {
 'type': 'raster',
 'tiles': [
 'https://wms.geonorge.no/skwms1/wms.dybdedata2?service=WMS&request=GetMap&layers=Dybdekontur&styles=default&format=image/png&transparent=TRUE&version=1.3.0&crs=EPSG:4326&bbox=53.1,-13.6,85.94,42.8&width=256&height=256'
 ],
 'tileSize': 256
 });
 map.addLayer({
 'id': 'wms-layer',
 'type': 'raster',
 'source': 'wms-test',
 'paint': {}
 });
});

Link to the GetCapabilities for the WMS: https://wms.geonorge.no/skwms1/wms.dybdedata2?service=WMS&request=GetCapabilities

Answer 1

It seems you are out of luck here. If you look at the result of getCapabilities request, you'll see that Dybdekontur layer is available only in EPSG:4258 projection. This effectively means you can't use it in MapBox.

When you are adding WMS source, it's URL is specified in tiles option, which means it will be used for fetching tiles from WMS service. Each tile has its own bbox, depending on location and zoom. This means you can't specify fixed bbox like you did with bbox=53.1,-13.6,85.94,42.8.

Proper way for specify bbox for tiles retrieved from WMS service is to use {bbox-epsg-3857} placeholder string (see https://docs.mapbox.com/ios/maps/api/6.3.0/tile-url-templates.html). As the name of the placeholder tells, it's in EPSG:3857 projection, so you can't use it for your desired layer.

But there is Dybdedata2 layer in your WMS source that is available in EPSG:3857 projection. So this code:

mapboxgl.accessToken='your access token';
const map = new mapboxgl.Map({
 container: 'map',
 style: 'mapbox://styles/mapbox/light-v11',
 zoom: 10,
 center: [10, 64]
});
var nav = new mapboxgl.NavigationControl({
 showZoom: true
}); 
map.addControl(nav, "bottom-right");
 
map.on('load', () => {
 map.addSource('wms-test-source', {
 'type': 'raster',
 'tiles': [
 'https://wms.geonorge.no/skwms1/wms.dybdedata2?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.3.0&request=GetMap&crs=EPSG:3857&transparent=true&width=256&height=256&layers=Dybdedata2'
 ],
 'tileSize': 256
 });
 map.addLayer(
 {
 'id': 'wms-test-layer',
 'type': 'raster',
 'source': 'wms-test-source',
 'paint': {}
 }
 );
});

will give you this result:

enter image description here

EDIT: Although getCapabilities request says that Dybdekontur layer is available only for EPSG:4258 projection, I tried also EPSG:3857 and it actually works! It's just that layer is available only for zoom levels 13 and higher. That's how it looks like at zoom 14:

enter image description here

• nmtoken: The CRS is reported as being supported in the root layer (parent of all other layers)
• TomazicM: @nmtoken Thanks for clarification.