WMS maplibre untiled by ThomasG77

index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a WMS source untiled</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/@mapbox/sphericalmercator@1.1.0/sphericalmercator.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    function getExtentCoordinatesFromBounds(bounds) {
      return [
        bounds.getNorthWest().toArray(),
        bounds.getNorthEast().toArray(),
        bounds.getSouthEast().toArray(),
        bounds.getSouthWest().toArray()
      ];
    }
    function wmsExtent130FromBounds(bounds) {
      var sm = new SphericalMercator({
        size: 256
      });
      return [
        ...sm.forward(bounds.getSouthWest().toArray()),
        ...sm.forward(bounds.getNorthEast().toArray())
      ];
    }
    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 couche = 'Tache_urbaine_1980_R43';
    var map = new maplibregl.Map({
      container: 'map',
      style: {
        "version": 8,
        "sources": {
          "raster-tiles": {
            "type": "raster",
            "tiles": ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
            "tileSize": 256
          }
        },
        "layers": [{
          "id": "simple-tiles",
          "type": "raster",
          "source": "raster-tiles",
          "minzoom": 0,
          "maxzoom": 20
        }]
      },
      zoom: 13,
      center: [6.02207, 47.23109]
    });
    map.on('load', function() {
      var myCanvas = map.getCanvas();
      var myBounds = map.getBounds();
      var imageCoordinates = getExtentCoordinatesFromBounds(myBounds);
      var imageExtent3857 = wmsExtent130FromBounds(myBounds);
      // Width and height in WMS call are dvivided by the devicePixelRatio
      // to avoid making calls to really large image calls WMS on retina display
      // If your server can return really large images in WMS, you can change
      // the behaviour from this demo
      map.addSource('wms-test-source', {
        'type': 'image',
        'url': `${url}&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=${couche}&CRS=EPSG:3857&STYLES=&FORMAT_OPTIONS=dpi:180&WIDTH=${myCanvas.width / window.devicePixelRatio}&HEIGHT=${myCanvas.height / window.devicePixelRatio}&BBOX=${imageExtent3857.join(',')}`,
        'coordinates': imageCoordinates
      });
      map.addLayer({
        'id': 'wms-test-layer',
        'type': 'raster',
        'source': 'wms-test-source',
        'paint': {}
      });
    });
    map.on('moveend', function() {
      var myCanvas = map.getCanvas();
      var myBounds = map.getBounds();
      var imageCoordinates = getExtentCoordinatesFromBounds(myBounds);
      var imageExtent3857 = wmsExtent130FromBounds(myBounds);
      if (map.getSource('wms-test-source') && map.getLayer('wms-test-layer')) {
          map.removeLayer('wms-test-layer');
            map.removeSource('wms-test-source');
          map.addSource('wms-test-source', {
            'type': 'image',
            'url': `${url}&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=${couche}&CRS=EPSG:3857&STYLES=&FORMAT_OPTIONS=dpi:180&WIDTH=${myCanvas.width / window.devicePixelRatio}&HEIGHT=${myCanvas.height / window.devicePixelRatio}&BBOX=${imageExtent3857.join(',')}`,
            'coordinates': imageCoordinates
          });
          map.addLayer({
            'id': 'wms-test-layer',
            'type': 'raster',
            'source': 'wms-test-source',
            'paint': {}
          });
      }
    });
</script>
 
</body>
</html>