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/