IGN

Géoservices IGN

API GoogleMaps et Géoportail

Dernière mise à jour : 6 Mars 2017

Table des matières

Objectifs

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

Prérequis

Réalisation

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://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=" + zoom +
        "&TILEROW=" + tileCoord.y +
        "&TILECOL=" + tileCoord.x ;
    return url;
}

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

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ù :

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

Qui permet d’afficher la carte suivante :