IGN

Géoservices IGN

Leaflet et Géoportail

Dernière mise à jour : 6 Mars 2017

Table des matières

Objectifs

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 oeuvre 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.

Prérequis

Réalisation

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

Code minimal pour afficher une carte avec Leaflet

On utilise l’objet Map :

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 à 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://wxs.ign.fr/CLEF/geoportail/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ù :

ggmap_dataref1.png

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.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/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://wxs.ign.fr/ld0jgrlpaway88fw6u4x3h38/geoportail/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 :