Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/leaflet-wmts-ign.html

Created October 18, 2022 14:40
Show Gist options
  • Save ThomasG77/89bf9a577b15f0a68bb59055eeb415a1 to your computer and use it in GitHub Desktop.
Save ThomasG77/89bf9a577b15f0a68bb59055eeb415a1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
leaflet-wmts-ign.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
/* configure the size of the map */
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = L.map("map").setView([48.845,2.424],10);
L.tileLayer(
"https://wxs.ign.fr/cartes/geoportail/wmts?" +
"&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
"&STYLE=normal" +
"&TILEMATRIXSET=PM" +
"&FORMAT=image/png"+
"&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2"+
"&TILEMATRIX={z}" +
"&TILEROW={y}" +
"&TILECOL={x}",
{
minZoom : 0,
maxZoom : 18,
attribution : "IGN-F/Geoportail",
tileSize : 256 // les tuiles du Géooportail font 256x256px
}
).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment