IGN

Géoservices IGN

Extension Géoportail pour Leaflet

Dernière mise à jour : 7 Septembre 2017

Table des matières

Généralités

L’extension Géoportail pour Leaflet propose les fonctionnalités suivantes à utiliser en complément de la biblothèque Leaflet :

Mise en oeuvre

L’utilisation de l’extension Géoportail pour Leaflet se fait via les étapes suivantes :

Téléchargement

Vous pouvez récupérer l’extension Géoportail pour Leaflet ici.

Elle contient l’arborescence suivante :

 leaflet/
    GpPluginLeaflet.js         (version minifiée du code javascript pour une utilisation en production)
    GpPluginLeaflet.css        (version minifiée des css pour une utilisation en production)
    GpPluginLeaflet-src.js     (version non minifiée du code javascript pour une utilisation en développement)
    GpPluginLeaflet-src.css    (version non minifiée des css pour une utilisation en développement)
    img/                       (resources images utilisées par les fichiers CSS)

Intégration dans une page web

Dézippez l’extension géoportail dans l’arborescence votre serveur web. Vous pouvez positionner à votre guise les fichiers css et javascript. Le répertoire img doit cependant être positionné au même niveau que le fichier css pour que les ressources images qui y sont référencées soient correctement chargées.

Intégrez l’extension géoportail pour leaflet dans votre page web classiquement à l’aide d’une balise script pour charger le fichier javascript et d’une balise link pour charger le fichier css en plus des balises correspondantes utilisées pour charger la bibliothèque Leaflet.

<!-- Library Leaflet -->
<link rel="stylesheet" href="chemin/vers/leaflet/leaflet.css" />
<script src="chemin/vers/leaflet/leaflet.js"></script>

<!-- Extension Géoportail pour Leaflet -->
<script src="chemin/vers/GpPluginLeaflet.js"></script>
<link rel="stylesheet" href="chemin/vers/GpPluginLeaflet.css" />

Configuration de l’accès à la plateforme Géoportail

L’extension Géoportail pour Leaflet exploite les services web exposés par la plateforme Géoportail. Ceux-ci sont soumis à l’obtention d’une clef d’accès obtenue sur le site professionnels.ign.fr ayant les droits sur les ressources que vous souhaitez exploiter.

Une fois la clef obtenue, vous pouvez paramétrer l’utilisation de l’extension avec cette clef de deux manières possibles :

Méthode 1 : Au chargement de l’extension en utilisant l’attribut “data-key” de la balise script de chargement de l’extension :

<script data-key="VOTRE-CLEF" src="chemin/vers/GpPluginLeaflet.js"></script>

Votre utilisation des fonctionnalités de l’extension Géoportail sera alors simplement conditionnée à la réception de l’événement onload de la page web, comme sur l’exemple suivant :

<html>
    <head>
        <!-- Library Leaflet -->
        <link rel="stylesheet" href="leaflet.css" />
        <script src="leaflet.js"></script>
        <!-- Extension Géoportail pour Leaflet -->
        <link rel="stylesheet" href="GpPluginLeaflet.css" />
        <script src="GpPluginLeaflet.js" data-key="CLEAPI"></script>
    </head>
    <body>
        <script>
            window.onload = function () {
                // votre utilisation de l'extension Géoportail pour Leaflet
            }
        </script>
    </body>
</html>

Méthode 2 : A la fin du chargement de la page en utilisant la fonction Gp.Services.GetConfig() et en conditionnant alors l’utilisation de l’extension à l’exécution de la fonction de rappel onSuccess passée en paramètres de Gp.Services.getConfig() comme sur l’exemple suivant :

<html>
    <head>
        <!-- Library Leaflet -->
        <link rel="stylesheet" href="leaflet.css" />
        <script src="leaflet.js"></script>
        <!-- Extension Géoportail pour Leaflet -->
        <link rel="stylesheet" href="GpPluginLeaflet.css" />
        <script src="GpPluginLeaflet.js"></script>
    </head>
    <body>
        <script>
            window.onload = function () {
                Gp.Services.getConfig({
                    apiKey: 'CLEAPI',
                    onSuccess: function (response) {
                        // votre utilisation de l'extension Géoportail pour Leaflet
                    }
                });
            }
        </script>
    </body>
</html>

Optimisation du chargement : configuration locale

Vous pouvez améliorer le temps de chargement de votre page en mettant en cache sur votre plateforme la configuration associée à votre clef d’accès. Il vous suffit pour cela de récupérer le fichier de configuration (autoconf.json) obtenu à l’aide du formulaire de ce tutoriel.

Enregistrez ce fichier sur votre plateforme et paramétrez l’extension Géoportail de la manière suivante (selon les méthodes citées précédemment) :

Méthode 1 : Utilisez l’attribut data-url de la balise script chargeant l’extension pour pointer vers votre fichier :

<html>
    <head>
        <!-- Library Leaflet -->
        ...
        <script src="GpPluginLeaflet.js" data-url="chemin/vers/autoconf.json"></script>
    </head>
    <body>
        <script>
            window.onload = function () {
                // votre utilisation de l'extension Géoportail pour Leaflet
            }
        </script>
    </body>
</html>

Méthode 2 : Utilisez le paramètre serverUrl de la fonction Gp.Services.getConfig() pour pointer vers votre fichier :

<html>
    ...
    <body>
        <script>
            window.onload = function () {
                Gp.Services.getConfig({
                    serverUrl: 'chemin/vers/autoconf.json',
                    onSuccess: function (response) {
                        // votre utilisation de l'extension Géoportail pour Leaflet
                    }
                });
            }
        </script>
    </body>
</html>

Compatibilités

Versions de Leaflet supportées

L’extension Géoportail pour Leaflet peut s’utiliser avec les versions de Leaflet suivantes :
* version 0.7.X
* version 1.0.X

La release Leaflet version 1.1.0 est incompatible avec l’utilisation du plugin Leaflet-Draw.
Pour profiter de toutes les fonctionnalités, il faut utiliser la dernière release Leaflet version 1.2.0.

Navigateur version
Chrome Versions récentes (21+)
Firefox Versions récentes (28+)
IE IE10, IE11
Edge 12+
Safari Versions récentes (6.1+)

Fonctionnalités

Systèmes de coordonnées

Leaflet utilise par défaut les systèmes de coordonnées mondiaux “standards” dont on peut trouver la liste ici.

L’extension Géoportail pour Leaflet embarque de nombreuses projections en EPSG, CRS ainsi que sous le registre IGNF.
Il est possible d’appeler ces projections avec le mécanisme de Leaflet.

Exemple :

// Appel de la Projection Lambert 93
var LAMB93 = new L.Proj.CRS('IGNF:LAMB93');

La définition d’autres systèmes de coordonnées est cependant possible par l’adjonction de deux bibliothèques Proj4js et Proj4Leaflet. La première permettant de définir des systèmes de coordonnées et d’effectuer des transformations de coordonnées entre systèmes ; la seconde permettant d’utiliser la première dans Leaflet.

L’extension Géoportail pour Leaflet intègre nativement ces deux bibliothèques. Si vous l’utilisez vous pouvez donc directement définir les systèmes de coordonnées que vous souhaitez selon la syntaxe proj4 et en utilisant le mécanisme de Leaflet.

Exemple :

// Définition de la Projection UTM 20N
var utm20 = new L.Proj.CRS('EPSG:4559',
    '+proj=utm +zone=20 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');

NB :

L’extension Géoportail pour Leaflet définit par défaut la projection légale Lambert 93 (EPSG:2154) qu’elle expose sous la variable globale suivante.

L.geoportalCRS.EPSG2154

Affichage des couche WMTS Géoportail

