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" />
			<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>
			<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
			<style>
				html, body {height: 100%; margin: 0;}
				#Carte { width: 100%; height: 100%; }
			</style>
		</head>
	</head>
	<style>
		html, body {height: 100%; margin: 0;}
		#Carte { width: 100%; height: 100%; }
	</style>
	<body>

		<div class="container">

			<h1>Générateur de cartographie abstraite</h1>
			<hr>
			<form>
				<select class="form-control" id="creer">
				<option value="point">Un marqueur</option>
				<option value="cercle">Un cercle</option>
				<option value="polyligne">Une polyligne</option>
				</select>
				<br>
				<input id="colour" value="Orange"></input>
				<br>
				<br>
				<button id="envoyer" type="button" class="btn btn-primary">Envoyer</button>
			</form>
			<br>
			<p id="reponse"><p>
		</div>

		<script>

			var btnSubmit = document.getElementById("envoyer");
			var inputCreer = document.getElementById("creer");
			var colour = document.getElementById("colour");
			var reponse = document.getElementById("reponse")


			// 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"
			};
			// initialise Firebase
			firebase.initializeApp(firebaseConfig);
			var database = firebase.database();
			ref = database.ref('Atelier4');

			function makePoint(ref,couleur) {

				var value = Math.random()*100;
				var lat = Math.random()*180-90;
				var lng = Math.random()*360-180;
				console.log(lng,lat,couleur)

				var point = {
							"type": "Feature",
							"properties": {
								"var": value,
								"colour": couleur
							},
							"geometry": {
								"type": "Point",
								"coordinates": [lng,lat]
							}
						}

				ref.push(point);
				return {lat,lng,value}
			}

			function makeCircle(ref,couleur) {
				var ray = 100000 + Math.random() * 500000;
				var lat = Math.random()*180-90;
				var lng = Math.random()*360-180;
				var cercle = {
							"type": "Feature",
							"properties": {
								"var": ray,
								"couleur": couleur
							},
							"geometry": {
								"type": "Circle",
								"coordinates": [lat,lng]
							}
						}

				console.log(cercle)
				ref.push(cercle);
				return {lat,lng,ray};
			}

			function makeLine(ref,couleur) {
				var coord = [];
				var n = parseInt(Math.random()*5+2);
				var value = Math.random()*100;

				for (var i = 0; i <= n; i++) {
					var lat = Math.random()*180-90;
					var lng = Math.random()*360-180;
					coord.push([lng,lat]);
				}

				var line = {
							"type": "Feature",
							"properties": {
								"var": 2,
								"couleur": couleur
							},
							"geometry": {
								"type": "LineString",
								"coordinates": coord
							}
						}

				console.log(line,couleur)
				ref.push(line);
				return {value}
			}

			btnSubmit.addEventListener("click", function (e) {
				var quoiCreer = inputCreer.value;
				var color = colour.value;
				if (quoiCreer == 'point') {
					makePoint(ref,color);
					reponse.innerHTML = 'Je viens de créer un marqueur à une position aléatoire !';
				}
				else if (quoiCreer == 'polyligne') {
					makeLine(ref,color);
					reponse.innerHTML = 'Je viens de créer une ligne aléatoire de couleur ' + color + '';
				}
				else if (quoiCreer == 'cercle') {
					info = makeCircle(ref,color);
					reponse.innerHTML = 'Je viens de créer un cercle de rayon ' + info.ray + '!';
				}
			});

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