Aller au contenu

Leaflet, une nouvelle librairie cartographique en Javascript#

📆 Date de publication initiale : 15 juin 2011

Mots-clés : JavaScript | API | Open Source | Leaflet

logo leafletjs

Annoncé il y à quelques semaines, Leaflet est la nouvelle API cartographique en JavaScript de Cloud Made. Les conditions d'utilisations sont très souples puisqu'elle a été publiée sous licence BSD. Néanmoins, que vaut-elle par rapport aux autres alternatives existantes ? Partons dans ce tutoriel à la découverte de celle-ci.

Téléchargement#

Commençons tout d'abord par télécharger la librairie. Premier constat, celle-ci est particulièrement légère, à peine plus d'une cinquantaine de kilo octets pour la version compressée. Quelques exemples d'applications sont déjà disponibles, mais regardons ce qu'elle permet de faire.

Contenu de l'API#

Composé d'une dizaine de classes, l'API de leaflet contient les éléments habituels nécessaires à la construction d'une application cartographique. Nous retrouvons ainsi la classe map, la classe Rasters Layer ou encore la classe control. Les habitués d'OpenLayers ou de Google Maps ne se sentiront pas dépaysés. Néanmoins, à première vue les possibilités sont tout de même plus limitées. Par exemple, pour le moment les seuls contrôles disponibles sont celui du zoom et des attributions.

Afficher une carte#

Squelette de la page#

Bon, passons aux choses sérieuses et commençons à étudier un peu le code. Nous allons pour les besoins de ce tutoriel créer une carte sur laquelle s'affichera un marqueur.
Commençons par le squelette de notre page HTML.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Quick Start Guide Example</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="./CloudMade-Leaflet/dist/leaflet.css" />
    <script src="./CloudMade-Leaflet/dist/leaflet.js"></script>
    <script>
      function init() {
        //Leaflet code
      }
    </script>
  </head>
  <body onLoad="init()">
    <div id="map" style="width: 600px; height: 400px"></div>
  </body>
</html>

Rien de très sorcier. Nous allons simplement appeler la fonctiont "init()" au chargement de la page. C'est à l'intérieur de cette fonction que nous allons construire notre carte.

L'objet Map#

Passons maintenant à l'objet map. Celui-ci prend en paramètre l'id d'un div de votre dom. Dans notre cas l'id est 'map'. Ensuite nous pouvons ajouter des arguments supplémentaires comme le zoom initial, la position de la carte, les actions autorisées (zoom, déplacement, etc), ou encore l'activation ou non d'animations lors des transitions. Festival de Cannes oblige, zoomons sur la croisette :

1
2
3
4
5
6
function init() {
  var map = new L.Map("map", {
    center: new L.LatLng(43.55, 7.02),
    zoom: 14,
  });
}

Les couches de données#

Notre objet map créé, nous allons lui ajouter maintenant une couche de données. Les trois types disponibles sont une couche de type TileLayer, de type WMS ou une image. Pour le moment, utilisons le service de tuile de Cloud Made. Mais, pour cela une inscription est nécessaire afin de disposer d'une clé d'authentification. Cette dernière sera à spécifier lors de l'appel des tuiles. Par exemple :

1
2
3
4
5
6
function init(){
    [...]
    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/Your-API-Key/997/256/{z}/{x}/{y}.png';
    var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});
    map.addLayer(cloudmade);
}

Le petit côté sympa de cloud made, c'est la possibilité de changer le style de votre carte. Pour cela, il suffit de modifier le chiffre (997) par un nouvel identifiant d'un des nombreux styles disponibles via l'interface d'édition. Par exemple, modifions 997 par 999 pour lui donner un petit air plus sombre !
Et voilà, il nous suffit maintenant d'ajouter cette couche à la carte grâce à la méthode map.addLayer().
Si vous rechargez votre page, vous devriez maintenant disposer d'une carte avec cannes affichée en noir et blanc.

Les marqueurs#

Voyons comment ajouter un marqueur. Cela se fait en à peine trois lignes de code :

1
2
3
4
5
6
function init(){  
    [...]  
    var latlng = new L.LatLng(43.55, 7.018); // 1  
    var marker = new L.Marker(latlng); // 2  
    map.addLayer(marker); // 3
}

Premièrement nous spécifions les coordonnées du marqueur avec l'objet Latlng que nous passons ensuite en argument à notre objet marqueur. Enfin, il suffit d'ajouter celui-ci à la carte.
Bien que l'icône du marqueur soit déjà très sympathique voyons tout de même comment changer celle-ci. Pour cela, nous allons étendre les propriétés initiales de l'objet Icon. Cela se fait de la manière suivante :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function init(){  

    var icon = L.Icon.extend({  
        iconUrl: './icone.png',  
        iconSize: new L.Point(32, 32),  
        shadowSize: new L.Point(0, 0)  
    });  
    var cannesIcon = new icon();  
    var latlng = new L.LatLng(43.55, 7.018);  
    var marker = new L.Marker(latlng, {icon: cannesIcon});  
    map.addLayer(marker);  
}

Il ne manque plus qu'à ajouter une jolie infobulle.

Les infobulles#

L'affichage d'une infobulle est vraiment très simple. Une seule ligne suffit :

1
2
3
4
function init(){  
    [...]
    marker.bindPopup('Vive le festival de Cannes');  
}

Code et application#

Voici le code complet utilisé pour ce tutoriel ainsi que le rendu final

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function init(){  
// initialize the map on the "map" div with a given center and zoom  
    var map = new L.Map('map', {  
        center: new L.LatLng(43.55, 7.02),  
        zoom: 14  
    });

    // create a CloudMade tile layer  
    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/5c3066fdbca745adb52e3efb943995c5/999/256/{z}/{x}/{y}.png';

    var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});

    // add the CloudMade layer to the map  
    map.addLayer(cloudmade);

    // Change the default icon style  
    var icon = L.Icon.extend({  
        iconUrl: './icone.png',  
        iconSize: new L.Point(32, 32),  
        shadowSize: new L.Point(0, 0)  
    });  
    var cannesIcon = new icon();  
    var latlng = new L.LatLng(43.55, 7.018);  
    var marker = new L.Marker(latlng, {icon: cannesIcon});  
    map.addLayer(marker);

    // Add a popup  
    marker.bindPopup('Vive le festival de Cannes');  
}

Conclusion#

Leaflet est une librairie Javascript bien sympathique dont la prise en main est rapide et l'API assez intuitive. Néanmoins, même si Rodolphe Quiédeville met en avant son poids et la rapidité d'affichage, je reste pour le moment fidèle à OpenLayers. En effet, celle-ci n'apporte pas de fonctionnalités supplémentaires mis à part le plaisir de coder avec une nouvelle librairie.

Auteur#

Portait de GeoTribu GeoTribu

Toute l'actualité de la géomatique Open Source ! Mais aussi des tutoriels, des billets de blog, des tests et surtout une bonne humeur géographique !

Dernière mise à jour: 3 juin 2021
Contributions à cette page : TestGTR

Commentaires

Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.