WMS maplibre tiled 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>
    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:
            'https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json',
        zoom: 13,
        center: [6.02207, 47.23109]
    });

    map.on('load', function () {
        map.addSource('wms-test-source', {
            'type': 'raster',
            // use the tiles option to specify a WMS tile source URL
            // https://maplibre.org/maplibre-gl-js-docs/style-spec/sources/
            'tiles': [
                `${url}&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=${couche}&CRS=EPSG:3857&STYLES=&WIDTH=256&HEIGHT=256&BBOX={bbox-epsg-3857}`
            ],
            'tileSize': 256
        });
        map.addLayer({
          'id': 'wms-test-layer',
          'type': 'raster',
          'source': 'wms-test-source',
          'paint': {}
        });
    });

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