Week 1 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>

		<!-- This is where we set the style for the different elements in the page's content -->
		<style>
			/* Everything in the style tag is CSS, comments look like this*/
				
			/* This is where we can set dimensions of the web page and remove any default margin and padding*/
			html, body {
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
			}
			
			/* This is where we can set the style of our map div using an id selector (#) */
			#map {
				width: 100%;
				height: 100%;
			}
			
			/* This is a class that I have made to style the text in the popup */
			.popuptext {
				
				/* centre the text */
				text-align: center;
				
				/* make the font larger */
				font-size: large;
			}
		</style>
	</head>
	<body>
		<!-- This is the BODY of the HTML file, things in here will appear on the page. It is 
		 used for page content as well as scripts that you want to load after the content 
		 of the page. --> 
	
		<!-- <div> (division) is a place holder in HTML, this is empty here, but is where the JavaScript will put the map later -->
		<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>
		
			// Everything in the script tag is JavaScript, comments look like this...
			/* ...or this */
					
			// this is a variable that holds the coordinates for our map and marker
			var map = L.map('map');

			// this is a variable that holds the values for the coordinates [latitude, longitude] of the centre of the map
			var mapCentre = [53.466502, -2.235387];

			// set the map to use the above coordinates, and to zoom level 16
			map.setView(mapCentre, 16);

			// this is a variable that holds a reference the tiles that will be used for the basemap
			var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'});

			//add the tiles to the map
			tiles.addTo(map);
			
			// create a marker at your chosen coordinates
			var marker = L.marker(mapCentre);
			
			// add the marker to the map
			marker.addTo(map);
			
			// add a popup to the marker and store it in a popup
			var popup = marker.bindPopup("<p class='popuptext'><b>Hello world!</b><br>This is Jonny's Office!</p>");
			
			// open the popup
			popup.openPopup();

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