FR:Switch2osm/Translation/using-tiles/getting-started-with-leaflet/

Leaflet est une nouvelle librairie JavaScript pour intégrer des cartes dont la popularité augmente rapidement. Plus simple et léger qu'OpenLayers, c'est un bon choix pour ceux qui ont besoin d'intégrer des cartes relativement standards.

Nous vous expliquons ici comment intégrer une simple carte avec des marqueurs en utilisant Leaflet, comme l'a fait un site web qui est récemment passé à OpenStreetMap le site immobilier PlotBroswer.com.

Télécharger Leaflet

Vous pouvez télécharger Leaflet depuis son site d'origine leafletjs.com. Le code source est disponible dans un fichier .zip ou vous pouvez créer un fork sur GitHub.

Leaflet est publié sous licence pour logiciels libres BSD et peut ainsi être utilisé sur n'importe quel site sans avoir à s'inquiéter des aspects légaux.

Copiez le répertoire dist/ à l'endroit où votre serveur web lira la page contenant la carte et renommer-la leaflet/ .

Intégrer Leaflet à votre page

Pour une plus grande facilité d'utilisation, nous allons créer un fichier .js séparé avec tout notre code dedans. Bien entend, vous pouvez aussi mettre ce code en ligne à l'intérieur de votre page principale si vous le souhaitez. Créez ce fichier dans votre répertoire leaflet/ et nommez-le leaflet_embed.js.

Copiez ensuite le code suivant dans leaflet_embed.ja:

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 © OpenStreetMap 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);
}

Puis intégrez-le dans votre page web comme ceci:

<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 un conteneur avec une taille appropriée appelée ‘map‘ à votre page devant accueillir la carte; puis, finalement, ajoutez du JavaScript à votre page pour initialiser la carte, soit à la fin de la page, soit sur un évènement de chargement:

initmap();

Félicitations, vous avez intégrer votre première carte avec Leaflet.

Faire apparaître des marqueurs lorsque l'utilisateur se déplace dans la carte

Il y a plusieurs exemples excellents sur le site web de Leaflet. Ici, nous allons faire une démonstation avec un autre cas assez courant: montrer des marqueurs cliquables sur la carte avec un rechargement des positions de marqueurs depuis le serveur à chaque fois que l'utlisateur déplace la carte.

Tout d'abord, nous allons ajouter le code AJAX standard déjà vu des milliers de fois. Au début de la fonction initmap dans leafletembed.js, ajoutez:

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

puis ajoutez la 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;
}

Ensuite, vous ajouterez une fonction lançant une requête pour obtenir la liste des marqueurs (au format JSON) pour la vue courante de la carte:

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);
}

Ce code permet d'obtenir de la part d'un script côté serveur la chaîne JSON avec les attributs nécessaires pour l'affichage sur la carte, comme ici par exemple:

[{"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.)

Lorsque les données sont reçues, nous allons effacer les marqueurs existant et afficher 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=[];
}

Pour finir, connectons ceci avec le reste de nos scripts. Après avoir ajouter la carte dans initmap, lançons une requête pour charger les marqueurs une première fois et définissons un événement pour chaque déplacement de la carte. Ajoutez simplement ceci à al fin de initmap:

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

// then add this as a new function...
function onMapMove(e) { askForPlots(); }

C'est tout. Vous pouvez voir le résultat final sur PlotBrowser.com.