Des souris et des cartes

Accueil > Lab > Géoportail > Géoportail avec Leaflet

2 votes

Géoportail avec Leaflet

vendredi 18 avril 2014, par Spip

Cet article explique comment afficher les jolies cartes IGN à l’aide de la bibliothèque JavaScript Leaflet.

- La première chose à faire est de charger la bibliothèque Leaflet sur votre page.
Pour cela, il faut inclure le fichier de style (CSS) et le code javascript (JS) de la bibliothèque :

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/master/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/master/leaflet.js"></script>
Télécharger

Pour plus d’information, rendez-vous sur le site de Leaflet.

- 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 = L.map("map", {
        center: new L.LatLng(48.845, 2.424),
        zoom: 15
});
Télécharger

- Pour ajouter un nouveau calque à la carte, nous allons utiliser le tileLayer de Leaflet : L.tileLayer (url,options).
Pour cela, il nous faut calculer l’url de la couche Géoportail à afficher avec la clé fournie par l’API, le nom du layer et son format :

function geopUrl (key, layer, format)
{  return "http://wxs.ign.fr/"+ key + "/wmts?LAYER=" + layer
      +"&EXCEPTIONS=text/xml&FORMAT="+(format?format:"image/jpeg")
      +"&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&STYLE=normal"
      +"&TILEMATRIXSET=PM&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}" ;
}
Télécharger

On peut alors déclarer une couche Leaflet pour la carte de la manière suivante, en pensant à fournir une attribution (licence oblige) :

L.tileLayer ( geopUrl(apiKey,"GEOGRAPHICALGRIDSYSTEMS.MAPS"),
  {   attribution:'&copy; <a href="http://www.ign.fr/">IGN-France</a>',
      maxZoom:18
  } ).addTo(map);
Télécharger

- Et, pour le fun, une punaise :

L.marker([48.84475, 2.4237]).addTo(map).bindPopup("C'est facile !").openPopup();

Et voilà le résultat !

  • Résultat
  • JS
  • HTML
 

Affichage du Géoportail avec Leaflet

Pour aller plus loin, on peut définir un layer Leaflet encapsulant la définition de l’url. Pour cela, rendez vous sur la page Github.

Dossier Géoportail
Les flux Géoportail
Géoportail et OpenLayers
2/5

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.

Connexion | s’inscrire | mot de passe oublié ?

Lab

Dossier Géoportail

Mots-clés

2009-2024 Géopole
Plan du site | | Contact | RSS 2.0

SPIP