Skip to content

Instantly share code, notes, and snippets.

@danswick

danswick/class-2.md

Created April 1, 2020 23:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danswick/337c86d82fb987412336cc4dcc47a73e to your computer and use it in GitHub Desktop.
Save danswick/337c86d82fb987412336cc4dcc47a73e to your computer and use it in GitHub Desktop.
Download ZIP
[BayGeo] Developing web maps with JavaScript, class 2
Raw
class-2.md

Agenda

Intro and welcome!

(re)Introduce ourselves: what is your name and what is something you've found yourself looking forward to each day during the quarantine?

Recap homework

Writing prompts.

Let's go around the room and take turns responding to these prompts in our own words. If you're not sure, just do your best!

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

I'll work through each of these on my screen. Feel free to ask questions if you have any.

  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.
    1. Let's use VS Code's Live Share plugin here. If you haven't set it up, take a few minutes now. This should make it a bit easier to see the code as it's being written.

Anatomy of a web map

We'll start on Slide 19 of this presentation: https://docs.google.com/presentation/d/1sc1l22FkovglOs3w6xFHdsC420OrK1BNU0IGGkqkLfk/edit#slide=id.g6595fc3a76_0_93.

Break

Initialize a map in Mapbox GL JS

We'll start on Slide 17 of this presentation: https://docs.google.com/presentation/d/1aSRDsZUGfRgcnSu4MbQ2ypdBeTHIJU6kjGhiUUpTzuA/edit#slide=id.g7cbf41296b_0_0

History of rendering web maps and intro to runtime styling

Part 1: https://docs.google.com/presentation/d/1h9Sl8pba2sBF4jqlPHz-3-LHHmq35dFUAMs0_G4R0bM/edit#slide=id.g6380bc115e_0_13

Part 2: https://docs.google.com/presentation/d/1siDTh9WlMAW__KlnYmAN79gnNQYLdiNQRfvg2JcJlio/edit#slide=id.g6e50af33cb_0_119

Wrap up

Nice work! The information we covered today and the maps we built will serve as the foundation for the next two classes.

Next week: we'll build on our basic Mapbox GL JS map by adding interactivity. Two weeks from now: we'll build on our map even more by integrating it with an external API.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment