Adding WMS (IGN) to Leaflet

leafletproj4jswms

I'm using Leaflet to display agricultural plots obtain from a WMS.

Here is the link to the WMS : https://wxs.ign.fr/agriculture/geoportail/r/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities

Here's what I've done so far :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>
    <script data-key="agriulture" src="\node_modules\geoportal-extensions-leaflet\dist\GpPluginLeaflet.js"></script>
    <script src="\node_modules\geoportal-extensions-leaflet\dist\GpPluginLeaflet.css"></script>
    <script src="\node_modules\proj4\dist\proj4.js"></script>
    <script src="\node_modules\proj4leaflet\src\proj4leaflet.js"></script>

    <title>TEST MAP</title>
    <style>
        #map { height: 500px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map = L.map('map',{crs : L.CRS.EPSG3857}).setView([45.5 , 4.5], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
        }).addTo(map);

        var wmsLayer = L.tileLayer.wms('https://wxs.ign.fr/agriculture/geoportail/r/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities', {
            layers: 'LANDUSE.AGRICULTURE2020',
        }).addTo(map);

    </script>
</body>  
</html>

The OSM tile is displaying well, but not the WMS layer.

In the console, I get this error :

wms:1 GET https://wxs.ign.fr/agriculture/geoportail/r/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities&service=WMS&request=GetMap&layers=LANDUSE.AGRICULTURE2020&styles=&format=image%2Fjpeg&transparent=false&version=1.1.1&width=256&height=256&srs=EPSG%3A3857&bbox=494088.9508353794,5699144.828942743,498980.9206456307,5704036.798752994
400 (BadRequest)

<ServiceExceptionReport xmlns="http://www.opengis.net/ogc">
<script> try { Object.defineProperty(navigator, "globalPrivacyControl", { value: false, configurable: false, writable: false }); document.currentScript.parentElement.removeChild(document.currentScript); } catch(e) {}; </script>
<ServiceException code="MissingParameterValue"> Parametre CRS absent. </ServiceException>
</ServiceExceptionReport>

As there is a CRS params missing, I've tried something with proj4 and proj4leaflet but without success.

Best Answer

You are making a WMS version 3 request, which needs to use a CRS parameter while you are sending an SRS parameter.

So either use version 1.1.1 and an SRS parameter or change the SRS to a CRS.

In general the best practice is to allow the client code to negotiate the version with the server (so leave the version parameter out of the getCapabilitites request). Though with out checking the source of the leaflet plugin I can't say if this would work in this case.

Related Solutions

[GIS] Using Leaflet WMS Layer from ArcGIS Server

Your piece of code seems to be good in theory. As I used arcGIS/Leaflet in exactly the same way.

But the problem could come from missing spatial reference (or maybe incorrect format (image/png or image/jpeg).

For the spatial reference, here is how Leaflet works :

Leaflet expects default spatial reference : EPSG:3857 / WGS84
But you can change it by an other one with JS plugin like Proj4leaflet by Kartena.

It's really easy and helpful. Works like this (for EPSG:3006) :

You define your new crs

// SWEREF99 TM (EPSG:3006) with map's pixel origin at SWEREF99 TM coordinate (0, 0)
var crs = new L.Proj.CRS('EPSG:3006',
  '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
  {
    resolutions: [
      8192, 4096, 2048, 1024, 512, 256, 128
    ],
    origin: [0, 0]
  })

And include it in your map :

var map = new L.Map('map', {
    crs: crs
});

You can find Spatial References here.

[GIS] Leaflet + Proj4Leaflet + EPSG3995 +WMS

There are several problems here.

First, let me quote from http://leafletjs.com/examples/wms/wms.html (emphasis mine):

Also note that Leaflet supports very few coordinate systems: CRS:3857, CRS:3395 and CRS:4326 (See the documentation for L.CRS). If your WMS service doesn’t serve images in those coordinate systems, you might need to use Proj4Leaflet to use a different coordinate system in Leaflet. Other than that, just use the right CRS when initializing your map, and any WMS layers added will use it:
var map = L.map('map', {
    crs: L.CRS.EPSG4326
});

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

The code in your fiddle does the opposite, it specifies the CRS as an option for the wms layer, instead of as an option for the map:

wmsBKLayer = new L.tileLayer.wms('http://eumetview.eumetsat.int/geoserv/wms', {
    layers: 'bkg-raster:bkg-raster',
    crs: customCRS
}

var map = new L.map('map', {
   // No CRS option here!!
});

Specify the CRS in the map options, and you should be fine.

Second, object instantiation. Leaflet uses camelCase with first uppercase letter for classes (e.g. L.TileLayer is a class), and camelCase starting with lowercase letter for factory methods (e.g. L.tileLayer is a factory method).

var foo = L.tileLayer(...);     // Preferred
var foo = new L.TileLayer(...); // OK, but not preferred
var foo = L.TileLayer(...);     // Nope, one cannot call a class
var foo = new L.tileLayer(...); // Nope nope nope nope, one cannot create an instance of a factory

Please read «https://stackoverflow.com/questions/8698726/constructor-function-vs-factory-functions» if you find this confusing.

Third, quoting from https://kartena.github.io/Proj4Leaflet/ :

Are you using Leaflet 1.0 beta 1 or development versions of Leaflet? Then you need to use the development branch of Proj4Leaflet.

This means that there is no released version of proj4leaflet which works with Leaflet 1.

In your fiddle, you are using Leaflet 1.0.2 and proj4leaflet 0.7.2. Those will simply not work together.

Either use a lower version of Leaflet, or build (and deploy and use) a newer version of proj4leaflet. Please note that proj4leaflet could use a bit of help with its maintenance, as @liedman can no longer support it.

If you have the time, I suggest you get in contact with the current maintainers, in order to help with a new release compatible with Leaflet 1.0.0.

If one addresses these three issues, everything will work again. See a working example at:

https://playground-leaflet.rhcloud.com/giwo/edit?html,output

Best Answer

Related Solutions

[GIS] Using Leaflet WMS Layer from ArcGIS Server

[GIS] Leaflet + Proj4Leaflet + EPSG3995 +WMS

Related Question