Leaflet : créer votre carte rapidement

Publié le par
Leaflet

En recherchant comment manipuler des fichiers au format GPX avec l’API Google Maps, j’avais repéré il y a déjà des mois de cela un module qui semblait permettre de lire un GPX natif et de le placer sur une carte. Sauf qu’il s’agissait d’un plugin pour Leaflet, plutôt que pour Google Maps.

J’ai donc décidé de m’intéresser à cette API, et j’ai été ravi de la rapidité d’implémentation. Avant de rentrer plus en détail sur mon travail avec les GPX, voici donc un morceau de code pour implémenter une carte Leaflet ! Cela se résume en quelques lignes de HTML et de Javascript.

Ce qui suit ne se veut pas être un tutoriel complet sur Leaflet, juste une amorce pour les curieux qui voudrait comparer avec Google Maps.

Mise en place d’un fond de carte

Pour bénéficier de l’API javascript Leaflet (aujourd’hui en V0.7.2), il faut commencer par intégrer l’API elle-même, ainsi que la CSS qui l’accompagne :

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

Vient ensuite le positionnement de la carte dans la page HTML via un div appelé « map », et son initialisation en javascript:

<div id="map"></div>
<script type="text/javascript>
       //création d'une carte centrée sur Paris ([48.856578, 2.351828]),
       // avec un zoom de niveau '13'. 
       var map = L.map('map').setView([48.856578, 2.351828], 13);
       // Association d'un fond de carte provenant d'OSM
       // Accessoirement, ajout d'un copyright facultatif '{ attribution: ...}
       L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
              attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>' 
       }).addTo(map);
</script>

Voilà, vous venez de créer votre première carte Leaflet !

Leaflet
Carte Leaflet centrée sur Paris

Moyennant un peu de CSS, et un code complet, voici donc la page dans sa totalité :

<!doctype html>
<html>
        <head>
                <title>leaflet demo</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
                <style>
                        html { height: 100% }
                        body { height: 100%; margin: 0; padding: 0 }
                        #map { 
                                width: 800px;
                                height: 480px; 
                        }
                </style>

                <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
                <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
                </head>
        <body>
                <div id="map"></div>
                <script type="text/javascript">
                        var map = L.map('map').setView([48.856578, 2.351828], 13);
                        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>' }).addTo(map);
                </script>
        </body>
</html>
Création d’un premier Marker

Après l’initialisation de notre carte, créons maintenant un marker pour montrer Notre Dame de Paris :

var marker = L.marker([48.853056, 2.349722]).addTo(map);

Ajoutons y une popup qui réagit quand la souris passe sur le marker :

marker.bindPopup("Notre Dame de Paris");
marker.on('mouseover', function(e){ marker.openPopup(); });
marker.on('mouseout', function(e){ marker.closePopup(); })

Ou si vous êtes un peu plus joueur :

marker.bindPopup("Notre Dame de Paris")
      .on('mouseover', function(e){ marker.openPopup(); })
      .on('mouseout', function(e){ marker.closePopup(); });

Ce qui doit donner une carte proche de l’image ci-dessous (zoomée) :

Notre Dame de Paris

Aujourd’hui, Leaflet me paraît plus simple que Google Maps pour implémenter le fond de carte et la gestion des markers. Et si je ne maîtrise pas tout à fait le sujet, j’ai tout de même pu intégrer le module GPX que j’évoquais au début de l’article et y ajouter quelques fonctionnalités qui m’intéressaient, mais cela fera l’objet d’autres articles.

Je vous laisse pousser votre propre recherche pour aller plus loin sur les bases de Leaflet en jetant un coup d’oeil aux tutoriaux disponibles.

Laisser un commentaire