Code JS commenté de la carte

Cette page fournit des commentaires sur le code JS de la carte des ressources du Géoportail pour la zone FXX.
La carte utilise la bibliothèque Leaflet mais n'utilise pas l'extension Géoportail pour Leaflet qui s'appuie sur une ancienne version de Leaflet.

Le code JS de la carte initiale contient de nombreuse couches ; dans un souci de simplicité le code commenté ci-dessous ne contient que 2 couches de base et 2 couches superposables.

Le code JS commenté ci-dessous peut être consulté ici et exécuté ici.

code HTML+JS+CSScommentaires 
<html>
  <head>
    <title>Carte GP</title>
    <meta charset="UTF-8">
En-tête HTML donnant le titre du document et indiquant que les caractères sont encodés en UTF-8
<!-- meta nécessaire pour le mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Une méta nécessaire pour une utilisation sur mobile
<!-- styles nécessaires pour le mobile -->
    <link rel="stylesheet" href="map.css">
Définition des styles spécifiques à cette carte nécessaire pour un affichage sur mobile (disponible ici).
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0/dist/leaflet.js"></script>
  </head>
Inclusion des styles et du code JS Leaflet.
Fin de l'en-tête HTML
  <body>
Début du corps du document HTML
    <div id="map" style="height: 100%; width: 100%"></div>
Elément container HTML <div> qui contiendra la carte. L'identifiant sera utilisé pour le référencer dans le code JS. L'élément occupe 100% de la largeur du document et 100% 
    <script>
Début du code JS
var map = L.map('map').setView([48, 3], 8); // view pour FXX
Création de la carte en référençant l'identifiant du <div> Définition de la localisation de la carte par d'une part un couple [latitude,longitude] en degrés décimaux et, d'autre part, le niveau de zoom
Cette localisation dépend du paramètre zone passé au script Php
L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
Ajout de l'échelle an bas à gauche.
var wmtsurl = 'http://wxs.ign.fr/jdq2jhltkhnf2lnsohgp8jjx/geoportail/wmts?'
            + 'service=WMTS&version=1.0.0&request=GetTile&style=normal&tilematrixSet=PM&height=256&width=256&'
            + 'tilematrix={z}&tilecol={x}&tilerow={y}';
Définition de l'URL partielle d'appel du service WMTS contenant notamment la clé en fonction du serveur sur lequel la page HTML est exposée ; les paramètres {x},{y} et {z} seront remplacés par Leaflet ; l'URL devra être complétée par les paramètres layer et format.
var blyr0 = new L.TileLayer(
    wmtsurl + '&layer=ORTHOIMAGERY.ORTHOPHOTOS&format=image/jpeg',
    { format: 'image/jpeg', 
      attribution: "&copy; <a href='http://www.ign.fr'>IGN</a>"
    }
);
Définition de chaque couche de base dans une variable JS avec un numéro s'incrémentant.
var blyr8 = new L.TileLayer(
    wmtsurl + '&layer=GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD&format=image/jpeg',
    { format: 'image/jpeg', 
      attribution: "&copy; <a href='http://www.ign.fr'>IGN</a>"
    }
);
Exemple d'une autre couche de base, ce code JS doitt être itéré pour chaque couche de base.
map.addLayer(blyr8);
Ajout de l'échelle an bas à gauche.
var baseLayers = {
  "<b>Orthophotographies</b>" : blyr0,
  "SCAN Express Standard" : blyr8,
};
Définition d'une variable contenant la liste des couches de base, chacune associée à un titre.
Ici on se limite aux 2 couches définies ci-dessus mais le script réel définit plus de couches.
var olyr0 = new L.TileLayer(
    wmtsurl + '&layer=ORTHOIMAGERY.ORTHO-SAT.PLEIADES.2015&format=image/png',
    { format: 'image/png', 
      attribution: "&copy; <a href='http://www.ign.fr'>IGN</a>"
    }
);
Définition de chaque couche superposable dans une variable JS avec un numéro s'incrémentant.
var olyr11 = new L.TileLayer(
    wmtsurl + '&layer=TRANSPORTNETWORKS.ROADS&format=image/png',
    { format: 'image/png', 
      attribution: "&copy; <a href='http://www.ign.fr'>IGN</a>"
    }
);
Exemple d'une autre couche superposable, ce code JS doit être itéré pour chaque couche superposable.
var overlays = {  
  "Pléiades 2015" : olyr0,
  "Réseaux routiers" : olyr11,
};
Définition d'une variable contenant la liste des couches superposables, chacune associée à un titre.
Ici on se limite aux 2 couches définies ci-dessus mais le script réel définit plus de couches.
<!-- ajout d'un outil de sélection de la couche -->
L.control.layers(baseLayers, overlays).addTo(map);
Ajout à la carte d'un sélecteur de couches en distinguant les couches de base des couches superposables.
      </script>
    </body>
</html>
Fin du script, du corps HTML et du document HTML