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>
		<!-- 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" />

		<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,-73], 5)
//			On définit notre fond de carte qui téléchargera les tuiles avec l'API OSM
 			fondDeCarte = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png')
//			J'attache ce fond de plan à ma carte
			fondDeCarte.addTo(maCarte)

//			Je mets des données spatiales dans un objet JS
			points = {
				"type": "FeatureCollection",
				"features": [
					{
						"type": "Feature",
						"properties": {},
						"geometry": {
							"type": "Point",
							"coordinates": [
								49.21875,
								65.21989393613207
							]
						}
					},
					{
						"type": "Feature",
						"properties": {},
						"geometry": {
							"type": "Point",
							"coordinates": [
								14.0625,
								13.581920900545844
							]
						}
					},
					{
						"type": "Feature",
						"properties": {},
						"geometry": {
							"type": "Point",
							"coordinates": [
								-76.2890625,
								50.51342652633956
							]
						}
					},
					{
						"type": "Feature",
						"properties": {},
						"geometry": {
							"type": "Polygon",
							"coordinates": [
								[
									[
										-45.703125,
										54.367758524068385
									],
									[
										-1.7578125,
										29.53522956294847
									],
									[
										26.71875,
										61.938950426660604
									],
									[
										-45.703125,
										54.367758524068385
									]
								]
							]
						}
					}
				]
			}

			// J'ajoute les données GeoJSON à la carte
			couche = L.geoJSON(points)
			couche.addTo(maCarte)

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