[GIS] Leaflet geoserver wms doesn’t show on google map base layer

geoserverleafletwms

I have a site running Openlayers (base layer google and overlay wms in epsg4326 from geoserver).

The site works fine.

I've decided to try doing the same with leaflet , and from some reason I can't make the WMS layer show on google.

This is the code I used :

var googleLayer = new L.Google('ROADMAP');

coords = L.tileLayer.wms("http://localhost:8080/Coords/wms", {
    layers: 'Test:Coords',
    format: 'image/png',
    transparent: true        
});

var baseLayers = {
    "Google": googleLayer        
};

var overlays = {
    "Coords": coords
};

map = new L.Map('map2d', {
    center: new L.LatLng(32.05522664582287, 35.05812072269409),
    zoom: 9,        
    layers: [googleLayer, coords],
    zoomControl: true
});

L.control.layers(baseLayers, overlays).addTo(map);

The layer does appear on the layer switcher , but the image doesn't show on the map.

* UPDATE ***

I've tried force declaring the layer in geoserver as EPSG3857 and still with no luck.

Best Answer

This is how I add a standard GeoServer WMS layer:

    var layer = new L.TileLayer.WMS('http://host.example.com/geoserver/service/wms', {
        layers: 'workspace:layername',
        format: 'image/png',
        transparent: true,
        maxZoom: 20
    });
    map.addLayer(layer);

The only significant difference is the 'transparent: true' in mine, vs text in yours.

One way to test is by using the browser debug tools to look at what the image URLs are, and testing them individually. You may see an error message.

Related Question