Leaflet - Heat Map

Carte des tremblements de terre depuis 1900

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

Introduction

Cette carte représente tous les tremblements de terre de magnitude supérieur à 6 entre 1900 et 2014. Elle nécessite la librairie Leaflet-heat que vous pouvez récupérer sur le site du développeur ou directement sur notre site : leaflet-heat.js. Cette librairie permet de réaliser une carte de chaleur allant du bleu pour le plus froid au rouge pour le plus chaud. De manière générale la couleur représente l'intensité de la données que l'on souhaite représenter. Ici, plus c'est rouge plus la magnitude du tremblement de terre est importante ou plus il y a de tremblements de terre dans la zone. Les données utilisées proviennent du site http://earthquake.usgs.gov. Le fichier utilisé pour notre exemple est from1901to2014.json qui comporte 8500 tremblements de terre. N'hésitez pas à zoomer pour voir les zones se redessiner.

Autre utilisation de ces données

Info: Une autre visualisation plus dynamique est disponible sur notre site pour ces mêmes données.

Construction de la carte

var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
	attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});

var map = L.map("heatmap").setView([40.90296, 1.90925], 2);
map.addLayer(Esri_WorldImagery);

d3.json('maps/leaflet-heatmap/from1901to2014.json', function(eqs) {
	var heatMapData = [];
	eqs.features.forEach(function(d) {
		heatMapData.push(new L.latLng(
			+d.geometry.coordinates[1], 
			+d.geometry.coordinates[0],
			+d.properties.title.substring(2, 5) / 10));
	});

	var heatLayer = L.heatLayer(heatMapData, {maxZoom: 12});
	map.addLayer(heatLayer);
});

C'est tout le code qu'il vous faudra pour générer une heatmap. Après avoir crée le layer on l'ajoute à notre carte pour ensuite charger le fichier geoJSON. Pour chaque enregistrement de ce fichier on crée un objet L.LatLng à partir de la latitude, de la longitude et de la magnitude du tremblement de terre. Notez que la magnitude est divisée par 10 pour obtenir un nombre compris entre 0 et 1 (l'intensité maximale étant 1 par défaut). Il peut paraître étonnant de passer ce 3e argument à l'objet L.LatLng mais il correspond en fait à l'altitude et le plugin s'en sert comme intensité. L'ensemble est ajouté dans un tableau qui nous sert à construire le layer L.heatLayer. Ce layer est ensuite ajouté à notre carte.

Une option importante

Info: Le constructeur du Layer prend en second argument une liste d'options. La seule que nous utilisons est la plus importante, elle détermine le niveau de zoom auquel les différents points atteignent leur maximum d'intensité. Il convient donc de faire quelques tests en faisant varier cette valeur pour obtenir celle qui sera la plus pertinente. Les autres options que l'on retrouve sur le site du développeur permettent de varier l'opacité, l'intensité maximale, le flou ou de modifier le gradient.

Question de fond

Le problème avec les jolis fonds de carte c'est qu'ils peuvent masquer une information importante. Il nous suffit de prendre un fond de carte neutre pour voir apparaître les plaques tectoniques qui supportent les continents. On se rend alors compte que les plus grandes intensités se produisent prêt des volcans et que les failles et dorsales sont également parcourus de tremblements de terre.

Plaques tectoniques

Les heatmap permettent d'obtenir des visualisations percutantes. Elles possèdent aussi l'avantage d'effectuer un regroupement fin, localisé (contrairement aux groupements de markers) et dont le découpage varie finement avec le zoom. Comme nous venons de le voir, il faut par contre penser à choisir un fond de carte adapté.

A suivre : Leaftlet - L.control Voir le tutoriel

comments powered by Disqus