2

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

1 Answer 1

1

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/

1
  • Awesome, this is exactly what I was looking for! Thanks for the answer! For some reason the WMS URL string I was passing was missing some parameters, I think. Jul 2 at 18:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.