Untitled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<head>
			<title>Un titre</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>

			// Ajoût de la configuration de la connexion à la base de donnée en ligne Firebase.
			var firebaseConfig = {
				apiKey: "AIzaSyDeajsI7o0U-Mo4XVSBMtuoGCS_Nn939b8",
				authDomain: "leaflet-3f59a.firebaseapp.com",
				databaseURL: "https://leaflet-3f59a.firebaseio.com",
				projectId: "leaflet-3f59a",
				storageBucket: "leaflet-3f59a.appspot.com",
				messagingSenderId: "841635639220",
				appId: "1:841635639220:web:0985db6b3ef82a43904ce1"
			};
			// initialise Firebase
			firebase.initializeApp(firebaseConfig);
			var database = firebase.database();
			ref = database.ref('Leaflet');

			var point = {
						"type": "Feature",
						"properties": {
							"var": 2
						},
						"geometry": {
							"type": "Point",
							"coordinates": [
								-74.1796875,
								49.38237278700955
							]
						}
					}
			// Envoi de l'objet JSON (qui correspond aux spécifications GeoJSON dans ce cas particulier) vers la base de données FireBase :
			// ref.push(point);

			// 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
				};
			}

			function gotData (data) {
				var features = data.val();
				var keys = Object.keys(features);
				if (keys.length > 0) {
					// passe à travers toutes les entités de la base et les ajoute à la FeatureCollection :
					for (var i = 0; i < keys.length; i++) {
						console.log(features[keys[i]].geometry.type)
						// 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 errData (err) {
				console.log('Erreur',err);
			}

			// créer la carte
			var fondDeCarte = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZ29ucm8iLCJhIjoiY2szZzdhYzVwMDMxMjNkbjZodzA2ZG8wOSJ9.w_VkhpdmD-1pmMYcabUQwg')
			var maCarte = L.map('Carte', {
							center: [45.52,-73.63],
							zoom: 13,
							layers: fondDeCarte,
							zoomControl: false
						});
			maCarte.setView([0,0], 2);

			ref.on('value',gotData,errData);

			L.control.zoom({
			     position:'topright'
			}).addTo(maCarte);

			// Ajouter une échelle dynamique
			L.control.scale().addTo(maCarte);

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