documentation

Ce tutoriel a pour objectif de montrer à l’utilisateur comment afficher les données de référence de l’IGN (cartes IGN, photographies aériennes, parcelles cadastrales,…) dans une fenêtre cartographique en utilisant la bibliothèque cartographique javascript OpenSource Leaflet.

NB : la démarche proposée ici permet de mettre en œuvre un affichage de base pour les données IGN servies en WMTS WebMercator directement avec Leaflet. L’adjonction de l’extension Géoportail pour Leaflet permettra de bénéficier de l’ensemble des services du Géoportail avec cette bibliothèque.

• Disposer d’une version récente de la bibliothèque Leaflet.
• (Disposer d’une clef d’accès Géoplateforme pour pouvoir afficher les données non libres du Géoportail.)

Le tutoriel suivant a été réalisé avec la version 1.9.4 de Leaflet.

 Code minimal pour afficher une carte avec Leaflet

On utilise l’objet Map :

• associé à un élément html de la page
• que l’on va positionner selon une “view” (un centre et un zoom)
• auquel on va ajouter des “layers”

var lmap = new L.map(‘viewerDiv’).setView([lat,long],niveau_de_zoom) ;
L.tileLayer( urlTemplate, {options}).addTo(lmap) ;

 Code pour afficher une couche tuilée avec Leaflet

Il n’y a pas de classe dédiée au WMTS : on utilise la classe TileLayer (couche tuilée) dont on adapte le modèle d’URL (« urlTemplate ») pour être une requête WMTS GetTile.

L.tileLayer(
	"urlTemplate",
	{
		minZoom:0,
		maxZoom:18,
		tileSize:256
	}
).addTo(lmap) ;

 Code à ajouter pour afficher une couche IGN

Il suffit de remplir l’objet L.tileLayer de cette façon :

L.tileLayer(
        "https://data.geopf.fr/wmts?" +
        "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
        "&STYLE=normal" +
        "&TILEMATRIXSET=PM" +
        "&FORMAT=image/jpeg"+
        "&LAYER=ORTHOIMAGERY.ORTHOPHOTOS"+
	"&TILEMATRIX={z}" +
        "&TILEROW={y}" +
        "&TILECOL={x}",
	{
		minZoom : 0,
		maxZoom : 18,
                attribution : "IGN-F/Geoportail",
		tileSize : 256 // les tuiles du Géooportail font 256x256px
	}
).addTo(lmap) ;

où :

• Les valeurs des paramètres LAYER, STYLE, FORMAT et TILEMATRIXSET sont renseignées à partir des informations lues dans le document de réponse à la requête GetCapabilities concernant la couche que l’on souhaite afficher, comme indiqué ci-dessous :

• Les trois derniers paramètres TILEMATRIX, TILEROW et TILECOL permettent de localiser la tuile dans la pyramide d’images et seront remplis dynamiquemet par la classe Leaflet TileLayer.

NB : Cela est directement possible car le tuilage WMTS WebMercator du Géoportail (indiqué par le paramètre TILEMATRIXSET=PM) est standard et a les mêmes caractéristiques que celui utilisé par défaut par Leaflet.

 Résultat

On obtient donc au final le code suivant :

<style type="text/css">
   #viewerDiv {
       width:100%;
       height:600px;
   }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<div id="viewerDiv"></div>
<script type="text/javascript">
    window.onload= function() {
        var map = L.map("viewerDiv").setView([48.845,2.424],10) ;
        L.tileLayer(
            'https://data.geopf.fr/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=ORTHOIMAGERY.ORTHOPHOTOS&format=image/jpeg&style=normal',
            {
                minZoom : 0,
                maxZoom : 18,
                tileSize : 256,
                attribution : "IGN-F/Géoportail"
            }).addTo(map);
    }
</script>

Qui permet d’afficher la carte suivante :