Week 8 Solution

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
 		<title>GIS and the Web</title>

 		<!-- Load the CSS and JavaScript for Leaflet -->
 		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
 		<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

		<!-- Load Firebase -->
	  <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
	  <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-auth.js"></script>
	  <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-database.js"></script>

		<style>

			/* set page to full size */
			html, body {
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
			}

			/* set map to full page */
			#map {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<!-- Set onload callback for page to create the map -->
	<body onload='initMap()'>

		<!-- div to hold the map -->
		<div id='map'></div>

		<script>

			// setup global variables
			let map, myDb;

			/**
			 * Initialise the Map
			 */
			function initMap(){

				// before we do anything, lets initialise the database
				initDb();

				// this is a variable that holds the reference to the Leaflet map object
				map = L.map('map').setView([53.4807593, -2.2426305], 13);

				// this adds the basemap tiles to the map
				L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
				}).addTo(map);

				// set map click event
				map.on('click', function(e) {

					// create a geojson point
					const geojson = L.marker(e.latlng).toGeoJSON();

					// push the data into the database, set inline callback
					myDb.push(geojson, function(error) {

						//if no error is returned to the callback, then it was loaded successfully
						if (!error) {
							console.log("successfully added to firebase!");

						// otherwise pass the error to the console
						} else {
							console.error(error);
						}
					});
				});
			}


			/**
			 * Initialise the database into the global myDb variable
			 */
			function initDb() {

				// set the config object for firebase (get this from the Firebase Console)
				const firebaseConfig = {
					apiKey: "AIzaSyBdjTDczqtmdsWBxBVhGU1vspSpYQksV_c",
					authDomain: "gis-web-2019.firebaseapp.com",
					databaseURL: "https://gis-web-2019.firebaseio.com",
					projectId: "gis-web-2019",
					storageBucket: "gis-web-2019.appspot.com",
					messagingSenderId: "951534013046",
					appId: "1:951534013046:web:dcd5781c7acbcbee7bad57"
				};

				// initialise the firebase object
				firebase.initializeApp(firebaseConfig);

				// sign in to firebase anonymously
				firebase.auth().signInAnonymously().catch(function(error) {
					console.log(error.code);
					console.log(error.message);
				});

				// create a global reference to your 'clicks' database
				myDb = firebase.database().ref().child('clicks');

				// listener for when a location is added to the database - add it to the map as well
				// this is called for everything in the database when the page loads, THEN for each new one
				myDb.on('child_added', function(snapshot) {

					// get the click location from firebase
					const newfeature = snapshot.val();

					// add the point to the map (remembering to flip the coordinates)
					const marker = L.marker(
						[ newfeature.geometry.coordinates[1], newfeature.geometry.coordinates[0] ],
						{ draggable: true }
					).addTo(map);

 					// add a click listener to the array to delete markers
					marker.on('click', function(e) {

						// prevent the click event from being fired on the map as well
						L.DomEvent.stopPropagation;

  					// prepare the data to update in the database (deleting is done by updating to null)
  					let updates = {};
  					updates['/clicks/' + snapshot.key] = null;

  					// update the point location in the database and callback to console
  					firebase.database().ref().update(updates, function(error) {
						if (!error) {
							console.log("successfully deleted point!");

							// remove the marker from the map
					  	e.target.remove();

						} else {
						  console.error(error);
						}
				  	});
					});

  				// add a drag end listener to the array to update location
					marker.on('dragend', function(e) {

  					// prepare the data to update in the database
  					let updates = {};
  					updates['/clicks/' + snapshot.key] = e.target.toGeoJSON();

  					// update the point location in the database and callback to console
  					firebase.database().ref().update(updates, function(error) {
						if (!error) {
						  console.log("successfully updated firebase!");
						} else {
						  console.error(error);
						}
				  	});
					});
				});
			}
		</script>
	</body>
</html>