Web Mapping Quick Start Session 3!
Today we are going to start by talking about cartography.
(This is where I try really hard to talk about map design and mostly just quote other people who are really awesome at this.)
After cartography, we'll talk about making a web map from scratch.
There are lots of different kinds of maps, but they mainly fall into two categories:
Reference maps and thematic maps.
Reference maps focus on where things are.
"Reference maps present a wide range of themes together on a map without strong emphasis on one over another. The goal of reference maps is to provide locational details for both casual map users and professionals." - Cindy Brewer, Designed Maps
And one less familiar...
Thematic maps tell stories by showing patterns, data distribution and results of analysis.
Brewer actually adds a third category, which are special-purpose maps.
Special-purpose maps "emphasize subsets of reference information that support their special purposes."
(For the rest of the class, let's lump special-purpose in with reference.)
The following comes from Making Maps: A Visual Guide to Map Design for GIS by John Krygier and Denis Wood.
This is a popular textbook for cartography classes!
Before you start making your map, ask yourself: Why are you making your map?
"Prior to making a map, clarify your intent. Simply writing out the purpose of the map prior to making it will clarify goals; help determine relevant data, map design, and symbolization choices; and will lead to a better map."
An example of intent (also from Krygier and Wood):
A map showing a proposed Black Heritage Trail in Eli County, VA. The map is the visual centerpiece for a proposal for grants to develop the trail ad its associated sites, and must visually tantalize granting agencies.
Note that the intent includes both what you want to show as well as the story you want to tell.
Think about a map you would like to make and write down the intent. We'll come back to these later.
The intent of the map helps us to consider other parts of the map.
For example: data!
What data do you need? Where will you get it? How will you need to process it to work in your map?
Some sources for data include:
Once you have data, you should inspect it.
Questions to ask:
Based on the map intent you wrote down earlier, what kinds of data would you need? Where might you find that data? Take a few minutes and search the internet for data. Then write down the answers to these questions:
So once you have your data, you have to figure out how to display it. One important thing to consider is visual hierarchy:
"All maps have an intellectual hierarchy driven by your intent for the map. Some elements are vital to the goals of the map ... and those elements are visually dominant. ... Determine the intellectual hierarchy of the elements on your map, then show it on the map with a distinct visual hierarchy." - Krygier and Wood
(Here's where we get out of my depth a little and talk about design.)
Some elements stand out and others fall back. How can you create visual hierarchy?
figure vs ground
figures are visually different, ground are visually the same
figure has more detail than ground
figure features have well-defined edges, ground elements have weakened edges
figure features are layered on top of ground features
figures features have more distinct shapes and are larger than ground features
Portland building ages map
Thinking about your map intent and the data you've identified, how might you arrange your map in terms of visual hierarchy?
"Our human and natural environments are complex and full of detail. Maps work by strategically reducing detail and grouping phenomena together. Driven by your intent, maps emphasize and enhance a few aspects of our world and deemphasize everything else." - Krygier and Wood
This is made more complicated by interaction and zooming in maps.
Map generalization and classification includes:
selection: what data do you show at each zoom level?
simplification and smoothing: how can you generalize complex lines?
Natural Earth
displacement: what do you have to move so it can be seen?
enhancement: what do you have to make bigger so it can be seen?
Consider the theme of your map and your data. Might you need to employ any of these techniques in your map?
Data classification!
Is your data quantitative or qualitative?
What design choices must you make to maintain your cartographic integrity?
"Choropleth maps portray geographic patterns for regions composed of areal units such as states, counties, and voting precincts. Usually two to six graytone symbols, on a scale from light to dark, represent two to six nonoverlapping categories for an intensity index such as population density or the percentage of the adult population voting in the last election."
"The breaks between these categories can markedly affect the mapped pattern, and the cautious map author tests the effects of different sets of class breaks. ... Too commonly, the naive or noncritical user accepts this arbitrary display as the standard solution, not merely as a starting point, and ignores the invitation ... to explore other approaches to data classification." - Mark Monmonier, How To Lie With Maps
What colors do you use? What symbols?
Misguided Maps
How do you avoid making an ugly or confusing map?
Guess what?
It's really, really hard.
A fun exercise: do a search for "cool maps" or "buzzfeed maps" or "40 maps" and pick out the design flaws in each of them.
BREAK
Second half of today: web maps from scratch
How do we put maps on the web?
HTML!
HTML is the language of websites.
CSS is the styling language of websites.
JavaScript is the dynamic language of websites.
So. Let's think about web pages.
If you think about a web page like a sentence, HTML is the noun, CSS is the adjective, and JavaScript is the verb.
HTML makes up the skeleton of everything on the page, CSS gives it style, and JavaScript makes it do things.
We can't add JavaScript to a web page without adding HTML, because then there would be nothing for us to work with!
Every website is made up of these three things, whether it has a map or images or input boxes or forms or...
Open up Chrome and head to lyzidiamond.com
Right click on the picture and click Inspect Element.
These are the Chrome Developer Tools. They are super helpful.
Let's start by looking at Elements.
Click over to Network and then reload the page.
Click Sources. What do you see here?
Now click Console.
The Console is a JavaScript environment. You can put 
console.log()
 in your code to print to the Console.
You can also use it to play around with JavaScript!
In the Console, type x = 4.
Now just type x.
Did the console print 4 back at you?
Awesome! Now x is synonymous with 4.
Try x + 4.
What did the console print?
This is a great way to try out some JavaScript.
Let's make a variable called name and have it store our names.
name = "Lyzi"
name should print out "Lyzi"
Our name variable is a string, which is a type of data in JavaScrit.
Type in typeof(name) and hit enter. The console should return string
When we create a string, it is automatically given some properties.
Type name.length and hit enter. What happens?
Neat!
Head to lyzidiamond.com/leaflet.html and open up the Console (right click, Inspect Element).
Now right-click anywhere on the page and click View Page Source. The HTML, CSS, and JavaScript that make up the page should open in a new tab.
Let's talk through this line by line and talk about what's happening.
The library we're going to see today is called Leaflet. It is by far the most popular web mapping library.
Mapbox.js is just an extension of Leaflet. CartoDB uses Leaflet to power its maps.
An HTML file is broken into two parts: head and body.
The head section includes styling, links to external resources, and other things the page might need to load properly.
The body section includes all the elements that will be rendered on the page.
Oh: and the whole thing should be bookended by html tags.
In order to make our web map work, there are several things that need to be added to the head section of the page.
First, we need to add the Leaflet CSS file to the page. This allows us to add predefined mappy elements.
Then we need to add the Leaflet JavaScript file. This will allow us to make a map object in which we can pan, zoom, and do other mappy activities.
Finally, we need to add some of our own CSS to make the map as big or small as we want. We set it to a height of 600 pixels.
Now let's add some code inside the body.
Step one is to make a div to contain our map.
Then, also inside the body, we add a script tag. The page knows that anything inside script tags is JavaScript!
The first step is to initialize a map, set its view to San Francisco, and set a zoom level.
Hooray! Now there's a map in our map div, with the center in the SF, set at zoom level 14.
But... there's nothing on the map. We have to add some map tiles!
Now we have to close the script tag, close the body tag, and close the html tag.
But a map of just tiles is kind of boring, right? Let's add a map marker.
Let's also give that point a popup.
Leaflet really likes popups. They're baked right into the JavaScript library! Let's add one for our marker that says "CCSF" on it.
Woohoo! That's how this map works!
(This is based off of the Leaflet Quick Start Guide which goes further in depth if you want to check it out.)
So usually you want to add more than one marker on a map.
There are a few different formats for adding interactive data to maps.
But the most popular by far is GeoJSON.
As mentioned, GeoJSON is an extension of a format called JSON, which stands for JavaScript Object Notation.
Because GeoJSON is basically just JavaScript, it can easily be used in web maps!
For example, Leaflet loves GeoJSON.
(To learn more about GeoJSON's specificities, check out Learn GeoJSON.)
Note: GeoJSON files can have one of three different file extensions: .geojson, .json, and .js.
Let's play with some existing GeoJSON, then make our own GeoJSON.
Let's go back to the earthquakes dataset we used with CartoDB before.
We used CartoDB to put that on a map. Let's look at another way to do it.
Open a new tab and head to bit.ly /earthquakes-45.
Now let's put them on a map. In another tab, head over to gist.github.com.
Quickly: What is GitHub?
GitHub is an online repository for code and a system for collaborating on projects.
It has lots of cool features, which we'll see here in a minute.
Copy and paste the GeoJSON into the box.
Where it says Name this file..., type earthquakes.json.
When you're done, click Create public gist.
Woohoo!
If you click on one of the map markers, you will see the information in properties for each earthquake.
This map, like some of the others we've seen, is embeddable. Head to bit.ly/github-maps to learn more about that.
This is super handy if you have a GeoJSON file and want to make a quick map.
But as you can see, there aren't any tools for customizing this map.
And maybe we want to make our own data as well.
So let's make our own GeoJSON! Head to geojson.io. This is a tool for creating and editing GeoJSON files.
You can add points, lines, and polygons to the map, and the resulting GeoJSON is generated! You can also add attributes.
You can then save this and use it later.
Add some features to the map and add some properties as well. Save the data as a .geojson file.
Now head to bit.ly/mapbox-ex. This is an example of adding GeoJSON to a Mapbox.js map.
At the bottom of the example, click Edit in jsFiddle.
If you don't see a map in the bottom right, click Run at the top.
jsFiddle is an in-browser editing environment for HTML, CSS, and JavaScript.
Instead of the HTML, CSS, and JavaScript all in one page, jsFiddle breaks them out.
In the left column click External Resources. This is where Mapbox.js and Mapbox.css are being loaded.
Open the GeoJSON file you created earlier and replace the GeoJSON in the example with your data.
You may have to adjust the code so your data is visible.
There are also some Mapbox.js-specific things in here that differ from the map we saw before. Let's look at those.
access token
featureLayer / setGeoJSON
properties
Dudes. You wrote some JavaScript and made a map. That is so awesome.
This is where we'll stop for now. Next week we'll explore some other cool ways maps are being used on the web.
Next week I will also show you how to get your maps up on the web so you can share them.
Thanks!
To log your attendance, please fill out today's exit survey