Leaflet est une nouvelle bibliothèque JavaScript  pour encapsuler des cartes qui est en train de gagner une forte popularité. Plus simple et plus légère que OpenLayers, c’est un bon choix pour ceux qui ont  des besoins d’encapsulation assez standards.

Sur cette page, nous expliquons comment créer une simple carte encapsulée avec des marqueurs utilisant Leaflet, comme le montre une des récentes compagnies de gestion de propriétés PlotBrowser.com étant passée à OpenStreetMap.

Téléchargement Leaflet

Vous pouvez télécharger Leaflet depuis son propre site sur leafletjs.com. La source est disponible comme un .zip, ou vous pouvez le forker sur GitHub.

Leaflet utilise une licence open-source BSD permissive donc qui peut être facilement intégrée dans n’importe quel site sans soucis juridiques.

Copiez le répertoire dist/ à l’emplacement sur votre serveur web d’où la page encapsulée sera servie, et renommez-le en leaflet/ .

Encapsuler Leaflet dans votre page

Pour la facilité d’utilisation, nous allons créer un fichier .js avec tout notre code de carte dedans. Vous pouvez bien sûr mettre ceci en ligne dans la page principale si vous aimez. Créez cette page dans votre répertoire leaflet/ et appelez-la leafletembed.js.

Utilisez le code suivant dans leafletembed.js:

var map;
var ajaxRequest;
var plotlist;
var plotlayers=[];

function initmap() {
    // set up the map
    map = new L.Map('map');

    // create the tile layer with correct attribution
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});

    // start the map in South-East England
    map.setView(new L.LatLng(51.3, 0.7),9);
    map.addLayer(osm);
}

Then include it in your embedding page like this:

<link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
<script type="text/javascript" src="leaflet/leaflet.js"></script>
<script type="text/javascript" src="leaflet/leafletembed.js"></script>

Ajoutez une div avec une taille appropriée appelée ‘map‘ avec une page encapsulée; ensuite, finalement, ajoutez un peu de JavaScript à votre page encapsulée pour initialiser la carte, soit à la fin de la page ou dans un événement onload:

initmap();

Félicitations; vous avez encapsulé votre première carte avec Leaflet.

Montrer les marqueurs au fur et à mesure que vous déplacer la carte

Il y a d’excellents exemples sur le site web Leaflet. Ici, nous allons montrer un cas courant supplémentaire: montrer des marqueurs cliquables sur la carte et où les emplacements des marqueurs sont rechargés depuis le serveur lorsque l’utilisateur se déplace sur la carte.

En premier, nous ajouterons le code AJAX standard du même type que vous devriez avoir déjà vu un millier de fois avant. En haut de la fonction initmap dans le fichier  leafletembed.js, ajoutez :

// set up AJAX request
ajaxRequest=getXmlHttpObject();
if (ajaxRequest==null) {
    alert ("This browser does not support HTTP Request");
    return;
}

Ensuite, ajoutez cette nouvelle fonction quelque part dans leafletembed.js:

function GetXmlHttpObject() {
    if (window.XMLHttpRequest) { return new XMLHttpRequest(); }
    if (window.ActiveXObject)  { return new ActiveXObject("Microsoft.XMLHTTP"); }
    return null;
}

Après, nous allons ajouter une fonction pour interroger la liste de marqueurs (en JSON) pour l’étendue couverte par la carte courante:

function askForPlots() {
    // request the marker info with AJAX for the current bounds
    var bounds=map.getBounds();
    var minll=bounds.getSouthWest();
    var maxll=bounds.getNorthEast();
    var msg='leaflet/findbybbox.cgi?format=leaflet&bbox='+minll.lng+','+minll.lat+','+maxll.lng+','+maxll.lat;
    ajaxRequest.onreadystatechange = stateChanged;
    ajaxRequest.open('GET', msg, true);
    ajaxRequest.send(null);
}

Cela parle à un script côté serveur qui retourne simplement un array JSON des propriétés que nous souhaitons afficher sur la carte, comme ceci:

[{"name":"Tunbridge Wells, Langton Road, Burnt Cottage",
  "lon":"0.213102",
  "lat":"51.1429",
  "details":"A Grade II listed five bedroom wing in need of renovation."}

(etc.)

Quand cela arrive, nous effaçons les marqueurs existants et affichons les nouveaux, en créant une fenêtre pop-up rudimentaire pour chacun d’eux:

function stateChanged() {
    // if AJAX returned a list of markers, add them to the map
    if (ajaxRequest.readyState==4) {
        //use the info here that was returned
        if (ajaxRequest.status==200) {
            plotlist=eval("(" + ajaxRequest.responseText + ")");
            removeMarkers();
            for (i=0;i<plotlist.length;i++) {
                var plotll = new L.LatLng(plotlist[i].lat,plotlist[i].lon, true);
                var plotmark = new L.Marker(plotll);
                plotmark.data=plotlist[i];
                map.addLayer(plotmark);
                plotmark.bindPopup("<h3>"+plotlist[i].name+"</h3>"+plotlist[i].details);
                plotlayers.push(plotmark);
            }
        }
    }
}

function removeMarkers() {
    for (i=0;i<plotlayers.length;i++) {
        map.removeLayer(plotlayers[i]);
    }
    plotlayers=[];
}

Enfin, lions ceci avec le reste de votre script. Après que nous ayons ajouté la carte dans initmap, nous allons interroger une première série de marqueurs, et mettez en place un événement pour faire ceci chaque fois que la carte est déplacée. Ajoutez ceci juste à la fin de initmap:

   askForPlots();
    map.on('moveend', onMapMove);
}

// Ensuite, ajoutez ceci comme une nouvelle fonction...
function onMapMove(e) { askForPlots(); }