<!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 -->
<!-- Load CSS for Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/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.5.1/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
const map = L.map('map');
// this is a variable that holds the values for the coordinates [latitude, longitude] of the centre of the map
const 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
const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© <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
const 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
const 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>
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.