Class 4 agenda

Welcome to the final class! Today we'll review our progress, cover a couple of new topics by looking closely at an interactive example, and wrap up.

Review homework

Writing prompts

Intro to interactivity

1. What are some strategies interactive map developers can use to ensure maps with a lot of interactions are not overwhelming?
2. Why do we use the term “map user” instead of “map reader?”

Common types of interaction

1. What is geocoding and how might you add it to an interactive map?

Intro to events

1. What is an event?
2. Describe an example of how you could use an event listener with an interactive map.

Code exercises

1. Starting from the marker-and-popup map we made in class (here is a finished version here), add a button that, when clicked, causes the map to fly to Walla Walla, Washington. Here's a hint you can work off of if you're not sure where to start. And another one if you need it.
2. Create popups that include information about the clicked feature. Starting from this starter file, attempt to address each of the [Prompt] comments, including any sub-prompts that follow.
3. JavaScript fundamentals: last week we covered variables, objects, and functions. Feel free to go through those exercises aagain if you need a refresher. We'll talk about loops next week. spend some time working through the prompts on these pages. They introduce some fundamental JavaScript concepts and guide you through a few basic exercises:
   1. ✅ Variables: https://observablehq.com/@danswick/intro-to-javascript-variables
   2. ✅ Objects: https://repl.it/@danswick/objects-intro
   3. ✅ Functions: https://repl.it/@danswick/Functions
   4. Loops: https://repl.it/@danswick/loops

Data decision-making

Slides here: https://docs.google.com/presentation/d/1-dtWaUp5MhNl6aeP45mSX8Ny5ZB6kHtB-pmBwRoQEMc/

For the group project, pick one of the two following scenarios:

1. You're building a mapping application that will let users determine which watershed their home falls within. You will display watershed boundaries for the entire state of California and, when the user clicks one one, open a popup with information about the watershed. Your source data comes from the state watershed management agency in the form of a series of Esri Shapefiles.
2. You're building a mapping application to facilitate an interactive project to determine where your city's residents perceive their neighborhood's boundaries to be. To share their perspective, they can draw out boundaries using an interactive mapping tool. Once they've drawn their boundaries, the application will return a list of Points of Interest (available via a REST API) that fall within that boundary to help them double check that the boundary includes the places they identify with their neighborhood.

Pair programming: bug hunting!

Bug hunting file here: https://github.com/mapbox/web-mapping-curriculum/blob/master/class-3/in-class-exercises/ct-bug-hunting.html

Group	Name 1	Name 2
1	Martha	James
2	Ryan	Adrienne
3	Elias	Greer

Wrap up

What concepts have we covered in this class?

1. How the internet works
   1. Requests and responses over HTTP as well as HTTP status codes.
   2. Web services APIs like the deck of cards API and the Google maps static API.
2. How web pages work
   1. The languages of the web: HTML, CSS, and JavaScript.
   2. Intro to Chrome Developer Tools.
3. Anatomy of a web map
   1. How we went from print --> digital --> first gen online (Mapquest) --> second gen online (slippy maps) --> current gen online (vector tiles rendered in the browser).
4. Intro to map rendering
   1. How web maps get rendered ahead of time, just in time, and in realtime.
   2. The basemap-overlay paradigm and how client-side rendering helps overcome its limitations.
5. Intro to interactivity
   1. How to tailor your interactions to your audience.
   2. Map users vs map readers.
   3. Common types of interactions.
6. Intro to events.
   1. Events allow you respond to user behavior programmatically.
   2. Raising events vs listening for events.
7. JavaScript fundamentals
   1. Variables
   2. Functions
   3. Objects
   4. Loops
8. Working with data
   1. Display vs Analysis.
   2. Static vs Dynamic data.
   3. Data prep strategies.

Let's take a look at this interactive example to see these concepts in action: https://bl.ocks.org/danswick/6fd1f3dd54b36e642c792965c142251e