Untitled

<!DOCTYPE html>
<html>
	<head>
		<title>Un titre</title>
		<meta charset="UTF-8">
		<!-- Téléchargement de la bibliothèque Leaflet.js -->
		<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<!--		Importation du plugin Leaflet.ajax-->
		<script src='plugins/leaflet.ajax.min.js'></script>
		<!-- Téléchargement des instructions CSS de Leaflet, qui serviront à styliser les éléments de l'interface de la carte -->
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />

<!--		Ajout d'information de style pour la page entière et le DIV ID='Carte'-->
		<style>
			html, body {height: 100%; margin: 0;}
			#Carte {width: 100%; height: 100%;}
		</style>
	</head>
	<body>
		<!--		Création d'un <div> qui contiendra notre carte-->
		<div id='Carte'></div>

		<!--		Début du script JavaScript-->
		<script>
//			Création d'une variable "maCarte" qui contiendra... ma carte.
			maCarte = L.map('Carte')
//			On donne une position lat lng et un niveau de zoom par défaut
			maCarte.setView([45.5,-73.5], 10)
//			On définit notre fond de carte qui téléchargera les tuiles avec l'API Mapbox, vous devez d'abord aller chercher "VOTRE_CLÉ" sur https://account.mapbox.com
 			fondDeCarte = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=VOTRE_TOKEN')
//			J'attache ce fond de plan à ma carte
			fondDeCarte.addTo(maCarte)

//			Utilisation du plugin Leaflet.ajax pour importer un fichier json externe de manière asynchrone
			couche = new L.GeoJSON.AJAX('data/Montreal_v0743.geojson')
			couche.addTo(maCarte)

//			Ajout de la référence pour les données
			maCarte.attributionControl.addAttribution('Fond de plan OSM & MapBox. Données &copy; <a href="http://statisticscanada.ca/">Statistiques Canada</a>');
		</script>
	</body>
</html>