Untitled

<!DOCTYPE html>
<html>
	<head>
		<title>Carte choroplèthe</title>
		<meta charset="utf-8" />
		<!-- Chargement de la bibliothèque de programmation Leafletjs.com -->
		<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
		<style>
			html, body {height: 100%; margin: 0;}
			#DivCarte { width: 100%; height: 100%; }
		</style>
	</head>
	<body>
<!-- 		Créons un emplacement (<div> en HTML) où résidera notre carte -->
		<div id='DivCarte'></div>
		<script>
			// Tout est en JavaScript à l'intérieur de cette balise !
			// Création de la carte Leaflet que l'on nomme "maCarte". Lorsque nous avons initialisé la bibliothèque de programmation Leaflet, "L" a été automatiquement défini comme étant un objet de la bibliothèque cartographique de Leaflet. ".map" est une des nombreuses fonction de cette bibliothèque (https://leafletjs.com/reference-1.6.0.html#map-l-map). Cette fonction requiert une information sur l'emplacement, dans le code HTML, où nous souhaitons voir apparaître la carte (son <div>)
			var maCarte = L.map('DivCarte');
			// Avec "L.tileLayer", nous créons un objet contenant un fond de carte. En l'occurence, un fond de carte sous forme de tuiles ("tiles") en utilisant l'API de MapBox (qui nécéssite de s'inscrire à www.mapbox.com).
			// Dans la ligne ci-dessousm remplacez VOTRE_CLEF par l'"Access Token" que vous créerez ici : https://account.mapbox.com
			var fondDeCarte = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=VOTRE_CLEF', {
							// afficher les référence de la carte. Dans ce cas, nous utilisons l'API MapBox pour afficher une carte issue des données produites par les contributeurs/trices d'Open Street Map
							attribution: 'Fond de carte &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
								'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
								'via © <a href="https://www.mapbox.com/">Mapbox</a>',
							// Choisir le style de carte. pour utiliser un style personnalisé : 'nom_utilisateur/clef_du_style' à récupérer ici : studio.mapbox.com
							id: 'mapbox/light-v10'
						}
			);
			// On attache le fond de carte créé plus haut à notre objet "maCarte"
			maCarte.addLayer(fondDeCarte);
			// On indique le placement par défaut de la vue de l'objet "maCarte"
			maCarte.setView([45.523,-73.620], 11);
		</script>
	</body>
</html>