I'm trying to display raster images from GeoServer on a Leaflet map. Simply like this:

var map = L.map("mapid").setView([15.6261, -61.44361], 13);
var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/wms?', {
    layers: 'geo:africa'

Once the web page is open, the map div is totally greyed out.

In the network section of 'inspect page' the WMS request to GeoServer is composed of bbox, srs and other data which are all wrong for the layer being requested:


While the request should have these parameters (taken from GeoServer):


The screen appears as follows:

enter image description here

What could be the problem?

  • 1
    Please edit the question and add info about all wrong WMS request and how should all right request look like.
    – TomazicM
    Nov 25 '21 at 18:30
  • I changed it by adding the missing information @TomazicM
    – mirko
    Nov 25 '21 at 18:51

Your map is using EPSG:3857 (the default for Leaflet) and thus requests data using that same CRS from the WMS.

Enable serving images in EPSG:3857 for your WMS and it should work.

  • The result does not change even if i add a new Gridset in GeoServer with EPSG:3857
    – mirko
    Nov 26 '21 at 8:36
  • 2
    try zooming out - you may be looking off the edge of your data
    – Ian Turton
    Nov 26 '21 at 10:20
  • 1
    Layer name suggest your map is of Africa, but view center coordinates [15.6261, -61.44361] (lat, lng) are SE of Dominica island, above South America.
    – TomazicM
    Nov 26 '21 at 11:03
  • I don't know why but it took a long time to load the image on the map, so even when I zoomed out I couldn't see it, thanks. But how does the transformation of the projection take place? The request to the GeoServer is always with EPSG:3857, but the native srs of the image is EPSG:4326
    – mirko
    Nov 26 '21 at 14:31

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.