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/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/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: '© <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 :
<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.