Untitled

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Ma page</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
		<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
		<script   src="https://code.jquery.com/jquery-3.4.1.slim.min.js"   integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="   crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

		<script src="plugins/leaflet.ajax.min.js"></script>

		<script src="plugins/classybrew.js"></script>
		<style>
			html, body {height: 100%; margin: 0;}
			#carte { width: 100%; height: 100%; }
			.navbar-nav > li{
				padding-left:5px;
				padding-right:5px;
				padding-top:2px;
				padding-bottom:2px;
				}
			.info {
				padding: 6px 8px;
				font: 14px/16px Arial, Helvetica, sans-serif;
				background: rgba(255,255,255,0.8);
				box-shadow: 0 0 15px rgba(0,0,0,0.2);
				border-radius: 5px;
				} .info
			.legend {
				text-align: left;
				line-height: 18px;
				color: #555;
				}
			.legend i {
				width: 18px;
				height: 18px;
				float: left;
				margin-right:
				8px;
				opacity: 0.95;
				}
		</style>
	</head>
	<body>
	<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
		<a class="navbar-brand" href="#">
			<img src="logo.png" width="30" height="30" alt="">
		</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>

		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav mr-auto">

				<li class="nav-item">
					<select class="custom-select">
						<option value="0">Clair</option>
						<option value="3">Sombre</option>
						<option value="4">Topographie</option>
						<option selected value="1">Plan du réseau routier</option>
						<option value="2">Satellite</option>
					</select>
				</li>

				<li class="nav-item">
					<select class="custom-select">
						<option selected>Sélectionnez des données à afficher</option>
						<option value="Montreal_AD_v0743.geojson">Montréal</option>
						<option value="Canada_CSD_v0743.geojson">Canada</option>
					</select>
				</li>

				<li>
					<select class="custom-select">
						<option value="jenks">Ruptures naturelles (Jenks)</option>
						<option value="quantile">Quantilles</option>
						<option value="equal_interval">Intervals égaux</option>
					</select>
				</li>

				<li>
					<select class="custom-select">
						<option value="YlGn">YlGn</option>
						<option value="Reds">Reds</option>
						<option value="Greens">Greens</option>
						<option value="YlGnBu">YlGnBu</option>
						<option value="Greys">Greys</option>
						<option value="Blues">Blues</option>
						<option selected value="Spectral">Spectral</option>
						<option value="RdYlGn">RdYlGn</option>
					</select>
				</li>

			</ul>
		</div>
	</nav>
	<div class="container-fluid" id='carte'></div>

		<script>
			var poly;
			var classification = 'jenks';
			var palette = 'Spectral';
			var serie;

			// Initialisation d'une carte avec plusieurs fonds de carte
			mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=TOKEN';
			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}),
				dark = L.tileLayer(mapboxUrl, {id: 'mapbox/dark-v10', attribution: mapboxAttribution}),
				outdoor = L.tileLayer(mapboxUrl, {id: 'mapbox/outdoors-v11', attribution: mapboxAttribution}),
				sat = L.tileLayer(mapboxUrl, {id: 'mapbox/satellite-v9', attribution: mapboxAttribution});

			var map = L.map('carte', {
				center: [45.52,-73.63],
				zoom: 5,
				layers: streets,
				zoomControl: false
			});

			couches = [light,streets,sat,dark,outdoor]

			let base = document.querySelectorAll('select')[0];
			if (base) base.addEventListener('change', function(event) {
				map.removeLayer(light)
				map.removeLayer(dark)
				map.removeLayer(streets)
				map.removeLayer(outdoor)
				map.removeLayer(sat)
				map.addLayer(couches[event.target.value]);
			});

			let data = document.querySelectorAll('select')[1];
			if (data) data.addEventListener('change', function(event) {

				if (map.hasLayer(poly) == true) {
					map.removeLayer(poly);
				}

				poly = new L.GeoJSON.AJAX('data/' + event.target.value);
				poly.addTo(map);

				poly.on('data:loaded', function() {

					map.fitBounds(poly.getBounds());

					var donnees = poly.toGeoJSON();
					serie = [];
					for (let i = 0; i < donnees.features.length; i++) {
						serie.push(parseFloat(donnees.features[i].properties.var));
					};

					resetColourAndLegend(classification,palette,serie);
				})

				map.attributionControl.addAttribution('Données &copy; <a href="http://statisticscanada.ca/">Statistiques Canada</a>');

			});

			// détection des changement dans le menu "type de classification"
			let classif = document.querySelectorAll('select')[2];
			if (classif) classif.addEventListener('change', function(event) {
				classification = event.target.value;
				resetColourAndLegend(classification,palette,serie)
			});

			// détection des changement dans le menu "palette de couleurs"
			let pal = document.querySelectorAll('select')[3];
			if (pal) pal.addEventListener('change', function(event) {
				palette = event.target.value;
				resetColourAndLegend(classification,palette,serie)
			});

			function resetColourAndLegend(classification,palette,serie) {

				var brew = new classyBrew();
				brew.setSeries(serie);
				brew.setNumClasses(8);
				brew.setColorCode(palette);
				var classes = brew.classify(classification);

				poly.eachLayer(function (layer) {
					layer.setStyle({
										weight: .5,
										opacity: 1,
										color: 'grey',
										dashArray: '3',
										fillOpacity: 1,
										fillColor: brew.getColorInRange(layer.feature.properties['var'])
									})
					});

				try {
					map.removeControl(legend);
				}
				catch(err) {
					console.log(err)
				}
				legend = L.control({position: 'bottomright'});
				legend.onAdd = function (map) {
					var div = L.DomUtil.create('div', 'info legend');
					var	labels = [];
					for (var i = 0; i < classes.length - 1; i++) {
						labels.push('<i style="background:' + brew.getColorInRange((parseInt(classes[i]) + parseInt(classes[i + 1])) / 2) + '"></i>' + parseInt(classes[i]) + ' à ' + parseInt(classes[i + 1]) + " <br>");
					}
					div.innerHTML = '<b>Revenu médian en $</b><hr>' + labels.join('<br>');
					return div;
				};
			legend.addTo(map);
			}

		</script>
	</body>
</html>