Leaflet Geoporatil de base

Une carte + cadastre geoportail

by Thibault Coupin

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<input id="gppKey" placeholder="la clé géoportail"><input type="button" onclick="mapMe()" value="Go!"><hr>
<div id="map" class="map"></div>

CSS

.map {
  height: 400px;
  width: 100%;
}

JavaScript

console.log("Chargement")
$("#gppKey").val(localStorage.getItem('gppKey'));

window.mapMe = function(){
var key = $("#gppKey").val()
localStorage.setItem('gppKey',key)
var map = L.map('map').setView([48.845,2.424], 10);

L.tileLayer('https://wxs.ign.fr/'+key+'/wmts?service=WMTS&request=GetTile&version=1.0.0&layer={id}&style=normal&tilematrixSet=PM&format=image%2Fjpeg&height=256&width=256&tilematrix={z}&tilerow={y}&tilecol={x}', {
			maxZoom: 18,
			minZoom: 0,
			attribution: '<a href="http://www.ign.fr">IGN</a>',
			id: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
			opacity:0.5
		}).addTo(map);
    
L.tileLayer('https://wxs.ign.fr/'+key+'/wmts?service=WMTS&request=GetTile&version=1.0.0&layer={id}&style=bdparcellaire&tilematrixSet=PM&format=image%2Fpng&height=256&width=256&tilematrix={z}&tilerow={y}&tilecol={x}', {
			maxZoom: 18,
			minZoom: 0,
			attribution: '<a href="http://www.ign.fr">IGN</a>',
			id: 'CADASTRALPARCELS.PARCELS',
			opacity:1
		}).addTo(map); 
  
}

if ($("#gppKey").val()!==''){mapMe()}