Afficher les cartes IGN dans Google Maps API

Publication : 10 mai 2013. Dernière mise à jour : 1 mai 2024.

Note (2024) : cet article n’est plus maintenu ; il est probablement obsolète, aussi bien du côté IGN que Google Maps.

L’IGN fournit deux choses :

une version en ligne de ses cartes, excellentes cartes dont la réputation n’est plus à faire,
un service en ligne, le Géoportail, et une API associée.

Malheureusement, je trouve l’outil Géoportail et ses API extrêmement lourdingues, ce qui dessert le contenu, les cartes. De plus, l’intégration avec d’autres services peut être délicate.

Cet article explique comment afficher les jolies cartes IGN à l’aide d’une API simple et activement maintenue, l’API Google Maps Javascript.

Auparavant, les cartes IGN en ligne utilisaient une projection particulière, et un système de distribution de jeton, ce qui rendait leur intégration dans Google Maps non pas impossible, mais délicate.

Désormais le service WMTS (Web Map Tile Service) de l’IGN fournit des tuiles 256x256 projetées « à la Google » (EPSG:3857), donc l’intégration est on ne peut plus facile. On commence par créer un nouvel objet MapType :

ignMapType = new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) {
            return "http://gpp3-wxs.ign.fr/" + *ignKey* + "/geoportail/wmts?LAYER=" +
                *layer* +
                "&EXCEPTIONS=text/xml&FORMAT=image/jpeg&SERVICE=WMTS&VERSION=1.0.0" +
                "&REQUEST=GetTile&STYLE=normal&TILEMATRIXSET=PM&TILEMATRIX=" +
                zoom + "&TILEROW=" + coord.y + "&TILECOL=" + coord.x;
        },
        tileSize: new google.maps.Size(256,256),
        name: *name*,
        maxZoom: 18
});

où :

ignKey est votre clé API Géoportail,
layer est la couche souhaitée : GEOGRAPHICALGRIDSYSTEMS.MAPS pour les cartes classiques, ou encore GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE et GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD pour les nouvelles cartes « Scan Express » (respectivement en colorisation classique et pastel),
name est le nom de la couche dans l’interface Google Maps.

Ensuite il faut créer une carte avec un bouton pour cette nouvelle couche :

var map = new google.maps.Map(map_canvas, {
    mapTypeControlOptions: {
        mapTypeIds: ['IGN', google.maps.MapTypeId.ROADMAP],
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    }
}

et faire le lien entre cette couche et le type défini plus haut :

map.mapTypes.set('IGN', ignMapType);

C’est tout !

On peut récupérer facilement la liste des couches accessibles avec sa clé à l’aide de la requête HTTP :

http://gpp3-wxs.ign.fr/*votre\_clé*/wmts?service=WMTS&request=GetCapabilities