<!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: '© <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>
This version of the course is several years out of date and parts of it will not work - it is here just for the benefit of my 2022 dissertation students who want some grounding in Leaflet and associated technologies.
This course has not yet begun.
Course material will appear here week by week as the course progresses.