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);

			// fonction faisant le lien entre une valeur et une couleur. Nous pouvons établir une palette avec http://colorbrewer2.org, mais la classification est ici à notre discrétion
			function couleur_par_valeur(v) {
				v = parseFloat(v);
				if (v > 0 && v <= 35008) {c = '#d53e4f'}
				else if (v > 35008 && v <= 44971) {c = '#f46d43'}
				else if (v > 44971 && v <= 55979) {c = '#fdae61'}
				else if (v > 55979 && v <= 71808) {c = '#fee08b'}
				else if (v > 71808 && v <= 93440) {c = '#e6f598'}
				else if (v > 93440 && v <= 129024) {c = '#abdda4'}
				else if (v > 129024 && v <= 186368) {c = '#66c2a5'}
				else if (v > 186368) {c = '#3288bd'};
				return c;
			}

			// Fonction attribuant un style à l'entité qu'on lui passe
			function style_par_entite(feature) {
				return {
					weight: .5,
					opacity: .5,
					color: 'white',
					dashArray: '3',

					fillOpacity: 0.9,
					fillColor: couleur_par_valeur(feature.properties.var)
				};
			}

			// Importation d'une couche GeoJSON grâce au plugin "leaflet-ajax"
			var poly = new L.GeoJSON.AJAX('Montreal_v0743.json', {style: style_par_entite});

			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>');

			// Ajoutons un emplacement pour la légende
			var legend = L.control({position: 'bottomright'});

			// Créons une palette une palette avec http://colorbrewer2.org, mais la classification est ici à notre discrétion
			var classes = [11440, 35008, 44971, 55979, 71808, 93440, 129024, 186368, 283904];
			var palette = ["#d53e4f", "#f46d43", "#fdae61", "#fee08b", "#e6f598", "#abdda4", "#66c2a5", "#3288bd"];

			legend.onAdd = function (map) {
				// création d'un élément <div>
				var div = L.DomUtil.create('div', 'info legend');
				var	labels = [];
				// itération à travers les classes et création des icones sous forme de code HTML
				for (var i = 0; i < classes.length - 1; i++) {
					labels.push('<i style="background:' + palette[i] + '"></i>' + classes[i] + ' $ à ' + classes[i + 1] + " $<br>");
				}
				// injection du code HTML dans la page
				div.innerHTML = '<h4>Valeur en dollars par année</h4><hr>' + labels.join('<br>');
				return div;
			};
			// Ajout de la légende à la carte
			legend.addTo(maCarte);
		</script>
	</body>
</html>