1. Introduction to the Web


A quick note about the practicals...

Remember to use Mozilla Firefox to do these practicals. Please do NOT use Microsoft Internet Explorer / Edge, this is not suitable for web development. Coding should be done in Notepad++

You do not have to run every bit of code in this document. Read through it, and have a go where you feel it would help your understanding. If I explicitly want you to do something, I will write an instruction that looks like this:

This is an instruction that tells you something to either think about, or do.

Shortcuts: Part 1 Part 2


In which we get to grips with Leaflet Maps, learn how to make a web page and even make our first Map with JavaScript!

Part 1

Anatomy of a Web Page

Throughout this course, we will be learning to make Web Maps using JavaScript. Specifically, we will be using a JavaScript library called Leaflet. Libraries in JavaScript are effectively pre-written functionality, allowing us to easily do things that would otherwise require us to write thousands of lines of code and probably have a lot of specialist knowledge. In the case of Leaflet, we are given the ability to make ‘slippy maps’, which can load in tiles from a server, allow us to add data to them, and so on. This is one of several libraries that you will become familiar with throughout the course, and you will use it every single week.

To illustrate what we are talking about, here is a simple Leaflet map, using tiles from OpenStreetMap:

In the first half of this session we are going to start by setting up a web page into which we can add a Leaflet Map. To be abe to do this, we need to understand how HTML works. Here is the bare minimum HTML for a website (complete with descriptions of what each line does):

<!DOCTYPE html>
<!-- This tag is not HTML (though it looks a lot like one), it just tells the browser to expect 
	an HTML5 document. You can use this, for example, to tell the browser that you would rather 
	that it interpreted the page according to a different standard (e.g. an older version such as 
	HTML 4) -->

<html>
	<!-- The HTML tag tells the browser that everything inside shouls be interpreted as 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. -->
		 
		<!-- This tells the browser what character set to use -->
		<meta charset="UTF-8">
		
		<!-- This is the title of the page, which appears in the tab at the top of the screen -->
		<title>GIS and the Web</title>
		
	</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. -->
		
	</body>
</html>

Open Notepad++, copy the above code into a new file and save it as blank.html. Now open the file in Firefox, what does it look like?

Now we have a working (if rather dull…) web page, let’s add some content.

Add the following to the body section of the page in Notepad++ and refresh it in Firefox. How does that look now?

<h1>Hello World!</h1>

See, it’s not that hard is it?

Before we go any further, it is worth taking a second to understand that this is (in simple terms) all that a web page is, every page is just made up of HTML elements like <h1>! Before we go any further, let’s have a closer look at HTML to make sure that we understand how it works…

Introduction to HTML

There are many technologies involved in the web, some of which you will learn about in this course. The most fundamental, however, is HTML - without this, there could be no web pages. HTML stands for Hyper-Text Markup Language, and is used to define the content of a web page. It was developed by British physicist Tim Berners-Lee in the late 1980’s as a way for scientists to share information over the Internet (please note the difference between the web and the internet: they are not the same thing!).

What is the relationship between the web and the internet? If you don’t know, Google it!

HTML is a markup language. Traditionally, the word markup was used by book and journal editors who “marked up” manuscripts when giving feedback to authors for revisions. In the context of HTML, the markup refers to specific syntax that instructs a web browser how to display a page.

Tags and Elements

HTML separates content (words, images, etc.) from style (colours, fonts etc.) and uses a pre-defined set of elements in order to define content types. Elements contain one or more tags that contain or express content. Tags are enclosed by angle brackets (< >), and the closing tag begins with a forward slash (</ >). Here is an illustration using the <p> tag, which represents a paragraph element and is used to define text content:

Illustration of HTML Tags

What do you think the closing tag for <strong> looks like?

Here is another example of the <p> tag in use:

 <p>I love HTML.</p>

Try to add a paragraph element to your web page. (Remember that all content needs to go in the body section)

Tags can be nested inside each other as well. The emphasis tag <em>, for example, can be used inside the paragraph tag:

 <p>I <em>love</em> HTML.</p>

which, on the web page would look like:

I love HTML.

Attributes