L’affichage des couches WMTS Géoportail se fait à l’aide de la fonction L.geoportalLayer.WMTS(), utilisée de la manière suivante :

L.geoportalLayer.WMTS(options, [leafletParams]);

Cette fonction retourne un objet de type L.TileLayer.

Exemples d’utilisation

Utilisation simple de la fonction

Affichage simple des ortho-images du Géoportail : création d’une layer Géoportail, et ajout à la map Leaflet.

// Création de la carte
var map  = L.map('map', {
    zoom : 10,
    center : L.latLng(48, 2)
});

// Création de la couche
var lyr = L.geoportalLayer.WMTS({
    layer  : "ORTHOIMAGERY.ORTHOPHOTOS"
}) ;

lyr.addTo(map); // ou map.addLayer(lyr);

Exemple d’utilisation jsFiddle

Affichage en Lambert 93 (EPSG:2154)

La plateforme Géoportail diffuse aussi des ressources WMTS en projection Lambert 93. Pour permettre de les afficher, l’extension Géoportail pour Leaflet pré-définit la projection correspondante accessible via la constante :

L.geoportalCRS.EPSG2154

Il vous suffit alors de paramétrer la carte Leaflet avec cette projection et d’y rajouter la ressource WMTS de la même manière que précédemment.

// Création de la carte
var map = L.map('divmap', {
    crs : L.geoportalCRS.EPSG2154
}).setView([48, 2], 10);

// Création de la couche
var lyr = L.geoportalLayer.WMTS({
    layer  : "CADASTRALPARCELS.PARCELS.L93"
}) ;

lyr.addTo(map); // ou map.addLayer(lyr);

Exemple d’utilisation jsFiddle

NB : D’autres systèmes de coordonnées peuvent être définis : plus d’informations…

Affichage des couche WMS Géoportail

L’affichage des couches WMS Géoportail se fait à l’aide de la fonction L.geoportalLayer.WMS(), utilisée de la manière suivante :

L.geoportalLayer.WMS(options[,leafletParams]);

Cette fonction retourne un objet de type L.TileLayer.WMS.

Exemple d’utilisation

Utilisation simple de la fonction

Affichage des orthos-images servies par le service WMS INSPIRE de la plateforme Géoportail sur une carte Leaflet en projection EPSG:4326.

// creation de la carte
var map = L.map("map",{
    crs : L.CRS.EPSG4326
}).setView([16.239, -61.545], 12);

// creation et ajout de la couche WMS à la carte
L.geoportalLayer.WMS({
    layer: "OI.OrthoimageCoverage"
}).addTo(map);

Exemple d’utilisation jsFiddle

Widget de gestion d’empilement des couches

Ce widget permet à l’utilisateur de gérer l’empilement des couches composant la carte L.Map et, pour chacune d’elle, d’agir sur la visibilité, l’opacité et d’afficher des informations qui lui sont associées (titre, description, métadonnées, légende).

Son utilisation se fait par la création d’un nouveau contrôle à l’aide de la fonction L.geoportalControl.LayerSwitcher(), que l’on peut ensuite ajouter à la carte comme les autres contrôles Leaflet, par exemple de la manière suivante :

var layerSwitcher = L.geoportalControl.LayerSwitcher(opts);
map.addControl(layerSwitcher);

Le widget affiche l’ensemble des couches composant la carte L.Map.

Pour chaque couche de la carte L.Map, le widget affiche son titre et sa description (par défaut : l’identifiant Leaflet de la couche), et, si elles sont spécifiées, des informations plus détaillées : légendes, métadonnées, aperçu rapide.

La récupération de ces informations n’est pas la même selon la manière dont chaque couche a été ajoutée à la carte :

Exemples d’utilisation

Utilisation simple

Ajout du widget de gestion de l’empilement des couches sans paramétrage particulier.

// Création de la carte
var map = L.Map('divmap', {center: [2.38, 45.23] , zoom: 13});

