block by ThomasG77 f27f62d1e3fb6ea79b406fbfa5d004bb

WMS Leaflet

Full Screen

index.html

<html> 
  <head>
  <title>Leaflet WMS</title>  
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    <script src="https://unpkg.com/leaflet.wms@0.2.0/dist/leaflet.wms.js"></script>

    <style>
      #map{
        position:absolute;
        top:0;
        bottom:0;
        width:99%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      const proxy = 'https://data.europa.eu/deu-proxy?'
      // const proxy = 'https://corsproxy.io/?' # Could be as an alternative
      const urlUnproxified = 'https://ogc.geo-ide.developpement-durable.gouv.fr/wxs?map=/opt/data/carto/geoide-catalogue/1.4/org_38154/aea04585-605e-4372-abec-ade0d2380076.internet.map'
      const url = `${proxy}${urlUnproxified}`

      const map = L.map('map', {
        center: [47.23109, 6.02207],
        zoom: 13
      });

      map.addLayer(L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png'))   
      // Ajout fonds de carte (WMS)
      var source = L.WMS.source(url, {
          'TRANSPARENT': true,
          'FORMAT': 'image/png',
          'VERSION': '1.1.1' // Par défaut, déjà à 1.1.1. Plante avec version 1.3.0
      });
      source.getLayer("Tache_urbaine_1980_R43").addTo(map);

      // Rencontré des problèmes sur les tuiles retournées avec WMS natif Leaflet
      // Lié à la couche/webservice car fonctionne pour les données IGN ci-dessous
      // var tache_urbaine_1980_r43 = L.tileLayer.wms(
      //   urlUnproxified, {
      //     layers: 'Tache_urbaine_1980_R43',
      //     format: 'image/png',
      //     crs: leaflet.CRS.EPSG3857,
      //     transparent:true,
      //     version: '1.3.0'
      //   }
      // ).addTo(map);

      var insee_filosofi_niveau_de_vie_secret = L.tileLayer.wms(
        "https://wxs.ign.fr/economie/geoportail/r/wms", {
          layers: 'INSEE.FILOSOFI.NIVEAU.DE.VIE.SECRET',
          format: 'image/png',
          crs: leaflet.CRS.EPSG3857,
          version: '1.3.0'
        }
      ).addTo(map);

      // WMS tuilé avec plugin: plante
      // var tiles = L.WMS.tileLayer(url, {
      //   'tileSize': 256,
      //   'layers': 'Tache_urbaine_1980_R43',
      //   'transparent': true,
      //   'FORMAT': 'image/png',
      // });
      // tiles.addTo(map);

      L.control.scale().addTo(map);
    </script>

  </body>
</html>