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"/>
		<!-- Chargement d'un plugin installé localement (qui nous sera utile pour charger des GeoJSON), télécharger ici : https://github.com/calvinmetcalf/leaflet-ajax et à copier dans un dossier 'plugins'  créé pour l'occasion dans le même dossier que votre fichier index.html -->
		<script src="leaflet.ajax.min.js"></script>
		<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);

			// Importation d'une couche GeoJSON grâce au plugin "leaflet-ajax"
			// Utilisation de onEachFeature pour attribuer une fonction à chaque entité : https://leafletjs.com/reference-1.6.0.html#geojson-oneachfeature
			var poly = new L.GeoJSON.AJAX('Montreal_v0743.json');
			poly.addTo(maCarte);
			// Ajout de la référence pour les données
			maCarte.attributionControl.addAttribution('Données &copy; <a href="http://statisticscanada.ca/">Statistiques Canada</a>');
		</script>
	</body>
</html>