// création et ajout d'une cocuhe Géoportail
var lyr = L.geoportalLayer.WMTS({
    layer  : "ORTHOIMAGERY.ORTHOPHOTOS",
});
lyr.addTo(map); // ou map.addLayer(lyr);

// Création et ajout du LayerSwitcher
map.addControl(
    L.geoportalControl.LayerSwitcher()
);
Utilisation personnalisée

Paramétrage de l’affichage de la couche dans le LayerSwitcher.

// Création de la carte
var map = L.Map('divmap', {center: [2.38, 45.23] , zoom: 13});

// Création d'une couche quelconque
var lyr = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png?') ;

// Création et ajout du LayerSwitcher à la carte
map.addControl(
    L.geoportalControl.LayerSwitcher({
        layers : [{
            layer : lyr,
            config : {
                title : "Couche externe",
                description : "Description de ma couche",
                quicklookUrl : "lien/Vers/UnApercuRapide.png",
                legends: [{url : "lien/Vers/UneLegende.png"}],
                metadata : [{url : "lien/Vers/Une/MetaDonnee.xml"}]
            }
        }],
        options : {
            collapsed : true
        }
    })
);

Exemple d’utilisation jsFiddle

Barre de recherche

La barre de recherche permet de positionner la carte à partir de la saisie d’un localisant dont la position sera retournée par le service de géocodage de l’IGN.

La saisie de localisants peut s’accompagner d’un mode d’autocomplétion s’appuyant sur le service d’autocomplétion de la plateforme Géoportail.

Son utilisation se fait par la création d’un nouveau contrôle à l’aide de la fonction L.geoportalControl.SearchEngine(), que l’on peut ensuite ajouter à la carte comme les autres contrôles Leaflet, par exemple de la manière suivante :

var search = L.geoportalControl.SearchEngine(opts);
map.addControl(search);

Exemples d’utilisation

Utilisation simple

Ajout du moteur de recherhe sans paramétrage particulier.

// creation de la carte
map = L.map("map").setView([47, 2.424], 12);

// ajout d'une couche
var lyrMaps = L.geoportalLayer.WMTS({
    layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
});
map.addLayer(lyrMaps) ;

// création et ajout du controle
var searchCtrl = L.geoportalControl.SearchEngine({
});
map.addControl(searchCtrl);

Exemple d’utilisation jsFiddle

Adresse ou lieu en un point de la carte

Ce widget permet d’obtenir un ensemble de localisants Géographiques (adresses, toponymes ou parcelles cadastrales) en un point ou une zone (cercle ou emprise rectangulaire) saisie interactivement par l’internaute sur une carte Leaflet.

Son utilisation se fait par la création d’un nouveau contrôle à l’aide de la fonction L.geoportalControl.ReverseGeocode(), que l’on peut ensuite ajouter à la carte comme les autres contrôles Leaflet, par exemple de la manière suivante :

var revSearch = L.geoportalControl.ReverseGeocode(opts);
map.addControl(revSearch);

Exemples d’utilisation

Utilisation simple

Ajout du widget sans paramétrage particulier.

// creation de la carte
map = L.map("map").setView([47, 2.424], 12);

// ajout d'une couche
var lyrMaps = L.geoportalLayer.WMTS({
    layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
});
map.addLayer(lyrMaps) ;

// création et ajout du controle
var revCtrl = L.geoportalControl.ReverseGeocode({
});
map.addControl(revCtrl);

Exemple d’utilisation jsFiddle

Calculs d’itinéraires

Le widget de calcul d’itinéraires permet d’intéragir avec une carte Leaflet pour effectuer des calculs d’itinéraires utilisant le service dédié de la plateforme Géoportail.

Son utilisation se fait par la création d’un nouveau contrôle à l’aide de la fonction L.geoportalControl.Route(), que l’on peut ensuite ajouter à la carte comme les autres contrôles Leaflet, par exemple de la manière suivante :

