Leaflet Map - Heat Map

Carte des tremblements de terre depuis 1900

Dernière mise à jour le 14/04/2020
leaflet1.6.0 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é.

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

Trafic du métro parisien avec Leaflet et D3JS

Trafic des stations du métro de Paris

Trafic entrant dans chaque station du métro parisien (Leaflet & D3JS)

Diagramme de Voronoi avec D3JS sur une carte Leaflet

Liste des aéroports français

Leaflet & D3JS & Voronoi

comments powered by Disqus