Some elements contain attributes as well as content. Attributes are additional information contained within a start tag, and normally consist of 2 parts:

  • An attribute Name
  • An attribute Value

Two of the most important attributes in tags are class and id. Though they do not directly affect the appearance of the element, but as these are used by CSS and JavaScript to access the elements on your web page. Here they are in use:

 <p class="myClass" id="myID">I <em>love</em> HTML.</p>

You can set these values to anything you want, as they are only used to refer to those elements in your code, and not by the browser directly. The difference between them is that ids must be unique for each element, whereas multiple elements can have the same class. This means that you have the ability to access individual elements from your CSS and JavaScript (using id), or to access them in groups (using class). We will discuss these attributes in more detail in the CSS part of this practical.

Add a class and an id attribute to some of the elements in the body of your web page.

Comments in HTML

There is one other major thing you need to understand in HTML: Comments. They are useful for explaining a section of markup, leaving notes for other people who might work on the page, or for leaving reminders for yourself. As you can see in your file, I have already provided some comments for you in order to explain what each tag is for. HTML comments are enclosed in <!-- --> tags, like this:

 <!-- This is a comment -->

Anything within the <!-- --> tags will be ignored by the browser and will not be rendered onto the screen. For example, this code:

 <!-- This is where I communicate my feelings about HTML -->
 <p class="myClass" id="myID">I <em>love</em> HTML.</p>

will still appear like this on the web page:

I love HTML.

It is well worth commenting everything that you do when you are programming, but is particularly important for your assessments (if you do not comment, you can’t get full marks, as I cannot demonstrate that you fully understand what you have done), so I want you to get into the habit of commenting every line of your code, irrespective of how simple or obvious it is.

Add some comments to your code

There is a whole world of HTML out there, and there are ample resources on the web making it slightly redundant for me to copy them all out here. A good source of information is the excellent W3Schools website, which has a comprehensive list of all of tht types of HTML elements, including <ul> (bullet points), <ol> (numbered list), <a> (link), table and so on.

Have a look at some of the basic options available and add at least two aditional elements to your website

Introduction to Cascading Style Sheets (CSS)

We have already learned that website content is described by HTML, whereas the style of the website (how it looks) is described by CSS. CSS code goes within <style> </style> tags inside the <head> of the HTML document.

Like HTML, CSS is not really a programming language. It is a style sheet language, that is, it lets you apply styles selectively to elements in HTML documents. For example, to select all the paragraph elements <p> on an HTML page and turn the text within them red, you would write this CSS:

<style>
	 p {
	  color: red;
	}
</style>

(I have included the <style> tags in this first example to illustrate where it goes, I will leave them out in all future examples).

Above is a CSS Rule, comprising a selector (p) followed by some curly braces ({...}) that contain a declaration, which in turn is made up of a property and a property value in the form: property: value; (color: red;). This is illustrated below:

CSS Rule

In a nutshell:

Selector: The HTML element name at the start of the rule set. It selects the element(s) to be styled (in this case, p elements). To style a different element, just change the selector. (e.g. p)
Declaration: A single rule comprised of a property and a value; specifying which of the element’s properties you want to style. (e.g. color: red;)
Property Ways in which you can style a given HTML element. (In this case, color is a property of the p elements.) In CSS, you choose which properties you want to affect in your rule. (e.g. color:)
Property Value To the right of the property, after the colon, we have the property value, to choose one out of many possible appearances for a given property (there are many colour values besides red). (e.g. red;)

The above example, therefore, sets the color of the p elements to red. Simple!

NOTE: the US spelling on color - this is a standard used by almost all programming languages, and is a common source of errors!

You can set multiple properties at once by simply putting one declaration after another:

 p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

You can also select multiple types of elements and apply a single rule set to all of them. Include multiple selectors separated by commas. For example, to turn all paragraphs (<p>), list items (<li>) and top-level headings (h1) red, you would use:

 p,li,h1 {
  color: red;
}

Selectors:

There are a number of different types of selector in CSS, the above examples are all examples of element selectors, but there are several other kinds as well:

Selector name Selection Example
Element selector All HTML element(s) of the specified type. p selects <p>
Class selector The element(s) on the page with the specified class (multiple class instances can appear on a page). .my-class selects class="my-class"
ID selector The element on the page with the specified ID (on a given HTML page, you’re only allowed one element per ID). #my-id selects id="my-id"

There are others too, but we will visit them later in the course. If you want to know more for now, check out this page.

In the HTML section of this practical (above), you learned about the attributes id and class, which can be accessed by ID selectors and class selectors respectively. To recap those attributes, they would look like this:

<p class="myClass" id="myID">

Remember that myClass and myID can be replaced with any values you like, just as long as the id value is unique.

In CSS, this rule uses a class selector (.) to make all the elements with class="myClass" green. (They might not even all be <p> elements.)

.myClass {
  color: green;
}

Whereas this uses an ID selector to make the one element with the id myID bold:

#myID {
  font-weight: bold;
}

If both of these rules were applied at once, then the element with id="myID" would be both green and bold, because the two rules refer to different properties (color and font-weight) and so are not in conflict. If more than one rule applies to an element and specifies the same property, then CSS gives priority to the rule that has the more specific selector. An ID selector is more specific than a class selector, which in turn is more specific than an element selector.

Consider this code then:

.myClass {
  color: green;
}

#myID {
  color: red;
}

What colour would the element with <p class="myClass" id="myID"> be in this case?

As with HTML, there are many resources on line that list all of the possible CSS options. If you want to see a comprehensive list of the style properties that can be edited with CSS, see here.

Add a few CSS rules to style your web page using element, class and ID selectors.

Comments in CSS

Just as with HTML, you can (and should!) comment your CSS code. In CSS comments use a slash and an asterisk (/* this is a comment */). Here is an example:

/* colour all text with the class myClass green */
.myClass {
  color: green;
}

Part 2

Anatomy of a Leaflet Map

A web page is, as you learned in the lecture, principally made up of three kinds of code:

  • HTML
  • CSS
  • JavaScript.

