Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Created January 9, 2023 13:37
Show Gist options
  • Save ThomasG77/6459d9b75a6c6bc2d757049c2e3d5858 to your computer and use it in GitHub Desktop.
Save ThomasG77/6459d9b75a6c6bc2d757049c2e3d5858 to your computer and use it in GitHub Desktop.
Download ZIP
WMS maplibre tiled
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment