I have got a WMS layer from an instance of Gemini VA WMS Server I want to add to my Leaflet map, version 0.7.7. For that I need to break down my WMS link to fit the options like this example:

var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
    layers: 'nasa:bluemarble'

This is the link I am not sure how to use. In QGIS the first line is ID 0 and name "RootLayer". It contain 8 layers and all of them make up the layer I want to add.

The link I have provided is not live but it follows the same structure to the link I got that is working in QGIS.

EDIT: As suggested from comments I tried this:

var wmsLayer = L.tileLayer.wms('http://localhost/MapServer/Standard_SDO.wms', {

That throws me an error: Uncaught TypeError: Cannot read property 'wms' of undefined.

It seem that it does not like the dot. Do you know any work around?

This is what I have tried so far but it did not work:

var wmsLayer = L.tileLayer.wms('http://localhost/MapServer/ows?', {
        layers: 'Standard_SDO.wms'
  • 3
    If localhost/MapServer/Standard_SDO.wms works with QGIS and is the base-URL where you can read GetCapabilities, then why do you use something different with Leaflet? Much better opportunities with var wmsLayer = L.tileLayer.wms(http://localhost/MapServer/Standard_SDO.wms?, – user30184 Sep 20 '16 at 11:46
  • Thanks for your reply. I tried that but it throw me an error "Uncaught TypeError: Cannot read property 'wms' of undefined". In QGIS the first line is ID 0 and name RootLayer". It contain 8 layers and all of them make up the layer I want to add. I does not seem to like the dot notation in the link, leaflet pick it up as a property. Do you know if it is possible to work around it? – geogrow Sep 20 '16 at 12:54
  • please edit your question to show what you have tried now and what the response is – Ian Turton Sep 20 '16 at 12:59
  • What URL do you use to do a GetCapabilities request in a browser? Is it http://localhost/MapServer/Standard_SDO.wms?service=WMS&request=GetCapabilities& is it http://localhost/MapServer/Standard_SDO.wms/ows?service=WMS&request=GetCapabilities& or is it something else? – nmtoken Sep 20 '16 at 18:48
  • So this is the live link With GetCapabilities… &REQUEST=GetCapabilities I am using leaflet version 0.7.7 – geogrow Sep 21 '16 at 7:42

Uncaught TypeError: Cannot read property 'wms' of undefined

That's a weird error, because it means that L.tileLayer is undefined (when you try to access L.tileLayer.wms to call the constructor).

There might be something wrong with the way you're loading Leaflet. Running console.log(L.tileLayer) and console.log(L.tileLayer.wms) might shed some light on your issue - they should print out a pointer to a function as demonstrated here.

| improve this answer | |
  • The other WMS layers load fine, it just this one that cause a problem (the other layers from Geoserver). This is the result from the console log. function(t,e){return new o.TileLayer(t,e)} "o.TileLayer" looks a bit weird to me? – geogrow Sep 21 '16 at 8:35
  • I was using leaflet 1.0.0! Was meant to use 0.7.7. I used the CDN from your link and got the same log. function(url, options) { return new L.TileLayer(url, options); } Still the same error though "Uncaught TypeError: Cannot read property 'wms' of undefined" Will try something else here – geogrow Sep 21 '16 at 8:41
  • You must be overwriting or deleting the reference to L.tileLayer.wms somehow. – IvanSanchez Sep 21 '16 at 12:19

This is a working sample I hope it helps:

var map = L.map('map', {
    crs: L.CRS.EPSG3857,
    center: [5399596.405931242, 4137884.567863098],
    zoom: 3

var wmsLayer = L.tileLayer.wms('../server-side/wms.php?layerId=708', {
    CRS: L.CRS.EPSG3857,
| improve this answer | |

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.