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>
		<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;
			}
		</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 active">
					<a class="nav-link" href="index.html">Carte <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="formulaire.html">Formulaire</a>
				</li>

				<li class="nav-item">
					<select class="custom-select">
						<option value="0">Light</option>
						<option selected value="1">Streets</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=VOTRE_CLEF';
			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});

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

			couches = [light,streets,sat]

			let base = document.querySelectorAll('select')[0];
			if (base) base.addEventListener('change', function(event) {
				map.removeLayer(light)
				map.removeLayer(streets)
				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());
				})

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

			});

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