1. ACCUEIL
  2. DOCUMENTATION
  3. Services
  4. Utilisation Web
  5. Affichage WMTS
  6. GMaps et WMTS
Menu

documentation

Menu

GMaps et WMTS

Dernière mise à jour : 7 novembre 2024
Contenu

Titre
Objectifs

Texte

Ce tutoriel a pour objectif de montrer 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 l’API Javascript Google Maps.

Il faut noter que les CGUs du Géoportail autorisent l’utilisation des données de référence de l’IGN dans ces applications, contrairement à Google qui impose l’utilisation de ses données par des applications mises à disposition par Google (Conditions d’utilisations Google).

Titre
Prérequis

Texte
  • Disposer d’une clef d’accès à l’API Google Maps pour pouvoir utiliser son code.
  • (Disposer d’une clef d’accès Géoplateforme pour pouvoir afficher les données non libres du Géoportail.)

Titre
Réalisation

Texte

Le tutoriel suivant a été réalisé avec la version 3.26 de l’API Javascript Google Maps.

 Code minimal pour afficher une carte Google Maps

Pour commencer, partons d’une structure de base comme ci-dessous :

<!DOCTYPE html>
<html>
	<head>		
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
  		#map-canvas{
			width:800px;
			height:600px;
		}
	</style>
	<script type="text/javascript"
  	src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_KEY&sensor=true">
	</script>
	<script type="text/javascript">
	function initialize() {
	    	var mapOptions = {
	     		center: new google.maps.LatLng(47.60,1.74),
			zoom: 6,
			mapTypeId: google.maps.MapTypeId.ROADMAP			
		};

		var map = new google.maps.Map(document.getElementById("map-canvas"),
		mapOptions);
	}
	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>
		<div id="map-canvas"/>
	</body>
<html>

Code pour afficher une couche tuilée avec Google Maps

On crée une instance de la classe google.maps.ImageMapType :

var tiledLayer=new google.maps.ImageMapType({
        getTileUrl: function(tileCoord,zoom) {
	    var url=...
            return url
        },
	tileSize: new google.maps.Size(256,256),
	name: "nom de la couche",
	maxZoom: 18
});

où :

  • getTileUrl: fonction qui retourne l’URL de la tuile à afficher en fonction des coordonnées de la tuile et d'un zoom donné. ​​
  • tileSize: taille en pixel des tuiles de la pyramide d'images.
  • name: nom de la couche qui s'affiche dans le sélecteur de couches.
  • maxZoom: niveau de zoom maximal disponible pour la couche en question.

Code à ajouter pour afficher une couche IGN

Pour afficher une couche WMTS de l’IGN, on implémente la fonction getTileUrl de façon à ce qu’elle envoie des requêtes WMTS GetTile au serveur WMTS du Géoportail.

Vous pouvez retrouver une description détaillée des services WMTS du Géoportail et du formalisme des requêtes GetTile ici.

On va donc écrire notre fonction getTileUrl() de la manière suivante :

getTileUrl: function(tileCoord,zoom) {
    var url= "https://data.geopf.fr/wmts?" +
        "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
        "&STYLE=normal" +
        "&TILEMATRIXSET=PM" +
        "&FORMAT=image/jpeg"+
        "&LAYER=ORTHOIMAGERY.ORTHOPHOTOS"+
	"&TILEMATRIX=" + zoom +
        "&TILEROW=" + tileCoord.y +
        "&TILECOL=" + tileCoord.x ;
    return url;
}

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 dynamiquement par la fonction getTileUrl.

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é pour les données de Google Maps.

Code à ajouter pour afficher une couche IGN non libre

Pour afficher une couche WMTS non libre (SCAN 25 et 100) de l’IGN, on implémente la fonction getTileUrl de façon à ce qu’elle envoie des requêtes WMTS GetTile au serveur WMTS du Géoportail.

Vous pouvez retrouver une description détaillée des services WMTS du Géoportail et du formalisme des requêtes GetTile ici.

On va donc écrire notre fonction getTileUrl() de la manière suivante :

getTileUrl: function(tileCoord,zoom) {
    var url= "https://data.geopf.fr/private/wmts" +
        "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
        "&STYLE=normal" +
        "&TILEMATRIXSET=PM" +
        "&FORMAT=image/jpeg"+
        "&LAYER=ORTHOIMAGERY.ORTHOPHOTOS"+
	"&TILEMATRIX=" + zoom +
        "&TILEROW=" + tileCoord.y +
        "&TILECOL=" + tileCoord.x +
        "&APIKEY=votre Clé"
;
    return url;
}

 Rajout de la couche IGN à la carte GoogleMaps

Il faut ensuite modifier les options de chargement de la carte comme ceci:

var mapOptions = {
	mapTypeId: 'IGNLayer',
	center: new google.maps.LatLng(47.60,1.74),
	zoom: 6,
	mapTypeControlOptions: {
		mapTypeIds: ['IGNLayer']
	}
};

où :

  • mapTypeId: identifiant de la couche affichée par défaut par chargement de la carte. Ici, c’est la couche ‘IGNLayer’.
  • mapTypeIds: liste des couches affichées dans le sélecteur de couches.

L’identifiant de la couche IGN, ici ‘IGNLayer’ est associé à la couche que l’on vient de créer via la ligne de code suivante :

map.mapTypes.set('IGNLayer',tiledLayer);

Résultat

On obtient donc au final le code suivant :

<!DOCTYPE html>
<html>
	<head>		
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
  		#map-canvas{
			width:800px;
			height:600px;
		}
	</style>
	<script type="text/javascript"
  	src="https://maps.googleapis.com/maps/api/js?v=release&key=GOOGLE_KEY&sensor=true">
	</script>
        <script type="text/javascript">
        function initialize() {
                var tiledLayer=new google.maps.ImageMapType({
                        getTileUrl: function(tileCoord,zoom) {
                            var url="https://data.geopf.fr/wmts?"+
                                "LAYER=ORTHOIMAGERY.ORTHOPHOTOS"+
                                "&FORMAT=image/jpeg&SERVICE=WMTS&VERSION=1.0.0"+
                                "&REQUEST=GetTile&STYLE=normal&TILEMATRIXSET=PM"+
                                "&TILEMATRIX="+zoom+"&TILEROW="+tileCoord.y+
                                "&TILECOL="+tileCoord.x;
                            return url;                     
                        },
                        tileSize: new google.maps.Size(256,256),
                        name: "Photos IGN",
                        maxZoom: 18
                });

                var mapOptions = {
                        mapTypeId: 'IGNLayer',
                        center: new google.maps.LatLng(47.60,1.74),
                        zoom: 6,
                        mapTypeControlOptions: {
                                mapTypeIds: ['IGNLayer']
                        }
                };

                var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
                map.mapTypes.set('IGNLayer',tiledLayer);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>
		<div id="map-canvas"/>
	</body>
<html>