Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Created January 9, 2023 13:36
Show Gist options
  • Save ThomasG77/87da9421f89fc8290e6c3cc59251bdc9 to your computer and use it in GitHub Desktop.
Save ThomasG77/87da9421f89fc8290e6c3cc59251bdc9 to your computer and use it in GitHub Desktop.
Download ZIP
WMS maplibre untiled
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/[email protected]/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/@mapbox/[email protected]/sphericalmercator.js"></script>
<link href="https://unpkg.com/[email protected]/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment