ThomasG77/index.html

## 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>

	<!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>