[GIS] Cannot get specific WMS to display in Leaflet or OpenLayers 3

leafletopenlayerswms

I am trying to create a map in both Leaflet and OpenLayers 3 which displays the layer EMAP8 from the WMS http://wms.nlsc.gov.tw/wms. I can't get it to work. I can open the layer in QGIS, but when I try to use it in Leaflet like this:

var overlay_taiwanemapen0 = L.tileLayer.wms('http://wms.nlsc.gov.tw/wms', {
    layers: 'EMAP8',
    format: 'image/png',
    transparent: true,
    continuousWorld : true,
});

or in OpenLayers 3 like this:

var lyr_taiwanemapen = new ol.layer.Tile({
    source: new ol.source.TileWMS(({
        url: "http://wms.nlsc.gov.tw/wms",
        params: {"LAYERS": "EMAP8", "TILED": "true"},
    })),
    title: "taiwane-map(en)",
});

I get nothing displayed. I can see layers being requested, and data being transferred, but nothing on the map.

What am I doing wrong?

Best Answer

OpenLayers 3

The VERSION in WMS request parameter params in OL3, when omitted, is 1.3.0.

You simple have to add the parameter 'VERSION': '1.1.1' to your request. You can check the version supported by the server from the capabilities document.

Solution for OpenLayers 3:

  new ol.layer.Tile({
    source: new ol.source.TileWMS(({
        url: "http://wms.nlsc.gov.tw/wms",
        params: {"LAYERS": "EMAP8", "TILED": true, 'VERSION': '1.1.1' },
    })),
    title: "taiwane-map(en)",
})

I've setup a fiddle using your WMS.

The full code is:

var layers = [
  new ol.layer.Tile({
    source: new ol.source.TileWMS(({
      url: "http://wms.nlsc.gov.tw/wms",
      params: {
        "LAYERS": "EMAP8",
        "TILED": true,
        'VERSION': '1.1.1'
      },
    })),
    title: "taiwane-map(en)",
  })
];
var map = new ol.Map({
  layers: layers, // [lyr_taiwanemapen],
  target: 'map',
  view: new ol.View({
    projection: 'EPSG:4326',
    center: [120, 23],
    zoom: 6
  })
});

Leaflet (versions prior than 1.x)

The code provided in the question runs without any problem in Leaflet, in versions prior to 1.x. 

var map = L.map('map').setView([23, 120], 5);

var overlay_taiwanemapen0 = L.tileLayer.wms('http://wms.nlsc.gov.tw/wms', {
    layers: 'EMAP8',
    format: 'image/png',
    transparent: true,
    continuousWorld : true,
});

overlay_taiwanemapen0.addTo(map);

This working fiddle has the code provided in the question.

Leaflet 1.x

In Leaflet 1.x all WMS query parameters are in lowercase, which is fine for servers following the WMS specification.

To provide compatibility with non compliant servers requiring WMS query parameters in uppercase, there is an optional parameter uppercase: true.

The solution with Leaflet 1.x is:

var map = L.map('map').setView([23, 120], 5);
var overlay_taiwanemapen0 = L.tileLayer.wms('http://wms.nlsc.gov.tw/wms', {
    layers: 'EMAP8',
    format: 'image/png',
    transparent: true,
    continuousWorld : true,
    uppercase: true
});
overlay_taiwanemapen0.addTo(map);

Check this working fiddle with the code for Leaflet 1.x.

Related Question