var route = L.geoportalControl.Route(opts);
map.addControl(route);

Exemples d’utilisation

Utilisation simple

Ajout du widget sans paramétrage particulier.

// creation de la carte
map = L.map("map").setView([47, 2.424], 12);

// ajout d'une couche
var lyrMaps = L.geoportalLayer.WMTS({
    layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
});
map.addLayer(lyrMaps) ;

// création et ajout du controle
var routeCtrl = L.geoportalControl.Route({
});
map.addControl(routeCtrl);

Exemple d’utilisation jsFiddle

Calculs d’isochrones / isodistances

Ce widget permet d’intéragir avec une carte Leaflet pour effectuer des calculs d’isochrones / isodistances utilisant le service dédié de la plateforme Géoportail.

Son utilisation se fait par la création d’un nouveau contrôle à l’aide de la fonction L.geoportalControl.Isocurve(), que l’on peut ensuite ajouter à la carte comme les autres contrôles Leaflet, par exemple de la manière suivante :

var iso = L.geoportalControl.Isocurve(opts);
map.addControl(iso);

Exemples d’utilisation

Utilisation simple

Ajout du widget sans paramétrage particulier.

// creation de la carte
map = L.map("map").setView([47, 2.424], 12);

// ajout d'une couche
var lyrMaps = L.geoportalLayer.WMTS({
    layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
});
map.addLayer(lyrMaps) ;

// création et ajout du controle
var isoCtrl = L.geoportalControl.Isocurve({
});
map.addControl(isoCtrl);

Exemple d’utilisation jsFiddle

Altitude en un point de la carte

Ce widget permet d’afficher les coordonnées d’un point choisi par l’internaute sur une carte Leaflet dans un ou plusieurs systèmes de coordonnées. Ces coordonnées peuvent comprendre l’altitude obtenue à l’aide du service d’altimétrie de la plateforme Géoportail.

Son utilisation se fait par la création d’un nouveau contrôle à l’aide de la fonction L.geoportalControl.MousePosition(), que l’on peut ensuite ajouter à la carte comme les autres contrôles Leaflet, par exemple de la manière suivante :

var mp = L.geoportalControl.MousePosition(opts);
map.addControl(mp);

Exemples d’utilisation

Utilisation simple

Ajout du widget sans paramétrage particulier.

// creation de la carte
map = L.map("map").setView([47, 2.424], 12);

// ajout d'une couche
var lyrMaps = L.geoportalLayer.WMTS({
    layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
});
map.addLayer(lyrMaps) ;

// création et ajout du controle
var mpCtrl = L.geoportalControl.MousePosition({
});
map.addControl(mpCtrl);

Exemple d’utilisation avec affichage unique de l’altitude jsFiddle

Exemple d’utilisation avec paramétrage des systèmes de coordonnées jsFiddle

Exemple d’utilisation avec appel d’un système de coordonnées défini jsFiddle

Profil altimétrique le long d’un traçé

Ce widget permet d’afficher le profil altimétrique d’un traçé saisi par l’internaute sur une carte Leaflet. Le profil est calculé à l’aide du service d’altimétrie de la plateforme Géoportail.

Son utilisation se fait par la création d’un nouveau contrôle à l’aide de la fonction L.geoportalControl.ElevationPath(), que l’on peut ensuite ajouter à la carte comme les autres contrôles Leaflet, par exemple de la manière suivante :

var ep = L.geoportalControl.ElevationPath(opts);
map.addControl(ep);

Exemples d’utilisation

Utilisation simple

Ajout du widget sans paramétrage particulier.

// creation de la carte
map = L.map("map").setView([47, 2.424], 12);

// ajout d'une couche
var lyrMaps = L.geoportalLayer.WMTS({
    layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
});
map.addLayer(lyrMaps) ;

// création et ajout du controle
var ep = L.geoportalControl.ElevationPath({
});
map.addControl(ep);

Exemple d’utilisation jsFiddle