Untitled

<!DOCTYPE html>
<html>
	<head>
		<head>
			<title>Titre</title>
			<meta charset="UTF-8">
<!-- 			https://leafletjs.com/download.html -->
			<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
			<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<!-- 			AGRÉGATION ÉTAPE 1 : Ajoutons la bibliothèque SuperCluster qui nous permettra d'aglomérer nos points : https://github.com/mapbox/supercluster-->
			<script src="https://unpkg.com/[email protected]/dist/supercluster.min.js"></script>
			<style>
/*			On indique la taille de l'emplacement de la carte*/
				html, body {height: 100%; margin: 0;}
				#Carte { width: 100%; height: 100%; }
			</style>
	</head>
	<body>
		<div id='Carte'></div>
		<script>
			// créer la carte, remplacez VOTRE_TOKEN pour la clef que vous trouverez là : https://account.mapbox.com
			//var fondDeCarte = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=VOTRE_TOKEN');
			// décochez la ligne suivante si vous n'avez pas de compte MapBox
			var fondDeCarte = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
			var maCarte = L.map('Carte', {
							layers: fondDeCarte,
							zoomControl: true
						});
			maCarte.setView([0,0], 2);

			// Création d'une couche à ajouter à la carte
			var seismes = new L.layerGroup();

			// AGRÉGATION ÉTAPE 2 : Création d'un objet "cluster"
			var cluster = new Supercluster({
				radius: 40,
				maxZoom: 20,
				initial: function() {
					return {
						count: 0,
						sum: 0,
						min: Infinity,
						max: -Infinity
					};
				},
				map: function(properties) {
					return {
						count: 1,
						sum: Number(properties['mag']),
						min: Number(properties['mag']),
						max: Number(properties['mag'])
					};
				},
				reduce: function(accumulated, properties) {
					accumulated.sum += Math.round(properties.sum * 100) / 100;
					accumulated.count += properties.count;
					accumulated.min = Math.round(Math.min(accumulated.min, properties.min) * 100) / 100;
					accumulated.max = Math.round(Math.max(accumulated.max, properties.max) * 100) / 100;
					accumulated.avg = accumulated.sum / accumulated.count;
				}
			});

			// Création d'une fonction pour afficher un cercle par séisme
			function dessinerSeismes(data) {
				// nettoyer la couche seismes avant de dessiner les cercles à leur nouvelle position
				seismes.clearLayers()
				// dessiner les cercles
				for (var i = 0; i < data.length; i++) {
					// Si le point n'est pas agrégé (autrement dit, si il ne possède pas d'attribut 'avg')
					if (isNaN(data[i].properties.avg) == true) {
						// Récupération de plusieurs variables potentiellement intéressantes, telles que la magnitude du séisme, le moment où il est arrivé, etc.
						const {mag, place, time, url, type} = data[i].properties;
						const {coordinates} = data[i].geometry;
						// Conversion de la date en toutes lettre (et en Français)
						date = new Date(time)
						const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' };
						// Ajout du cercle
						seismes.addLayer(L.circleMarker([coordinates[1],coordinates[0]],{
							radius: mag * 2.0,
							stroke: false,
							opacity: 1,
							fillColor: 'red',
							fillOpacity: .95
						}).bindPopup("<h2>" + place + "</h2><h3>Séisme de magnitude " + mag + ", survenu le " + date.toLocaleDateString('fr-FR',options) + "</h3><a href=" + url + ">Plus d'informations</a>"));
					} else {
						// Récupération de la moyenne de la magnitude du séisme et du nombre de séismes aglomérés
						const {avg, count} = data[i].properties;
						const {coordinates} = data[i].geometry;
						seismes.addLayer(L.circleMarker([coordinates[1],coordinates[0]],{
							radius: data[i].properties.avg * 2.0,
							stroke: false,
							opacity: .95,
							fillColor: 'red',
							fillOpacity: .5
						}).bindPopup("<h2>Aggrégat de " + count + " séismes</h2><h3>Magnitude moyenne de " + Math.round(avg * 100)/100 + "</h3>"));
					}
					}
			}

			// téléchargement des données de l'API
			//const api_url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson';
			//const api_url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson';
			const api_url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

			// Création d'une fonction asynchrone, qui authorise "await" afin de télécharger les données sans bloquer le reste des processus de la carte
			async function recupererLesDonnees() {
				// Téléchargement des données à l'adresse api_url. Tant que le téléchargement (effectué avec la fonction "fetch") n'est pas terminé, la fonction attend. Toutefois, puisque nous avons créé la fonction recupererLesDonnees en spécifiant qu'elle est asynchrone, le reste de la page est toujours fonctionnel
				const response = await fetch(api_url)
				const data = await response.json();
				console.log('Nbr total de points :',data.features.length)
				// AGRÉGATION ÉTAPE 3 : appel du plugin d'agrégation et ajout des données
				cluster.load(data.features);
				updateClusters();

				// Ajoût d'une citation pour les données
				maCarte.attributionControl.addAttribution("données : USGS");
			}

			function updateClusters(repaint) {
				currentZoom = maCarte.getZoom(); //	Quel est le niveau de zoom actuel ?
				canvas = maCarte.getBounds(); // Quelle est la taille de la carte à l'écran ?'
				N = canvas._northEast.lat;
				S = canvas._southWest.lat;
				W = canvas._southWest.lng;
				E = canvas._northEast.lng;
				worldBounds = [W, S, E, N]; // Boite à l'intérieure de laquelle afficher les données

				// Récupérer les données agrégées sous forme de feature collection
				clusterData = cluster.getClusters(worldBounds, Math.floor(currentZoom))
				// affiche dans la console combien de point nous devons afficher après l'opération d'aglomération
				console.log('Nbr de points après aglomération :',clusterData.length)
				// Mettre à jour l'affichage
				dessinerSeismes(clusterData)
			}

			recupererLesDonnees();

			// Déclancher la fonction à chaque fois que la position de la "caméra" change
			maCarte.on('moveend', function(e) {
				updateClusters()
			});

			// appeler automatiquement la fonction recupererLesDonnees toutes les 10000ms
			//setInterval(recupererLesDonnees,10000);
			// ajouter la couche seismes nouvellement mise à jour à la carte
			maCarte.addLayer(seismes);

		</script>
	</body>
</html>