Leaflet : une bibliothèque JavaScript de cartographie adaptée aux mobiles

Par:
fredericmazue

mar, 02/04/2019 - 17:30

Leaflet est une bibliothèque JavaScript pour générer des cartes interactives adaptées aux mobiles . Pesant à peu près 37 Ko de code JavaScript compressé, Leaflet offre toutes les fonctions de cartographie dont la plupart des développeurs ont besoin, assurent les responsables du projet.

Les responsables du projet soulignent en outre que Leaflet est conçue pour la simplicité, la performance et la convivialité. Leaflet fonctionne sur toutes les plates-formes mobiles et de bureau. Leaflet s'appuie sur le support HTML5 et CSS3 des navigateurs modernes tout en restant accessible à des navigateurs plus anciens.

Leaflet expose une API qui permet d'étendre ses fonctionnalités au moyen de plugins. Ceux-ci existent déjà en grand nombre

Voici par exemple comment créer une carte plein écran sur des terminaux mobiles tels que iPhone, iPad ou Android et afficher la localisation courante de l'utilisateur.

Pour avoir une div qui remplit tout l'écran, on commence par une déclaration CSS :

body {
    padding: 0;
    margin: 0;
}

html, body, #map {
    height: 100%;
    width: 100vw;
}

à laquelle in adjoint une balise meta :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Ensuite on initialise la carte :

var map = L.map('map').fitWorld();

L.tileLayer('https://api.tiles.mapbox.com/v4/MapID/997/256/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18
}).addTo(map);

Ensuite on géolocalise l'utilisateur, dans cet exemple en spécifiant un coefficient de zoom maximum :

map.locate({setView: true, maxZoom: 16});

Il est possible d'ajouter un gestionnaire d'événement pour faire quelque chose lorsqu'une géolocalisation aboutit :

function onLocationFound(e) {
    var radius = e.accuracy / 2;

    L.marker(e.latlng).addTo(map)
        .bindPopup("Vous êtes dans un rayon de " + radius + " mètres à partr de ce point").openPopup();

    L.circle(e.latlng, radius).addTo(map);
}

map.on('locationfound', onLocationFound);

Leaflet utilise OpenStreetMap et est un logiciel libre disponible sur GitHub ainsi que sur son site officiel. Ce dernier propose en outre des didacticiels et une documentation complète.