Here’s what a simple web page containing a Leaflet Map looks like in code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>GIS and the Web</title>
		
		<!-- Load CSS for Leaflet -->
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>

		<!-- Load JavaScript for Leaflet -->
		<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>

		<!-- Add CSS for the page -->
		<style>
		
			/* 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%;
			}
		</style>
	</head>
	<body>
	
		<!-- Make a division to put the map in -->
		<div id='map'></div>
		
		<!-- Script to add the JavaScript -->
		<script>
			
			// 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);

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

Click here to see the page in action

As you will see, it’s not actually that much code at all!

Let’s see if it works: copy and paste the above code into a new file in Notepad++, and save it as firstmap.html. Now double click on the resulting file to open it in a browser.

In reality, of course, it isn’t quite as simple as it looks. The line that says <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> is actually downloading a LOT of other JavaScript code from Leaflet to run the map, but you can’t do anything with that code, not even really read it (feel free to open the URL have a go), so we can happily just ignore it, safe in the knowledge that it is there when we need it. Note that this external code was loaded in the <head> of the web page (as opposed to the <body>), meaning that it was downloaded before the page started to render.

Nevertheless, for most purposes, the above is all you need to get started with a Leaflet Map. And even better than that, we’re only part way through the first practical and you’ve already made your own Map on a web page!! This coding stuff is easy…

Okay, let’s have a look at this in detail… Much of the code you see above is HTML elements (defined by tags) that you should now be able to recognise. You have:

<!DOCTYPE html> tells the browser that we are using HTML5 (the latest version of HTML).
<html> these are called the root tags and they encloses everything, letting the computer know that everything inside is HTML.
<head> encloses the part of the HTML that you WILL NOT see on the screen (the header). The HTML in the header usually does things like downloading additional JavaScript and CSS files, setting the title of the web page (<title>), and giving the browser information about the web page (<meta>). Items in the head will load before the page is rendered to the screen.
<style> This holds CSS (Cascading Style Sheet) code, which defines what the website looks like. Colours, fonts, sizes etc. are all defined in CSS. We will look at this next week. <style> tags always go in the header.
<body> encloses the part of the HTML that you will see on the screen (the body).
<div> This is an HTML placeholder (div is short for division), in this case, it is where the map is drawn. divs are intended to define different sections of documents and group together related tags to help with the organisation of web pages. They have no physical form unless something is put in it.
<script> This holds JavaScript code. This can be either in the <head> (if you want the code to load before the page), or the <body> (if you want the code to load after the page). In this case, it’s in the <body> as the <div> needs to exist before we can put a map in it!

The page is essentially coded as an empty page, holding nothing but a simple empty <div>. Once it loads, however, the JavaScript runs and loads a Leaflet Map into the <div>.

Go back to Notepad++ and comment the HTML, explaining exactly what each tag does. This will be a valuable resource for you.

If you want to read more about these tags, or look up some others, click here to see a complete list. There’s quite a lot of them!

Leaflet CSS

As you can see from the code, we are downloading an external css file (leaflet.css) in order to style the map itself, but we still require a little bit of CSS in our style tags in order to set the size of the <div> using an ID Selector (#):

/* 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 code sets the map to be full screen, which is sometimes handy. It achieves this by removing any padding or margin from the page, then setting the page itself (html and body) to full screen, along with the map, which has been selected using an ID Selector. However, on many occasions you might not want a full screen map (e.g. if you are integrating the map into an existing web page along with other information). As such, you can either adjust the % size of the map or set it in pixels (px) instead.

Try setting the map size to 50% in both dimensions, does it do what you expected?

Now, try setting it to 800px wide and 500px tall. For this, you can delete the selectors for body and for html (they are only necessary when working with percentages).

Good work! Now, to understand the effect of this code, we need to find out what all of these properties (height, margin and padding) mean:

height refers to the height of the element in question. In the case of the above code, the html, body and map are all set to 100% (i.e. full screen). Because of the cascading way in which CSS works, what is actually happening is that html is being set to the size of the screen, body is then being set to the full size of html (because body is inside html), and finally the element with id="map" is set to the full size of the body.
margin refers to the space around the outside of the element. This is illustrated in the below diagram.
padding the space just around the content (e.g., around paragraph text). This is illustrated in the below diagram.

image

See if you can add a 10px margin and a border to your map using CSS. You can find some help with the latter here.

Hopefully you now have a map that looks something like this:

Leaflet JavaScript

The real meat of Leaflet is, of course, the JavaScript, and this is what we will be learning for the rest of the course. Here is the JavaScript for the simple map that we created above:

// 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);

We are not going to get into the nitty gritty of JavaScript until next week, but when you read it line by line like that, it should hopefully make at least some sense…

Programming software is nothing more than giving the computer lists of instructions, and usually they are quite understandable if you read them carefully, even if you are not a programmer yourself!

For example, let’s add some embellishments to that map - a marker and a pop-up box to label it. Here is how we would do that:

Read the below carefully, does it make sense to you?

// 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();

Add the above code to the end of the JavaScript in your <script> tags. Did it work?

If so, your map should now look something like this:

What do you think the <br> tag does? Look it up, were you right?

Great! You will see that I have added class='popuptext' to the <p> tag that contains the text in the popup. This means that we can change how it looks. For example, this would make the text larger and centered:

/* 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;
}

Add the above to the CSS in the <style> tag. Did it work?

You should now have something like this:

Finally

Now you have a website with a map, let’s finishing up by adding some HTML content and CSS styles.

We’ll start with the background colour of the website.

Add this to a CSS selector for the html element:

  background-color: #00539F;

You will note that the colour is using what is called a HEX Code (#00539F), which is how CSS and HTML interpret colours. To help you pick one, you can use this handy HTML Colour Picker. Simply select the colour that you want, and copy and paste the HEX Code into your CSS.

Now, let’s add some more stuff, you can copy and paste your content across from Part 1, or add some new stuff, either is fine!

Once you have your page looking how you want, congratulations, you have completed your first week of GIS and the Web!

Finished!

Some of the material on these pages is derived from the excellent Leaflet Tutorials and Mozilla Developers websites. Mozilla Developers by Mozilla Contributors is licensed under CC-BY-SA 2.5.