Maps - Leaflet Map - Heat Map

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.

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.

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.

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é.