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" />
			<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();

			// Création d'une fonction pour afficher un cercle par séisme
			function dessinerSeismes(data) {
				console.log(data);
				// nettoyer la couche seismes avant de dessiner les cercles à leur nouvelle position
				seismes.clearLayers()
				// dessiner les cercles
				for (var i = 0; i < data.features.length; i++) {
					seismes.addLayer(L.circleMarker([data.features[i].geometry.coordinates[1],data.features[i].geometry.coordinates[0]],{
						radius: data.features[i].properties.mag * 2.0,
						stroke: false,
						opacity: 1,
						fillColor: 'red',
						fillOpacity: .95
					}));
				}
			}

			// téléchargement des données de l'API
			const api_url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.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();
				// Ajoût d'une pour les données
				maCarte.attributionControl.addAttribution("données : USGS");
				// Invocation d'une fonction pour dessiner les points des séismes
				dessinerSeismes(data);
			}
			recupererLesDonnees();
			// ajouter la couche seismes nouvellement mise à jour à la carte
			maCarte.addLayer(seismes);

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