Creating An Online Map App

Introduction

This lab is intended to give you a sense of the development path involved in creating a simple web map application. We will learn a little bit about several things rather than becoming an expert in any of them.

See also these other Leaflet related pages

Goal

A useful map of the Mills campus.

50658.png 50658.png 50658.png
50659.png 50659.png 50659.png
50660.png 50660.png 50660.png

Step One: learn a little javascript

This was your weekend assignment: visit CodeAcademy to acquire a tourist's level familiarity with javascript.

Test your mettle by putting a little javascript on a wikipage (you can use your sandbox page). The wiki syntax allows us to "embed" javascript (and just about anything else you can put in a web page) by surrounding it with the wiki tags [html] [/html].

Thus, in a Wikidot page we can have (html in blue, javascript in violet)


[[html]]
<button onclick="myFunction()">Push me</button>
<p id="paragraph1">blah blah blah</p>
<script type="text/javascript">

function myFunction()
{
document.getElementById("paragraph1").innerHTML="You pushed the button";
}

</script>
[[/html]]

Your Turn: Create a little script that has a button you can push to open a dialog box that asks you for your name. When you type your name and click OK, it says "Hi, yourname, how are you today?"

Proceed by stepwise refinement. First define what the whole thing looks like
Refinement 0

  1. button that will "call" the function
  2. html paragraph element where the "hello" text will actually appear
  3. function that will prompt user and put text on web page

Refinement 1

For the button, you can reuse the code from above, perhaps with some changes, but save those for the next refinement.
For the html paragraph we can also reuse the code from above
For the function, we'll describe it in "pseudo-code" first:

Create a variable to hold the output text
Display dialog box and get user's name
Combine "Hi, ", the user's name, and "how are you today?" into one string and store it in a variable
Send the variable to the web page paragraph created above

Some tools you may want to use:

<button onclick="nameOfFunction()">Text to show on button</button>
<p id="ralph">A bit of text in an html document.</p>

function functionname() {alert("I am an alert box!");}
var varname = 5
var varname = 5 * x
var varname = prompt("Give me a number","e.g., 5")
var x = "Jane"
var y = "Hello " + x + ", we are glad you came!"
document.getElementById("ralph").innerHTML=y

Refinement 2

<button…>blah</button>
<p…></p>
<script>

function myFunction()
{

var x
username = makeDialogBox
x = "Hi, "+ user's name + "how are you today?"
Put x in the <p> element

}
</script>

Step Two: learn about Leaflet

Reread the first two sections of the Leaflet QuickStart Guide. You encounter a few things that might be new to you here.

leaflet-diagram.png

CSS

Stands for "cascading style sheets." This is a standard for defining what web pages look like. We will, for the most part, just be copying and pasting, but you should know three things about CSS

  • extensive sets of formatting commands are often stored in separate files with the extension .CSS and these are "included" in the <head> section of a web page with html like this:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />

  • CSS can be included directly in an html file inside <style> tags.

The following CSS

<style type="text/css">
#map { height: 180px; }
</style>

says that any elements in this page that have the ID "map" should be given the attribute height=180px (whatever that means).

  • The same web page content can appear completely differently depending on what styles are applied to it. This is one way that web pages get reformatted so that they look good on different devices.

The HTML <div> tag.

The <div> tag just defines a piece of a web page so that styles and formatting can be applied to it. It can be a single line, an area, one or more paragraphs, a section, or just about whatever. It is sometimes referred to as a "container" because a "div" can be defined and named but left empty and then filled in later by an app. In this example, we use a <div> container as the place where our script will put the map we generate.

"CloudMade tiles"

CloudMade is one of many companies that deliver map tiles, small raster segments of maps at various zoom levels. They provide an API (applications program interface) which is basically a set of instructions for how to ask their server for particular sets of tiles. Leaflet is a set of javascript commands that talk to that API and then display the results in a webpage. Leaflet does not assume we are using CloudMade; it is "agnostic" about the tile provider, meaning, the code makes no assumptions about where the tiles are coming from.

