Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Last active January 9, 2023 13:40
Show Gist options
  • Save ThomasG77/f27f62d1e3fb6ea79b406fbfa5d004bb to your computer and use it in GitHub Desktop.
Save ThomasG77/f27f62d1e3fb6ea79b406fbfa5d004bb to your computer and use it in GitHub Desktop.
Download ZIP
WMS Leaflet
Raw
index.html
<html>
<head>
<title>Leaflet WMS</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.wms@0.2.0/dist/leaflet.wms.js"></script>
<style>
#map{
position:absolute;
top:0;
bottom:0;
width:99%;
}
</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 map = L.map('map', {
center: [47.23109, 6.02207],
zoom: 13
});
map.addLayer(L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png'))
// Ajout fonds de carte (WMS)
var source = L.WMS.source(url, {
'TRANSPARENT': true,
'FORMAT': 'image/png',
'VERSION': '1.1.1' // Par défaut, déjà à 1.1.1. Plante avec version 1.3.0
});
source.getLayer("Tache_urbaine_1980_R43").addTo(map);
// Rencontré des problèmes sur les tuiles retournées avec WMS natif Leaflet
// Lié à la couche/webservice car fonctionne pour les données IGN ci-dessous
// var tache_urbaine_1980_r43 = L.tileLayer.wms(
// urlUnproxified, {
// layers: 'Tache_urbaine_1980_R43',
// format: 'image/png',
// crs: leaflet.CRS.EPSG3857,
// transparent:true,
// version: '1.3.0'
// }
// ).addTo(map);
var insee_filosofi_niveau_de_vie_secret = L.tileLayer.wms(
"https://wxs.ign.fr/economie/geoportail/r/wms", {
layers: 'INSEE.FILOSOFI.NIVEAU.DE.VIE.SECRET',
format: 'image/png',
crs: leaflet.CRS.EPSG3857,
version: '1.3.0'
}
).addTo(map);
// WMS tuilé avec plugin: plante
// var tiles = L.WMS.tileLayer(url, {
// 'tileSize': 256,
// 'layers': 'Tache_urbaine_1980_R43',
// 'transparent': true,
// 'FORMAT': 'image/png',
// });
// tiles.addTo(map);
L.control.scale().addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment