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.

  • 1
    If the WMS does not serve in Web Mercator CRS, it's not compatible with Google maps. – underdark Nov 30 '13 at 20:58
  • So if it works in Openlayers , it doesn't mean it works in leaflet ? – Alophind Nov 30 '13 at 20:59
  • If it works in Openlayers, I don't think the WMS is limited to epsg:4326. – underdark Nov 30 '13 at 21:05
  • 1
    OL works fine with base map google and overlay 4326 , and leaflet don't . I've created new basemap in 4326 and now wms shown. But i have different problem. Please take a look: gis.stackexchange.com/questions/79056/… – Alophind Nov 30 '13 at 21:09
  • If you've solved this, you should either accept an answer that helped, or add your own answer that shows what the problem was and how you fixed it, @Alophind. – Alex Leith Mar 19 '17 at 2:35

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

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.


Try specifying the WMS CRS. Something similar to

var wms_layer = new L.TileLayer.WMS("http://somewms", {
            layers: 'layername',
            format: 'image/png',
            transparent: 'TRUE',
            version: '1.1.1',
            srs: 'EPSG:3857',
            attribution: 'some text'
  • tried : crs: L.CRS.EPSG3857 With no luck. – Alophind Nov 30 '13 at 21:20

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.