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/leaflet@1.6.0/dist/leaflet.css" />
		<script src="https://unpkg.com/leaflet@1.6.0/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>

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

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

		<script>
			var poly;

			// Initialisation d'une carte avec plusieurs fonds de carte
			mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ29ucm8iLCJhIjoiY2szZzdhYzVwMDMxMjNkbjZodzA2ZG8wOSJ9.w_VkhpdmD-1pmMYcabUQwg';
			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]);
			});

			// sélection des données GeoJSON
			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());
				})

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

			});

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