Load WMS service into Mapbox map

htmljavascriptleafletmapbox-gl-jswms

I am able to add a WMS layer to a Leaflet map with very simple, readable code:

var wmsURL = 'https://opengeo.ncep.noaa.gov/geoserver/klwx/klwx_bref_raw/ows?';

var wdgProductLayer = 
L.tileLayer.wms(wmsURL, {
    SERVICE: 'WMS',
    LAYERS: 'klwx_bref_raw',
    format: 'image/png',
    transparent: true
});

What would be the Mapbox GL JS equivalent to this?

I have seen this page: https://docs.mapbox.com/mapbox-gl-js/example/wms/ but it gives a very long WMS URL: https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015 when in Leaflet you are able to use an abbreviated version with several parameters.

Here is the URL for the WMS service's home page: https://opengeo.ncep.noaa.gov/geoserver/www/index.html

Here is the GetCapabilities page for the KLWX station, which I am using: https://opengeo.ncep.noaa.gov/geoserver/klwx/ows?service=wms&version=1.3.0&request=GetCapabilities

Best Answer

All that L.tileLayer.wms does is that it constructs the right WMS call from it's parameters and then forwards it to WMS server. If your Leaflet WMS layer works, all you have to do is to go into browser debugger network section and have a look at those WMS calls.

Here is an example of such a call, retrieved from browser debugger: https://opengeo.ncep.noaa.gov/geoserver/klwx/klwx_bref_raw/ows?&service=WMS&request=GetMap&layers=klwx_bref_raw&styles=&format=image/png&transparent=true&version=1.1.1&width=256&height=256&srs=EPSG:3857&bbox=-8922952.933898337,4539747.98391319,-8766409.899970295,4696291.017841231

From this it's easy to construct Mapbox GL JS equivalent, just bbox explicit value has to be replaced with Mapbox bbox parameter {bbox-epsg-3857}: https://opengeo.ncep.noaa.gov/geoserver/klwx/klwx_bref_raw/ows?&service=WMS&request=GetMap&layers=klwx_bref_raw&styles=&format=image/png&transparent=true&version=1.1.1&width=256&height=256&srs=EPSG:3857&bbox={bbox-epsg-3857}.

Official Mapbox example: https://docs.mapbox.com/mapbox-gl-js/example/wms/

Related Question