Leaflet Map - Première Carte

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

Dernière mise à jour le 14/04/2020
leaflet1.6.0

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.

<!DOCTYPE html>
<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.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
		<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
	</head>
	<style>
		html, body { height: 100% }
	</style>

	<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 18

		var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { // LIGNE 20
			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 de plusieurs Layers avec icones de prévisualisation

Nous avons découvert la librarie Leaflet.Basemaps qui permet d'afficher une prévisualisation des Layers. Pour l'utiliser il suffit d'importer les fichiers L.Control.Basemaps.css et L.Control.Basemaps-min.js dans sa page. Ensuite on définit normalement la liste des Layers que l'on souhaite rendre disponible et on ajoute l'ensemble à la carte en utilisant la librarie.

Prévisualisation des Layers
var map = L.map('map').setView([48.833, 2.333], 7);
	
let stamenLite = L.tileLayer('//{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	subdomains: 'abcd',
	maxZoom: 20,
	minZoom: 0,
	label: 'Toner Lite'  // Libellé pour le tooltip en option
	});
		
let stamenToner = L.tileLayer('//{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	subdomains: 'abcd',
	maxZoom: 20,
	minZoom: 0,
	label: 'Toner'
});

let stamenColor = L.tileLayer('//{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', {
	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	subdomains: 'abcd',
	maxZoom: 16,
	minZoom: 1,
	label: 'Watercolor'
});

map.addControl(L.control.basemaps({
	basemaps: [stamenLite, stamenToner, stamenColor],
	tileX: 0,  // Coordonnée X de la prévisualisation
	   tileY: 0,  // Coordonnée Y de la prévisualisation
	tileZ: 1   // Niveau de zoom de la prévisualisation
}));

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

Il est également possible d'utiliser la fonctionalité de tooltip pour afficher un texte ou code HTML de manière permanente.

L.marker([48.5, 2]).addTo(map)
	.bindTooltip("Les Granges-le-Roi", {permanent: true, direction: 'top'});

Les valeurs possibles pour la direction sont (comme souvent) : top, left, bottom, right. Par ailleurs si vous voulez surcharger le CSS il faut utiliser les classes leaflet-tooltip et leaflet-tooltip-top par exemple. Pour modifier la marge et positionner le tooltip un peu plus haut :

.leaflet-tooltip-top {
	margin-top: -15px; // Valeur par défaut -6px
}

VOUS POURRIEZ AIMER


Leaflet Maps - Regroupement de données avec des clusters

Leaflet Map - Groupement de markers

Ajout de 900 markers à une carte, groupement en fonction du niveau de zoom (cluster) et personnalisation des markers

Leaflet Maps - Création d'une carte de chaleur (heatmap)

Leaflet Map - Heat Map

Carte des tremblements de terre depuis 1900

Leaflet Maps - Création d'une carte interactive (L.control)

Leaflet Map - Control

Utilisation de la classe L.control pour créer une carte interactive

comments powered by Disqus