Untitled

<!DOCTYPE html>
<html>
	<head>
		<title>Carte choroplèthe</title>
		<meta charset="utf-8" />
		<!-- Chargement de la bibliothèque de programmation Leafletjs.com -->
		<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
		<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
		<!-- 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="plugins/leaflet.ajax.min.js"></script>
		<style>
			html, body {height: 100%; margin: 0;}
			#map { width: 100%; height: 100%; }
			.titre <h1> {
				font: 250px Helvetica;
				float: center;
			}
			.legend {
				text-align: left;
				line-height: 18px;
				color: #555;
			}
			.legend i {
				font: 12px Helvetica;
				width: 18px;
				height: 18px;
				float: left;
				margin-right: 6px;
				opacity: 0.7;
			}
			.info {
				padding: 16px 16px;
				font: 14px Helvetica;
				background: white;
				background: rgba(255,255,255,0.8);
				box-shadow: 0 0 15px rgba(0,0,0,0.2);
				border-radius: 5px;
			}
			.info h4 {
			margin: 0 0 5px; color: #777;
			}
		</style>
	</head>
	<body>
		<div id='map'></div>
		<script>
			var map = L.map('map').setView([45.52,-73.63], 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'])
				};
			}

			var titre = L.control({position: 'topleft'});
			titre.onAdd = function (map) {
				// création d'un élément <div>
				var div = L.DomUtil.create('div', 'info titre');
				div.innerHTML = '<h1>Revenu après impôt médian des ménages en 2015</h1>';
				return div;
			};
			// Ajout du titre
			titre.addTo(map);

			var info = L.control({position: 'topleft'});
			info.onAdd = function (map) {
				this._div = L.DomUtil.create('div', 'info');
				this.update();
				return this._div;
			};
			info.update = function (polygone) {
				this._div.innerHTML = '<h4>Revenu après impôt médian des ménages en 2015</h4><hr>' +  (polygone ?
					'Aire de diffusion ' + polygone.da_number + ' : <b>' + polygone.var + '$</b>'
					: '<em>Pointez une aire de diffusion</em>');
			};
			info.addTo(map);

			function surligneEntite(e) {
				var layer = e.target;
				layer.setStyle({
					weight: 2,
					color: 'white',
					dashArray: '',
					fillOpacity: 0.5
				});
				info.update(layer.feature.properties);
			}
			function resetStyleEntite(e) {
				var layer = e.target;
				poly.resetStyle(layer);
				info.update();
			}
			function zoomSurEntite(e) {
				var layer = e.target;
				map.fitBounds(layer.getBounds());
			}

			// Fonction ajoutant des "listener" à la couche
			function ajouter_interaction(feature, layer) {
				layer.on({
					mouseover: surligneEntite,
					mouseout: resetStyleEntite,
					click: zoomSurEntite
				});
			}

			// 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', {style: style_par_entite, onEachFeature: ajouter_interaction});
			poly.addTo(map);
			// Ajout de la référence pour les données
			map.attributionControl.addAttribution('Données &copy; <a href="http://statisticscanada.ca/">Statistiques Canada</a>');

			// Création d'un élément d'interface 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(map);

			L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={votre_clef}', {
				// établir le niveau de zoom maximum
				maxZoom: 18,
				// 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',
				// VOTRE_CLEF doit être copiée de account.mapbox.com
				votre_clef: 'pk.eyJ1IjoiZ29ucm8iLCJhIjoiY2szZzdhYzVwMDMxMjNkbjZodzA2ZG8wOSJ9.w_VkhpdmD-1pmMYcabUQwg'
			}).addTo(map);
		</script>
	</body>
</html>