Guide de démarrage rapide de Leaflet

Leaflet est une bibliothèque JavaScript pour la création de cartes intéractives dans navigateur web ou un environnement mobile. Elle est légère, mais possède toutes les caractéristiques dont la plupart des développeurs ont besoin pour créer des cartes en ligne. Leaflet est conçu avec la simplicité, la performance et la convivialité à l’esprit.

Contenu

• Guide de démarrage rapide de Leaflet

  • Lancement

  • Préparez votre page

  • Mise en place de la carte

  • Marqueurs, cercles et polygones

  • Travailler avec les infobulles

  • Gérer les événements

  • Ensuite ?

Lancement

Prior to running this quick start you should start MapProxy. On OSGeoLive this can be found under Geospatial\Web Services\MapProxy\Start MapProxy. This will provide background tiles that will be used in this demo.

Voir l’exemple

Astuce

Si vous lisez ce guide de démarrage rapide à l’extérieur d’OSGeoLive, vous pouvez préférer lire la démo originale sur : https://leafletjs.com/examples/quick-start/, puisque cette démo utilise Tilestache présent dans OSGeoLive.

Préparez votre page

Avant d’écrire n’importe quel code concernant la carte, vous devez suivre les étapes suivantes de la préparation sur votre page :

• Inclure les fichiers CSS de Leaflet dans la section head de votre document

<link rel="stylesheet" href="/leaflet/leaflet.css" />

• Inclure le fichier JavaScript contenant Leaflet :

<script src="/leaflet/leaflet.js"></script>

• Mettez un élément div avec un certain id où vous souhaitez que votre carte soit :

<div id="map"></div>

• Assurez-vous que le conteneur de la carte possède une hauteur définie, par exemple en la plaçant dans le CSS :

#map { height: 180px; }

Vous êtes maintenant prêt pour initialiser la carte et de faire quelque chose avec elle.

Mise en place de la carte

Let’s create a map of Firenze, Italy with an indication of the 2022 FOSS4G conference. First we’ll initialize the map and set its view to our chosen geographical coordinates and a zoom level:

var map = L.map('map').setView([43.77913, 11.24938], 15);

Par défaut (comme nous n’avons pas passé toutes les options lors de la création de l’instance de carte), toutes les interactions de souris et de touché sur la carte sont activées et il y a des contrôles de zoom et d’attribution.

Notez que l’appel setView renvoie également l’objet carte - la plupart des méthodes de Leaflet agissent comme ça quand ils ne retournent pas une valeur explicite, qui permet d’utiliser une méthode de chaînage similaire à jQuery.

Next we’ll add a tile layer to our map. In this case we will be using the tile images provided by MapProxy on the live dvd. Note that using nicer background maps such as openstreetmap will result in a much better user experience.

La création d’une couche tuilée implique habituellement de définir le modèle d’URL pour les images tuilées, le texte d’attribution et le niveau de zoom maximal de la couche :

L.tileLayer('http://localhost:8011/wmts/mapnik_tile/GLOBAL_WEBMERCATOR/{z}/{x}/{y}.png',{}).addTo(map);

Si vous avez accès Internet, vous pouvez utiliser un fond de carte plus agréabl :

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:18, attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

Assurez-vous que tout le code est appelé après l’insertion de la div et de leaflet.js. Voilà ! Vous avez une carte Leaflet fonctionnelle maintenant.

Il est à noter que Leaflet est indépendant du fournisseur, ce qui signifie qu’il n’est pas imposé un choix particulier de fournisseurs pour les tuiles, et il ne contient même pas une ligne spécifique au fournisseur, donc vous êtes libre d’utiliser d’autres fournisseurs si vous en avez le besoin.

Marqueurs, cercles et polygones

En plus des couches de tuiles, vous pouvez facilement ajouter d’autres choses à votre carte, y compris des marqueurs, des polylignes, des polygones, des cercles et des infobulles (fenêtres pop-up). Nous allons ajouter un marqueur :

var marker = L.marker([43.77913, 11.24938]).addTo(map);

L’ajout d’un cercle est identique (sauf qu’il spécifier le rayon en mètres comme deuxième argument), mais vous permet de contrôler à quoi il ressemble en passant des options comme dernier argument lors de la création de l’objet :

var circle = L.circle([43.777, 11.255], 250, {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0.5
}).addTo(map);

Il est aussi facile d’ajouter un polygone :

var polygon = L.polygon([
    [43.775, 11.247],
    [43.784, 11.240],
    [43.778, 11.238]
]).addTo(map);

Travailler avec les infobulles

Les fenêtres infobulle sont généralement utilisées lorsque vous souhaitez joindre des informations à un objet particulier sur la carte. Leaflet a un raccourci très pratique pour cela :

var popup = L.popup()
   .setLatLng([43.77913, 11.24938])
   .setContent("FOSS4G is here this year!")
   .openOn(map);

Ici nous utilisons openOn au lieu de addTo car cela gère la fermeture automatique d’une infobulle ouverte préalablement à l’ouverture d’une nouvelle, ce qui est bon pour la facilité d’utilisation.

Gérer les événements

Chaque fois que quelque chose se passe dans Leaflet, par exemple quand l’utilisateur clique sur un marqueur ou le zoom de la carte change, l’objet correspondant envoie un événement aucquel vous pouvez abonner une fonction. Il vous permet de réagir à l’intervention de l’utilisateur :

function onMapClick(e) {
   alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

Chaque objet possède son propre ensemble d’événements - voir la documentation pour plus de détails. Le premier argument de la fonction d’écouteur est un objet event - il contient des informations utiles sur l’événement qui s’est passé. Par exemple, l’événement Clic sur l’objet de la carte (e dans l’exemple ci-dessus) a une propriété latlng qui est l’emplacement où le clic s’est produit en coordonnées géographiques (latitude longitude).

Nous allons améliorer notre exemple en utilisant une infobulle au lieu d’une alerte :

var popup = L.popup();

function onMapClick(e) {
   popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
         .openOn(map);
}

map.on('click', onMapClick);

Essayez de cliquer sur la carte et vous verrez les coordonnées dans une infobulle. Découvrez l’exemple complet

Ensuite ?

Maintenant, vous avez appris des rudiments de Leaflet et pouvez commencer à créer des applications de carte tout de suite ! N’oubliez pas de jeter un oeil à la documentation détaillée ou autres exemples.