Untitled

<!DOCTYPE html>
<html>

	<head>


		<meta charset="utf-8" />

		<title>Carte choroplèthe de revenu après impôt médian des ménages en 2015</title>

		<!-- 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%; }

			.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' class="row"></div>


		<script>

//		var light = L.tileLayer(mapboxUrl, {id: 'mapbox/light-v10', attribution: mapboxAttribution}),
//		var fond = L. tileLayer
//
//			var fond = L.map('map').setView([53.52,-92.63], 5);
//			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,
//				layers: [light, fond]
//				// 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: 'gletarte/ck6p68ffj3nlw1ipfekx0126g',
//				// VOTRE_CLEF doit être copiée de account.mapbox.com
//				votre_clef: 'pk.eyJ1IjoiZ2xldGFydGUiLCJhIjoiY2s2OGsydnFwMDV1NTNrbXhhYjJseHc2MiJ9.JIPCgdoi-OHpMtsp80YGqg'
//


				// Initialisation d'une carte avec plusieurs fonds de plans
				mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ2xldGFydGUiLCJhIjoiY2s2OGsydnFwMDV1NTNrbXhhYjJseHc2MiJ9.JIPCgdoi-OHpMtsp80YGqg';
				mapboxAttribution = '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>'

				var light = L.tileLayer(mapboxUrl, {id: 'mapbox/light-v10', attribution: mapboxAttribution}),
					streets = L.tileLayer(mapboxUrl, {id: 'mapbox/streets-v11', attribution: mapboxAttribution}),
					sat = L.tileLayer(mapboxUrl, {id: 'mapbox/satellite-v9', attribution: mapboxAttribution}),
					gab = L.tileLayer(mapboxUrl, {id: 'gletarte/ck6p68ffj3nlw1ipfekx0126g', attribution: mapboxAttribution});

				var map = L.map('map', {
					center: [45.52,-73.63],
					zoom: 13,
					layers: [sat, streets, light]
				});

//				var baseMaps = {
//				"Rues": fond,
//				"Grayscale": light
//			};

			var baseMaps = {
				"light": light,
				"sat": sat,
				"gab": gab,
				"streets": streets
			};

			var couches = {
				"<b>Des parcs de Montréal</b>": polygone,

			}
			L.control.layers(baseMaps,couches).addTo(map);

			// 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'])
				};
			}


			// 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 > 13167 && v <= 31680) {c = '#a50026'}
				else if (v > 31680 && v <= 40021) {c = '#d73027'}
				else if (v > 40021 && v <= 46176) {c = '#f46d43'}
				else if (v > 46176 && v <= 51968) {c = '#fdae61'}
				else if (v > 51968 && v <= 58336) {c = '#fee08b'}
				else if (v > 58336 && v <= 65504) {c = '#d9ef8b'}
				else if (v > 65504 && v <= 74000) {c = '#a6d96a'}
				else if (v > 74000 && v <= 84992) {c = '#66bd63'}
				else if (v > 84992 && v <= 102518) {c = '#1a9850'}
				else if (v > 102518) {c = '#006837'};
				return c;
				}


			// 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 = [13167, 31680, 40021, 46176, 51968, 58336, 65504, 74000, 84992, 102518, 150016];
			var palette = ["#a50026", "#d73027", "#f46d43", "#fdae61", "#fee08b", "#d9ef8b", "#a6d96a", "#66bd63", "#1a9850", "#006837"];

			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>Revenu médian après impôt pour 2015</h4><hr>' + labels.join('<br>');
				return div;
			};
			// Ajout de la légende à la carte
			legend.addTo(map);


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

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

			// 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('Canada_CSD_v0743.geojson', {style: style_par_entite, onEachFeature: ajouter_interaction});
			poly.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.csdn + ' : <b>' + polygone.var + '$</b>'
					: '<em>Pointez une aire de diffusion</em>');
			};
			L.control.layers(baseMaps,couches).addTo(map);


		</script>
	</body>

</html>