Untitled

<!DOCTYPE html>
<html>
	<head>
		<title>Carte matricielle</title>
		<meta charset="utf-8" />
		<!-- 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>
		<style>
			html, body {height: 100%; margin: 0;}
			#map { width: 100%; height: 100%; }
			.titre <h1> {
				font: 250px Helvetica;
				float: center;
			}
			.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'></div>
		<script>

			// Initialisation d'une carte avec plusieurs fonds de carte
			// Nous mettons l'adresse de l'API MapBox dans une variable 'mapboxUrl'. Nottez la variable {id} qui sera attribuée plus tard (ligne 39, 40, 41) pour chaque fond de carte. 'votre_clef' doit être remplacé par la clef que vous trouverez sur account.mapbox.com
			mapboxUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=votre_clef';
			// Création d'une variable dans laquelle nous mettons les informations d'attribution
			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>'
			// Création des trois fond de carte en réutilisant les variables précédemment céées
			var light = L.tileLayer(mapboxUrl, {id: 'mapbox/light-v10', attribution: mapboxAttribution});
			var	streets = L.tileLayer(mapboxUrl, {id: 'mapbox/streets-v11', attribution: mapboxAttribution});
			var	sat = L.tileLayer(mapboxUrl, {id: 'mapbox/satellite-v9', attribution: mapboxAttribution});
			// Création de l'objet cartographique nque l'on nomme 'map' et à qui l'on passe nos trois fonds de carte
			var map = L.map('map', {
				center: [45.52,-73.63],
				zoom: 13,
				layers: [sat, streets, light]
			});
			// création d'objet 'images géoréférencées'. L'image que nous utilisons, s'il s'agit d'une carte matricielle, doit être dans la projection que l'on utilise pour notre cartographie en ligne, c'est à dire Web Mercator (EPSG:3857) par défaut
			var c1 = 'data/mtRoyal.png',
			// Une liste contenant deux listes. La première contient la position du coin Sud-Ouest de notre carte matricielle à superposer, la seconde le coin Nord-Est
			limite_c1 = [[45.48956,-73.62192],[45.51921,-73.57408]];
			c1l = L.imageOverlay(c1, limite_c1)

			var c2 = 'data/lafontaine.png',
			limite_c2 = [[45.521229,-73.575849],[45.530658,-73.562472]];
			c2l = L.imageOverlay(c2, limite_c2, {interactive: true}).bindPopup('<h1>Parc Lafontaine</h1>')

			var c3 = 'data/laurier.png',
			limite_c3 = [[45.530143,-73.590992],[45.534140,-73.584588]];
			c3l = L.imageOverlay(c3, limite_c3, {interactive: true}).bindPopup('<h1>Parc Laurier</h1>')

			var c4 = 'data/jeanne_mance.png',
			limite_c4 = [[45.511902,-73.589586],[45.518309,-73.576995]];
			c4l = L.imageOverlay(c4, limite_c4, {interactive: true}).bindPopup('<h1>Parc Jeanne Mance</h1>');

			// Nous ajoutons nos cartes matricielles à notre carte générale
			c1l.addTo(map);
			c2l.addTo(map);
			c3l.addTo(map);
			c4l.addTo(map);

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