Today's agenda is at bit.ly/ccsfgis-f16-s3-agenda
Web Mapping Quick Start Session 3!
Today we is going to be broken up into four parts:
Homework! Tell us about your project - what is the goal? Who is the audience? What kinds of cartographic concepts will you explore? Etc.
How do we put maps on the web?
Head to bit.ly/ccsf-fall16-s3 to follow along.
Hold up a sec. What is a webpage?
A hypertext document that is connected to the World Wide Web link
A webpage is a document that is usually written in three languages:
HTML!
HTML is the language of websites.
HTML gives your document structure.
CSS is the styling language of websites.
CSS describes the way your document should look.
JavaScript is the dynamic language of websites.
JavaScript makes your document do stuff.
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...
ANYWAY
Let's learn more about webpages by breaking one.
Open up Chrome and head to ccsfgis.org/
Right click on the first article's title and click Inspect Element.
These are the Chrome Developer Tools. They are super helpful.
Let's start by looking at Elements.
Time to vandalize!
Double click on the highlighted element that we inspected earlier.
WHAT? I CAN EDIT THIS?
Yep! type a message and hit enter/return.
What else can we do?
See the styles tab? Click over there.
Click where it says element.style and type:
color, then hit tab, then type pink.
Take a few minutes and try to break some other stuff. Can you delete elements? What else?
Click over to Network and then reload the page.
What do you think this tab is telling us? Why might you use this tool?
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!
Let's play a game.
Head to danswick.com/floppybird/.
Look familar? :) This game is infuriating, but with our new JavaScript knowledge, we can cheat.
In another tab, open github.com/danswick/floppybird/blob/gh-pages/js/main.js
See anything in here that looks useful?
Head back to the game and open your console.
Start breaking things!
BREAK
Earlier, we talked about your project ideas. Let's talk more about planning your web maps before we get any deeper down the code rabbit hole.
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 (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 your map project and its intent.
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? Let's talk about some examples from our projects. How do they answer these questions:
So once you have your data, you have to figure out how to display it.
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
Head to danswick.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 and lots of companies build off of it.
Mapbox.js is just an extension of Leaflet. CARTO uses Leaflet to power its maps and even Esri is getting in on the Leaflet fun.
Back to the webpage.
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 my colleague Lyzi's excellent guide, 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 CARTO before.
We used CARTO 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