Loading WMS layer from external server in Leaflet?

Question

I'm trying to use the WMS service documented here in a leaflet map. The documentation shows an example for openlayers:

var wms = new OpenLayers.Layer.WMS(
  "Population Density",
  "http://sedac.ciesin.columbia.edu/geoserver/gwc/service/wms",
  {layers: 'gpw-v3:gpw-v3-population-density_2000'}
);

but I want to use this with leaflet. My own WMS hosted layers work fine with the following syntax:

var wmsRivers = L.tileLayer.wms("http://zzz.zzz.zzz.zz:8080/geoserver/opengeo/wms", {
  layers: 'opengeo:rivers',
  format: 'image/png',
  transparent: true,
  version: '1.1.0',
  attribution: ""
}).addTo(map);

The following does not:

var wmsFootprint = new L.tileLayer.wms("http://sedac.ciesin.columbia.edu/geoserver/gwc/service/wms", {
  layers: 'gpw-v3:gpw-v3-population-density_2000',
  format: 'image/png',
  version: '1.1.0',
  transparent: true,
  attribution: ""
}).addTo(map);

After several minutes waiting for sedac.ciesen.colombia.edu, I get a 400 Failed to load resource: the server responded with a status of 400 (Bad Request)

Is there a way to ping the server to know it's functioning? What about version, I assume this refers to geoserver; how do I know what version they are running? Any other parameters I may be missing?

Answer 1

When exploring a new WMS you should always do a getcapablities request to start with - this will give you all sorts of useful information (including if the server is working). So first we try

http://sedac.ciesin.columbia.edu/geoserver/gwc/service/wms?request=getcapabilities

which responds with an xml document - so the server is up, opening the file it starts with

<WMT_MS_Capabilities version="1.1.1">

so you should probably ask for version 1.1.1

searching for the layer name gives me:

    <Layer queryable="1">
  <Name>gpw-v3:gpw-v3-population-density_2000</Name>
  <Title>Population Density 2000</Title>
  <Abstract>Gridded Population of the World: Future Estimates (GPWFE) consists of estimates of human population for the years 2005, 2010, 2015 by 2.5 arc-minute grid cells. Population density estimates were also created using the GPWv3 land area grid for the year 2000 (also 2.5 arc-minute resolution). The data products include a population grid (raw counts), and a population density grid (per square km). These products vary in GIS-compatible data formats and geographic extents (global, continent [Antarctica not included], and country levels). Spatial reference metadata refers to global extent. A proportional allocation gridding algorithm, utilizing more than 300,000 national and sub-national administrative units, is used to assign population values to grid cells. Additional global grids are created from the 2.5 arc-minute grid at 1/4, 1/2, and 1 degree resolutions. (Spatial reference metadata refers to global extent, 2.5 arc-minute resoulution). GPWFE is produced by the Columbia University Center for International Earth Science Information Network (CIESIN) in collaboration with the United Nations Food and Agriculture Programme (FAO) and the Centro Internacional de Agricultura Tropical (CIAT).</Abstract>
  <SRS>EPSG:4326</SRS>
  <SRS>EPSG:900913</SRS>
  <LatLonBoundingBox minx="-180.0" miny="-90.0" maxx="332.42893238259967" maxy="422.42893238259967"/>
  <BoundingBox SRS="EPSG:4326" minx="-180.0" miny="-90.0" maxx="332.42893238259967" maxy="422.42893238259967"/>
  <BoundingBox SRS="EPSG:900913" minx="-2.003750834E7" miny="-2.003750834E7" maxx="2.003750834E7" maxy="2.003750834E7"/>
</Layer>

so you can only request maps in epsg:4326 or epsg:900913 - you haven't shown enough code for me to see what projection you are using.

Finally look in firebug (or other debugger) to see what the url being requested is and try opening it in your browser - may be there is an error message being returned?

Answer 2

You are facing this issue, because you are trying to connect to the GWC endpoint. Instead you should connect to the WMS endpoint, and provide tiled:true as one of the parameters.

I can use the following code:

L.tileLayer.wms("http://sedac.ciesin.columbia.edu/geoserver/wms", {
layers: 'gpw-v3:gpw-v3-population-density_2000',
format: 'image/png',
version: '1.1.0',
transparent: true,
attribution: "",
tiled:true
}).addTo(map);

A working example is present on this JS fiddle