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,0], 2)
//			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
			polygones = {
				"type": "FeatureCollection",
				"features": [
					{
						"type": "Feature",
						"properties": {
							"cat": "A"
						},
						"geometry": {
							"type": "Polygon",
							"coordinates": [
								[
									[
										36.5625,
										64.47279382008166
									],
									[
										38.67187499999999,
										36.5978891330702
									],
									[
										80.5078125,
										56.36525013685606
									],
									[
										36.5625,
										64.47279382008166
									]
								]
							]
						}
					},
					{
						"type": "Feature",
						"properties": {
							"cat": "B"
						},
						"geometry": {
							"type": "Polygon",
							"coordinates": [
								[
									[
										-41.484375,
										38.272688535980976
									],
									[
										-45.3515625,
										19.642587534013032
									],
									[
										-8.7890625,
										33.43144133557529
									],
									[
										-26.3671875,
										56.17002298293205
									],
									[
										-41.484375,
										38.272688535980976
									]
								]
							]
						}
					},
					{
						"type": "Feature",
						"properties": {
							"cat": "C"
						},
						"geometry": {
							"type": "Polygon",
							"coordinates": [
								[
									[
										-92.8125,
										56.17002298293205
									],
									[
										-104.4140625,
										52.482780222078226
									],
									[
										-99.84374999999999,
										45.583289756006316
									],
									[
										-91.40625,
										47.517200697839414
									],
									[
										-92.8125,
										43.068887774169625
									],
									[
										-103.0078125,
										39.36827914916011
									],
									[
										-93.515625,
										32.54681317351517
									],
									[
										-81.9140625,
										47.754097979680026
									],
									[
										-92.8125,
										56.17002298293205
									]
								]
							]
						}
					}
				]
			}

			// J'ajoute les données GeoJSON à la carte
			couche = L.geoJSON(polygones, {
				style: function(feature) {
					if (feature.properties.cat === 'A') {
						return {color: "#D43E4C", "weight": 1, "fillOpacity": .75}
					}
					else if (feature.properties.cat === 'B') {
						return {color: "#6A8859", "dashArray": 10}
					}
					else if (feature.properties.cat === 'C') {
						return {color: "#7294B8", "dashArray": 3}
					}
				}
			})

			couche.addTo(maCarte)

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