Tutorials: HTML/CSS/JS | Leaflet | D3 | Visualizing spatial-temporal data 1 | Visualizing spatial-temporal data 2

Interactive Mapping

Tutorial 1. HTML, CSS, and Javascript

Ningchuan Xiao

Morpheus: What is real? How do you define 'real'? If you're talking about what you can feel, what you can smell, what you can taste and see, then 'real' is simply electrical signals interpreted by your brain.

The Matrix (1999)

In this workshop, we will cover a few fundamental things regarding visualizing data on the web. The goal is not to discuss the details of each technique. Instead, we aim to develop working templates that can be extended to future work.

Environmental setup
HTML basics
CSS basics
Javascript basics
Mapping with leaflet

This is a hands-on tutorial and the following write-up is just an outline of the tutorial. We will demonstrate the process during the workshop.

Web applications

All applications (software packages, web pages, etc.) have three tiers in their architecture:

Presentation: user interface
Business logic: tools and procedures that transform data into the results that will be shown to the user
Data that is used to support contents for the tools and hence presentation

A traditional desktop software system implements all the three tiers on one computer. But a web application will rely on the functions provided by two or more computers that serve as the client (the one the user sees and uses) and the server that is typically remote. The two are connected through computer networks or the internet. In this network setting, an application, software package or a web app, can be implemented on different computers while the user will not see any difference at the presentation. (Of course this brings me to the Matrix quote.)

Most of the presentation tasks in a web app are done using two techniques: HTML and CSS.

HTML

HTML stands for HyperText Markup Language, where we mark up a text file with tags that will be interpreted by a web browser to render the text as a web page.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Tutorial</title>
    </head>
    <body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
</html>

We are going to use the tutorials at w3schools.com to learn some basic features of HTML.

CSS

We generally want to separate the content and the style to show the content. We do this using CSS, or Cascading Style Sheets. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in curly braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;). Here is an example of how CSS looks like:

body {
    background-color: lightblue;
}
h1 {
    color: white;
    text-align: center;
}
p {
    font-family: verdana;
    font-size: 20px;
}

We will again use materials at w3schools.com to learn some basics of CSS:

Javascript

This is an example from w3schools.com where we put a button on the screen. When clicking on it the text in the div tag with an id of "demo" will become red. We will show how this works by editing an HTML file and then inserting the Javascript code in it.

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html>

Javascript is NOT Java and it has nothing to do with Java, however the name may suggest otherwise. We will learn some basics about Javascript from w3schools.com.

GeoJSON

JSON stands for JavaScript Object Notation. This is a type of data that is specifically linked to the JavaScript framework. There is a tremendous advantage of using JavaScript to handle data formatted in JSON. Apparently GeoJSON refers to the use of JSON for geospatial data. Each GeoJSON object must have at least two members of type and geometry, along with other optional members.

GeoJSON is probably the most popular data format used for geospatial data on the web today. Below is a very simple GeoJSON object adopted from geojson.org.

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [-83.00743818283081, 39.99868995767895]
  },
  "properties": {
    "name": "Dinagat Islands",
    "population": 100
  }
}

We don't have to write GeoJSON files manually. We will use QGIS to do this. This is quite simple and please click here for a quick tutorial. We will demonstrate how to load a geojson file onto a simple web application.