Class 1 Recap and Homework

Slides: https://docs.google.com/presentation/d/1ml4cobu5nnwX7jjK0cWJ6DfhRQfObIKmJdH2PK-UTWE/

Writing prompts

We'll discuss these prompts as a group next week.

How the internet works

1. Why is HTTP a thing?
2. What is an API and why do APIs like the deck of cards thing exist?
3. Write about two kinds of HTTP requests you make in your daily life.
4. Why do some URLs have ?s and &s in them?

How webpages work

1. What's a good metaphor for HTML, CSS, and JavaScript?
2. What would you use Chrome Dev Tools for?
3. What is the JavaScript console?

Code exercises

Do you best to attempt each of these. We'll go through them as a class next week.

1. Use the Mapbox Static Images API to request a static map similar to the one we requested from Google Maps during class. Hint #1: you'll need to sign up for a Mapbox Account and get an access token from your account page. Hint #2: getting a bit lost with all of the query parameters and options? Try using Postman to keep yourself organized.
2. Work through the Mapbox add custom markers in Mapbox GL JS tutorial on your own. Don't worry if you get stuck! Do your best to work through each step and keep notes about what you tried and where you got stuck.

Office hours

I'll be online on Sunday from noon to 1pm as well as Tuesday from 4pm to 6pm. I'll be on Zoom (link here) if you want to stop by.

Class 2 recap and homework

Here's our agenda from this week, with links to slides: https://gist.github.com/danswick/337c86d82fb987412336cc4dcc47a73e

If you're interested in doing some mapping for public good during the times of Coronavirus, I would highly recommend checking out the Humanitarian OpenStreetMap Team: https://tasks.hotosm.org/learn.

Writing prompts

We'll discuss these prompts as a group next week.

Prep for next week

1. Go to https://evictionlab.org/map/ and spend some time looking around and exploring the data. Then give yourself 5 minutes to write down as many types of interactions as you can.

How web maps work

1. What is the difference between raster and vector data?
2. How are "slippy maps" different from the early Mapquest maps we looked at in class?
3. How has web map rendering changed over the years?

Intro to web map rendering 4. What is the basemap-overlay paradigm and how are GL maps different? 5. What does client-side rendering mean in the context of web maps? 6. Why is it possible for Mapbox GL JS to place labels dynamically as you interact with the map?

Code exercises

Do you best to attempt each of these. We'll go through them as a class next week.

1. Using geojson.io, trace the outline of your childhood home. Using the skills we’ve learned in class, add your new GeoJSON to a Mapbox GL JS map. Here is an example you can look at for guidance: Mapbox GL JS polygon example.
2. JavaScript fundamentals: 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

Office hours

I'll be online on Sunday from noon to 1pm as well as Tuesday from 4pm to 6pm. I'll be on Zoom (link here) if you want to stop by.

Class 3 recap and homework

Here's our agenda from this week, with links to slides: https://gist.github.com/danswick/29c9287ce7a1788e0896ebdb5ed2fcd0

Next week, we'll be talking about incorporating web services into your web maps. For example, you might want to add the option to show travel times to your map! Coincidentally, YouTuber Tom Scott posted this video on the topic just in time for our class. I thought it provided a really nice introduction to how APIs work and their history.

Writing prompts

We'll discuss these prompts as a group next week.

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 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

Do you best to attempt each of these. We'll go through them as a class next week.

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

Office hours

I'll be online on Sunday from noon to 1pm as well as Tuesday from 4pm to 6pm. I'll be on Zoom (link here) if you want to stop by.