We can sign up for an account at CloudMade and get very cool tiles, but we can also just use OpenStreetMap tiles. These will be available at http://tile.openstreetmap.org/37.3/-122.3/14

Step Three: Create basic map

On your sandbox page, create a level three subheading "My Mills Web App" and then, under that, click on the "insert any HTML code" button in the Wikidot editor (far right, second row of buttons). In the

[[html]]
Insert any HTML code, including widgets and video or audio players
[[/html]]

Our HTML will have two parts - a head section and a body section.

The head section (<head>blah blah blah</head>) will do three things described in the tutorial:

  1. import the Leaflet CSS
  2. import the Leaflet Javascript library
  3. define a little bit of "local" CSS

The body section (<body>blah blah blah</body>) will do two things:

  1. define a container for our map (a <div>)
  2. define the script (code) that will produce our map

In HTML you can put a "comment" in the code by surrounding it with a funny multi-character tag:

<!--Anything in here will be ignored-->

So we can use this to sketch out our code even before we have much of a sense of how it is going to work. Though, thus far it does absolutely nothing so we'll see nothing except the one header line.

[[html]]
<head>
<!--1) Link to Leaflet CSS-->
<!--2) Import the Leaflet Javascript library-->
<!--3) Define a little local CSS-->
</head>
<body>
<h2>Our Map Will Appear Here</h2>
<!--4) Create a container for the map-->
<!--5) Invoke Leaflet in a script-->
</body>

[[/html]]

From the tutorial we see how to link to the Leaflet CSS:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />

and how to import the Leaflet Javascript library:

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

The "local CSS" will specify size and location of map on the page. Here's the scripting we'll use. It says "any objects given the ID "map" should be set to be 400 x 400.

<style type="text/css">
#mapdiv { height: 400px; width: 400px;}
</style>

Step Four: The Mapping Script

We start Leaflet out generating a map object "L," saying where it goes on the page, and, optionally, providing some initial parameters (in this case, a center and a zoom level).

Create a map zoomed to level 16, centered at 37.781, -122.182 and display it in the DIV we've called "mapdiv":

var ourmap = L.map('mapdiv', {center: [37.781, -122.182], zoom: 16});

Now we need to tell Leaflet to load the tiles display them in our <div> using [http://leafletjs.com/reference.html#tilelayer.

L.tileLayer('//tile provider URL template//', {//options//}).addTo(ourmap);

Several things are going on here:

  1. we identify the source of tiles
  2. we identify ourself via our "API key" - basically our account number with the tile provider
  3. we specify options such as the visual style of the map, the attribution that should be placed on the map, and the opacity of the layer.
  4. we call the method "addTo" to put this layer into the map that is displayed in our <div>

For our particular map this will look like this (the backslashes at the end of the lines tell Javascript that the command continues on the next line. In general we will avoid using this, but we do it here to make this more readable:


L.tileLayer('http://{s}.tile.cloudmade.com/8b057134389b449f93ea041aa734cbf3/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, \
<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, \
Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(ourmap);

<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<style type="text/css">
#mapdiv { height: 400px; width: 400px;
margin-left:auto;
margin-right:auto;
}
</style>

</head>
<body>
<div id="mapdiv"></div>

<script type="text/javascript">

var ourmap = L.map('mapdiv').setView([37.781, -122.182], 16);

L.tileLayer('http://{s}.tile.cloudmade.com/8b057134389b449f93ea041aa734cbf3/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, \
<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, \
Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(ourmap);

</script>

</body>

Step Five: Brainstorm about functionality

Step Six: Create version 0.0

References, etc.

Axler, M, et al. 2013. Leaflet: Setup & Basemap (GISC) (or video)
Jenkins, S. 2013. Build stylish, scalable maps using Leaflet.js
P2PU Maps with Leaflet
OSGEO http://live.osgeo.org/en/quickstart/leaflet_quickstart.html Quickstart

Mapstraction (another Javascript mapping library)