WMS maplibre untiled
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment