Des souris et des cartes

Accueil > Lab > Géoportail > Géoportail et OpenLayers

2 votes

Géoportail et OpenLayers

vendredi 18 avril 2014, par Spip

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

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" />
<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script>

- Il faut ensuite ajouter une div pour la carte :

<div id="map" style="width:100%; height:400px;"></div>

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

function geoportailOptions (name, key, layer, options)
{  if (!options) options={};
   var opt =
   {  name: name,
      url: "http://wxs.ign.fr/" + key + "/wmts",
      layer: layer,
      matrixSet: "PM",
      style: "normal",
      format: options.format ? options.format : "image/jpeg",
      numZoomLevels: options.maxZoom ? options.maxZoom : 18,
      group : "IGN",
      attribution: '&copy; <a href="http://www.ign.fr/">IGN-France</a>'
   };
   return opt;
}

- On peut alors insérer facilement une nouvelle couche Géoportail à la carte :

map.addLayer (new OpenLayers.Layer.WMTS(geoportailOptions("Cartes IGN", apiKey, "GEOGRAPHICALGRIDSYSTEMS.MAPS", { maxZoom:19 })) );

Et voilà le résultat !

Affichage du Géoportail avec OpenLayers

Pour aller plus loin, on peut définir un layer OpenLayers intégrant la définition des options. Pour cela, rendez vous sur la page Github

Un message, un commentaire ?

Forum sur abonnement

Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.

Connexions’inscriremot de passe oublié ?