Afficher les cartes IGN dans Google Maps API
Le vendredi 10 mai 2013 à 16:00 - Lien permanent
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 encoreGEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE
etGEOGRAPHICALGRIDSYSTEMS.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
→ Un exemple avec quelques couches (licence MIT).
Pour aller plus loin : faire la même chose avec les cartes suisses Swisstopo. Là il faut reprojeter les tuiles, et ce qui marche bien c'est d'utiliser un service de... l'IGN !
Commentaires
Bonjour,
merci pour ce tuto, juste une question sur la clé IGN: quel type de clé faut-il demander car moi j'ai un nom d'utilisateur et un mot de passe avec ma clé et je ne sais pas ou les mettre...
Merci.
Pour le type GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE suite à changement sur gpp3-wxs.ign.fr je pense qu'il faut prendre le zoom max à 17 (au lieu de 16)
C'est a dire comme ceci : map.mapTypes.set('IGNScanExpress', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE", "IGN Scan Express", 16));
Avec un zoom de 16 (TILEMATRIX=16), gpp3-wxs.ign.fr renvoie "NOT FOUND".
Ce qui se traduit par une carte IGN-E "vide" en zoom max sur votre page maps.jacquet80.eu (et aussi sur http://maps.jacquet80.eu/demo_ign.h...)
@Tiego :
Avec le login/mot de passe, on peut se connecter sur le site de l'IGN et demander une clé. Une clé est spécifique à un nom de domaine.
Dans le code ci-dessus, la clé est à mettre dans la variable ignKey, comme indiqué.
Bonjour Christophe,
un grand merci pour cet article qui m'a permis de me dépatouiller avec l'api Google map + Geoportail.
Voici ce que ça donne : http://2boandco.com/tools/map/ :)
Bonne continuation
Merci génial ça m’enlève une épine du pied.
Merci beaucoup. Google Maps est bien plus pratique.
Pas de problème pour la France et la Suisse (on trouve les exemples...) mais j'ai des difficultés avec l'Espagne.
J'obtiens bien les tuiles de la zone mais celles-ci ne sont pas en place. Il y a un problème de projection que je n'arrive pas à résoudre.
http://chatenois.ecole.free.fr/ign/... : Dans le menu qui s'affiche en haut a droite cliquer sur "Spain" pour afficher les cartes Espagnoles.
Pour des zooms rapproché certaines tuiles sont manquantes (coordonnées incorrectes...)
Merci pour des conseils...
Bonjour,
Un grand merci pour ce tuto. Je cherchais depuis longtemps à n'utiliser que l'API GoogleMaps avec fonds de carte IGN
Grace à vous je peux maintenant le faire.
Une question toutefois: Est-il possible en plus de la couche IGN
d'ajouter un contrôle IGN: je pense notamment au contrôle de recherche d'un lieu ?
Je sais c'est vouloir le beurre et l'argent du beurre, mais dois-je désespérer ?....
ENCORE MERCI
Bonjour,
Merci pour cette page, qui m'a bien aidé à afficher des couches IGN dans Google Maps.
Je parviens désormais à afficher un certain nombre de couches : http://bus.w.pw/PourChristopheJacqu...
Néanmoins comme vous pouvez le constater cela ne fonctionne pas pour les limites administratives, ni pour les parcelles cadastrales, alors que ce sont normalement des couches auxquelles j'ai "droit" avec ma clé IGN;
ni pour la carte de Cassini, qui ne marche d'ailleurs plus non plus sur http://Maps.Jacquet80.eu/demo_ign.h... bien que cette couche soit toujours mentionnée sur http://Depot.IGN.Fr/geoportail/api/...
Auriez-vous des idées pour faire fonctionner ces couches?
Merci d'avance si vous êtes plus doué que moi! ;-)
Cordialement
Merci pour ce petit bout de code qui m'a bien simplifié la vie.
Une question SVP:
Dans la requête les variables coord.x et coord.y correspondent si j'ai bien compris aux coordonnées de la tuile à charger (TILEROW et TILECOL).
Mais d'où sortent donc coord.x et coord.y?
Aucune trace des ces objets dans mon script ni dans le le script de googlemap, et pourtant ça marche.
Gilbert, la fonction getTileUrl est spécifiée ici : https://developers.google.com/maps/...
coords est de type google.maps.Point.