Loading WMS layer from USGS WMS server using Leaflet?

Question

I am trying to load WMS layer using leaflet from USGS WMS server but I am getting an empty image. I have gone through Loading WMS layer from external server in Leaflet? link but it doesn't solve my issue.

My code:

var map = L.map('map').setView([47.608013,-122.335167], 5);                    
    L.tileLayer.wms(USGS server link,  
 {  
  layers: '0',  
  format: 'image/png',  
  version: '1.3.0',  
  transparent: true,  
  continuousWorld: true,  
  attribution: "",  
  tiled:true  
 }).addTo(map);

I even tried changing version to 1.1.1, removed continousWorld: true etc.(tried almost everything). latitude and longitude that I used is Seattle's. Other examples of WMS Leaflet are working for me. The URL it is using to get the image is:

<img src="<wms server>?request=GetCapabilities&amp;service=WMS&amp;SERVICE=WMS&amp;REQUEST=GetMap&amp;VERSION=1.3.0&amp;LAYERS=0&amp;STYLES=&amp;FORMAT=image%2Fpng&amp;TRANSPARENT=true&amp;HEIGHT=256&amp;WIDTH=256&amp;CONTINUOUSWORLD=true&amp;TILED=true&amp;CRS=EPSG%3A3857&amp;BBOX=-13775786.985667603,6261721.35712164,-12523442.714243276,7514065.628545966" style="height: 256px; width: 256px; left: 270px; top: 17px;"> 

The USGS WMS server is working fine in QGIS tool.

Answer 1

Just looking at your image src attribute value, I can see that you have a few errors:

<img src="<wms server>?
request=GetCapabilities&amp;
service=WMS&amp;
SERVICE=WMS&amp;
REQUEST=GetMap&amp;
VERSION=1.3.0&amp;
LAYERS=0&amp;
STYLES=&amp;
FORMAT=image%2Fpng&amp;
TRANSPARENT=true&amp;
HEIGHT=256&amp;
WIDTH=256&amp;
CONTINUOUSWORLD=true&amp;
TILED=true&amp;
CRS=EPSG%3A3857&amp;
BBOX=-13775786.985667603,6261721.35712164,-12523442.714243276,7514065.628545966" 
style="height: 256px; width: 256px; left: 270px; top: 17px;"> 

You have two service=WMS& parameters, you have two request=value& parameters, of these two requests the first listed is a GetCapabilities request. Such a GetCapabilities request will never return an image.

You also have some non WMS parameters specified CONTINUOUSWORLD=true& and TILED=true&

So first off I guess that somewhere you have listed the end point for the service (that is the point to which all request parameters should be appended) as:

<wms server>?request=GetCapabilities&amp;service=WMS&amp;

but it needs to be just:

<wms server>?

Then your request will become something like:

<wms server>?
SERVICE=WMS&amp;
REQUEST=GetMap&amp;
VERSION=1.3.0&amp;
LAYERS=0&amp;
STYLES=&amp;
FORMAT=image%2Fpng&amp;
TRANSPARENT=true&amp;
HEIGHT=256&amp;
WIDTH=256&amp;
CRS=EPSG%3A3857&amp;
BBOX=-13775786.985667603,6261721.35712164,-12523442.714243276,7514065.628545966&amp;"

Does this request work in a browser?