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.

Week 10 Solution

<!DOCTYPE html>
<html>
	<head>
		<!-- This is the HEAD of the HTML file, things in here do not appear on the page. It is 
		 used for settings, such as the language and page title, as well as loading CSS styles and 
		 scripts that you want to load before the content of the page. --> 
		<meta charset="UTF-8">
		<title>GIS and the Web</title>
		
		<!-- This is loading the stylesheet for the Leaflet map from their website. 
		 Make sure you put this BEFORE Leaflet's JavaScript -->
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>

		<!-- This is loading the Leaflet JavaScript library from their website
		 Make sure you put this AFTER Leaflet's CSS -->
		<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
		 
		<!-- Load Turf.js -->
		<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
		
		<!-- Load London Underground Dataset-->
		<script src="data/underground.js"></script>

		<!-- This is where we set the style for the different elements in the page's content -->
		<style>
			/* Style the map */
			#map {
				width:  800px;
				height: 500px;
			}
		</style>
	</head>
	
	<!-- The onload event of the body tag is being used to call the function that creates the map.
	 This means that nothing will happen until the body is completely loaded, giving us a little more
	 control over the order in which the web page loads. -->
	<body onload='initMap()'> 
	
		<!-- This is where the map will go -->
		<div id='map'></div>
		
		<!-- This is where we put our JavaScript, note that it is below the div, as the div needs
		 to exist before we can put a map in it!-->
		<script>		
			
			//setup global variables
			var map, geojson;
			
			/**
			 * Initialise the Map
			 */
			function initMap(){
			
				// this is a variable that holds the reference to the Leaflet map object
				// creates a world map (centre where the equator crosses the GPM)
				map = L.map('map').setView( [51.48728233102447, -0.11360004378767831], 12);

				// this adds the basemap tiles to the map
				L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
					attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
					maxZoom: 16
				}).addTo(map);
				
				// call a function to add the journeys to a map
				journeysToMap();
			}
			
			
			/**
			 * Load the journey lines onto the map, styling intelligently into 5 equal classes
			 */
			function journeysToMap() {
			
				// loop through each journey
				for (var i = 0, lines = []; i < journeys.length; i++) {
							
					// make a line and load into the array
					lines.push(turf.lineString([
						[ parseFloat(journeys[i]['startX']), parseFloat(journeys[i]['startY']) ], 
						[ parseFloat(journeys[i]['endX']),   parseFloat(journeys[i]['endY'])   ]
					]));
				}
				
				// compile into featurecollection and add to the map
				geojson = L.geoJson(turf.featureCollection(lines), { }).addTo(map);
			}
		</script>
	</body>
</html>

This course has not yet begun.
Course material will appear here week by week as the course progresses.