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>
		<style>
			html, body {height: 100%; margin: 0;}
			#carte { width: 100%; height: 100%; }
		</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="40" height="40" 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>
				<select class="form-control" id="fonds">
				<option value="1">Streets</option>
				<option value="0">Light</option>
				<option value="2">Satellite</option>
				</select>
			</ul>
			<form class="form-inline my-2 my-lg-0">
				<input class="form-control mr-sm-2" type="search" placeholder="Recherche" aria-label="Search">
				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Recherche</button>
			</form>
		</div>
	</nav>
	<div class="container-fluid" id='carte'></div>

		<script>
			// Initialisation d'une carte avec plusieurs fonds de carte
			mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=VOTRETOKEN';
			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 dropdown = document.querySelector('select');
			if (dropdown) dropdown.addEventListener('change', function(event) {
				map.removeLayer(light)
				map.removeLayer(streets)
				map.removeLayer(sat)
				map.addLayer(couches[event.target.value]);
			});
		</script>
	</body>
</html>