Leaflet - Première Carte

Création d'une carte centrée sur Paris

Dernière mise à jour le 23/06/2018
leaflet1.3.1

Notre objectif est le même que pour le premier tutoriel Google Maps, un code minimaliste et complet pour afficher une carte avec la librairie Leaflet.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
		<script type="text/javascript" src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
	</head>

	<body onload="initialize()">
		<div id="map" style="width:100%; height:100%"></div>
	</body>
</html>
<script type="text/javascript">
	function initialize() {
		var map = L.map('map').setView([48.833, 2.333], 7); // LIGNE 14

		var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { // LIGNE 16
			attribution: '© OpenStreetMap contributors',
			maxZoom: 19
		});
	
		map.addLayer(osmLayer);
	}
</script>
Quelques éléments sur ce code :

Le niveau de zoom 0 correspond à la vue de la terre entière (répétée plusieurs fois) et plus celui-ci augmente plus le détail augmente. Une particularité de Leaflet est qu'il n'est pas le fournisseur des fonds de carte (ce qu'on appelle les Tiles ou en français Tuiles). Ce n'est donc pas lui qui peut fournir le niveau de zoom maximal.

Si votre connexion est lente ou l'a déjà été, vous devez savoir ce que sont ces Tiles. Il s'agit des images carrés que votre navigateur télécharge en fonction de votre position sur la carte et de votre niveau de zoom. Ces carrés possèdent une certaine taille et mis bout à bout ils forment votre carte. Nous pouvons nous en rendre compte en regardant par exemple dans l'onglet réseau de Firebug (avec Firefox) :

L'image fait ici 256px * 256px, ce qui correspond à la taille par défaut. Dans l'url, les lettres z, x et y ont été remplacé par notre niveau de zoom (7) et par les coordonnées du Tile. Il existe de nombreux fournisseurs de Tiles utilisables avec Leaflet et ils fonctionnent tous de cette façon. Vous pouvez en voir une liste non-exhausitive ici : Liste de Tiles.

Deux choses à savoir sur les fournisseurs de Tiles :

Ajout de plusieurs Layers (exemple avec Google Maps)

Il est possible de proposer autant de Layers que l'on souhaite pour une même carte, laissant à l'utilisateur le soin de choisir celui qu'il préfère. Le code suivant permet d'ajouter les 4 Layers de Google Maps et celui d'OpenStreetMap. Il faut par contre importer le code javascript que l'on trouve sur le github suivant : leaflet-google.js.

Quand les librairies sont mises à jour au fil de l'eau

Info: Malheureusement ce code javascript n'est pas compatible avec la version 1.x de Leaflet. Les commentaires visibles sous le code permettent néanmoins de le modifier pour que tout fonctionne correctement. Le code peut être récupéré directement sur notre site : leaflet-google-correct-v1.js
var ggRoadmap = new L.Google('ROADMAP');
var ggSatellite = new L.Google('');
var ggTerrain = new L.Google('TERRAIN');
var ggHybrid = new L.Google('HYBRID');

map.addLayer(osmLayer); // Le layer par défaut
map.addControl(new L.Control.Layers( {
	'OpenStreetMap': osmLayer, 
	'Google Roadmap' : ggRoadmap, 
	'Google Satellite': ggSatellite, 
	'Google Terrain': ggTerrain, 
	'Google Hybrid' : ggHybrid
	}, {})
);

A droite de la carte est apparue une icone représentant la superposition de différentes couches. En cliquant dessus on peut choisir le Layer désiré.

Ajout d'un marker et personnalisation

L'ajout d'un marker est très simple à réaliser et le contenu de la popup peut être personnalisé avec de l'HTML

L.marker([48.5, -0.09]).addTo(map)
	.bindPopup('Le texte du marker<br> On peut y mettre du code HTML');

Pour changer le marker par une image que l'on possède c'est assez simple également. Il faut par contre produire l'image correspondant à l'ombre du marker ou alors supprimer l'ombre. Il convient également de bien paramétrer les différentes tailles et anchor de l'image. Notamment iconAnchor qui détermine la position du marker, si celle-ci est incorrecte le marker va se déplacer quand l'utilisateur utilise la fonctionnalité de zoom. Les mesures se font du coin en haut à gauche. Ainsi la pointe de notre marker se trouve au milieu et en bas, ce qui nous donne bien [32, 64].

var customIcon = L.icon({
	iconUrl: 'icon-marker.png',
	//shadowUrl: 'icon-shadow.png',
	iconSize:     [64, 64], // taille de l'icone
	//shadowSize:   [50, 64], // taille de l'ombre
	iconAnchor:   [32, 64], // point de l'icone qui correspondra à la position du marker
	//shadowAnchor: [32, 64],  // idem pour l'ombre
	popupAnchor:  [-3, -76] // point depuis lequel la popup doit s'ouvrir relativement à l'iconAnchor
});

L.marker([48.5, 0.5], {icon: customIcon}).addTo(map);

A suivre : Gestion des markers Voir le tutoriel

comments powered by Disqus