Untitled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<head>
			<title>Une carte editable par les utilisateurs/trices</title>
			<meta charset="UTF-8">
			<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
			<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<!-- 			Les bibliothèques de Firebase -->
			<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
			<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-auth.js"></script>
			<script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-database.js"></script>
			<style>
				html, body {height: 100%; margin: 0;}
				#Carte { width: 100%; height: 100%; }
			</style>
		</head>
	</head>
	<body>
		<div id='Carte'></div>
		<script>
			// créer la carte, remplacez VOTRE_TOKEN pour la clef que vous trouverez là : https://account.mapbox.com
			//var fondDeCarte = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/{z}/{x}/{y}?access_token=VOTRE_TOKEN');
			// décochez la ligne suivante si vous n'avez pas de compte MapBox
			var fondDeCarte = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
			var maCarte = L.map('Carte', {
							center: [45.52,-73.63],
							zoom: 13,
							layers: fondDeCarte,
							zoomControl: false
						});
			maCarte.setView([0,0], 2);

//			L.geoJSON({"type": "Feature","geometry": {"type": "Point","coordinates": [74,58]}}).addTo(maCarte);

			// Ajoût de la configuration de la connexion à la base de donnée en ligne Firebase.
			var firebaseConfig = {
				apiKey: "AIzaSyA36m1RLJb2eppWVTVhaXINYay9-Tp_7Ek",
				authDomain: "atelier3-1e7e2.firebaseapp.com",
				databaseURL: "https://atelier3-1e7e2.firebaseio.com",
				projectId: "atelier3-1e7e2",
				storageBucket: "atelier3-1e7e2.appspot.com",
				messagingSenderId: "565440140120",
				appId: "1:565440140120:web:a734a2aa00f9909ed10b2d"
			};
			// initialisez la base de données Firebase
			firebase.initializeApp(firebaseConfig);
			var database = firebase.database();
			ref = database.ref('Atelier4');

			// Première fonction importante : push(), pour envoyer des données (qui doivent être formnatés JSON) vers la base de données FireBase :
			//ref.push(
				//{a: 'a', b: 1254} // JSON
				//{"type": "Feature","properties": {},"geometry": {"type": "Point","coordinates": [Math.random()*360-180,Math.random()*180-90]}}); // GeoJSON

			// Fonction attribuant un style à l'entité qu'on lui passe
			function style(feature) {
				return {
					weight: 2,
					opacity: .9,
					color: feature.properties.couleur,
					dashArray: '3',

					fillOpacity: 0.9,
					fillColor: feature.properties.couleur
				};
			}

			// Deuxième fonction importante : on(), pour récupérer les données de la base de données FireBase dès que celle-ci change :
			ref.on('value',function (data) {
				var features = data.val();
				var keys = Object.keys(features);
				if (keys.length > 0) {
					// passe à travers toutes les entités de la base :
					for (var i = 0; i < keys.length; i++) {
						//console.log(features[keys[i]])
						// Puisque les cercles et ellipses ne font pas partie des spécifications GeoJSON, nous l'ajoutons cette option par l'intermédiaire d'un test de condition
						// cette condition signifie que "si le type de géométrie est 'Circle'", alors court-circuiter la fonction GeoJSON de Leaflet et dessiner un cercle d'une autre manière
						if (features[keys[i]].geometry.type == 'Circle') {
							L.circle(features[keys[i]].geometry.coordinates,{color: features[keys[i]].properties.couleur, radius: features[keys[i]].properties.var}).addTo(maCarte)
						}
						// si l'entité n'est pas un cercle, alors la visualiser selon les standards GeoJSON
						else {
							L.geoJSON(features[keys[i]],{style: style}).addTo(maCarte);
						}
					}
				}
			}, function(error) {
				console.error(error);
			});
		</script>
	</body>
</html>