Cet article explique comment afficher les jolies cartes IGN à l’aide de la bibliothèque JavaScript OpenLayers.
Oui je sais, ça peut paraître idiot puisque l’API fournie par l’IGN est basée sur OpenLayers, mais cela peut-être utile si vous avez déjà l’habitude d’OpenLayers ou si vous voulez utiliser la dernière version de la célèbre bibliothèque. Pour plus d’information, consultez les exemples OpenLayers.
Commençons par charger la bibliothèque sur votre page en incluant le fichier fichier de style (CSS) et le code javascript (JS) :
Maintenant, passons au code JavaScript pour déclarer la carte sur notre div :
var map =new OpenLayers.Map("map",{ projection:"EPSG:3857"});
Pour ajouter un nouveau calque à la carte, nous allons utiliser un layer WMTS : OpenLayers.Layer.WMTS. Pour cela, il faut fournir à OpenLayers la liste des options de la couche Géoportail à afficher avec la clé fournie par l’API, le nom du layer et son format :
Copyright (c) 2013 Jean-Marc VIGLINO, released under the Beerware license (http://fr.wikipedia.org/wiki/Beerware). Affichage d'une carte Geoportail avec OpenLayers.js ------------------------------------------------------------> <linkrel="stylesheet"href="http://dev.openlayers.org/theme/default/style.css"/> <scripttype="text/javascript"src="http://dev.openlayers.org/OpenLayers.js"></script> <!-- DIV pour la carte --> <divid="map"style="width:100%; height:400px;"></div> <pclass="spip_doc_titre">
Affichage du Géoportail avec OpenLayers </p>
/*****
Copyright (c) 2013 Jean-Marc VIGLINO,
released under the Beerware license (http://fr.wikipedia.org/wiki/Beerware).
Affichage d'une carte Geoportail avec OpenLayers.js
*****/ function initMap() {// Nouvelle carte
map =new OpenLayers.Map("map",{ projection:"EPSG:3857"});