Des souris et des cartes

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

1 vote

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>

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
});

- 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}" ;
}

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

- Et, pour le fun, une punaise :

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

Et voilà le résultat !

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.

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é ?