Prep for next week 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
- What is the difference between raster and vector data?
- How are “slippy maps” different from the early Mapquest maps we looked at in class?
- How has web map rendering changed over the years?
Intro to web map rendering
- What is the basemap-overlay paradigm and how are GL maps different?
- What does client-side rendering mean in the context of web maps?
- 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.
- 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.
- 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:
Prerequisites: make sure you're logged in to our class Slack! If you haven't yet, click here to join.
Group table:
| Group | Name 1 | Name 2 |
|---|---|---|
| 1 | Ryan | Martha |
| 2 | Elias | Adrienne |
| 3 | James | Greer |
Get into pairs and start a Slack call with your partner:
- Get into a direct message with your partner. Click the ➕ sign next to the "Direct messages" thing on the left of Slack.
- Click the little 📞 icon in the top right to start your call.
- Spend a few minutes talking about what you found and what you noticed as you got acquainted with the evictionlab map.
- Pick your two favorite features of this map and note why they're you're favorite.
- Come back to the class zoom and we'll discuss what everyone found.
Slides are here: https://docs.google.com/presentation/d/1n3ELsxyMd2tZ146RBpFonZb7-we9BKXhW65dEwl4jdg/edit#slide=id.g6e50af33cb_0_119
Prerequisite: make sure you're logged in using the VS Code Live Share plugin.
| Group | Name 1 | Name 2 | Interactivity |
|---|---|---|---|
| 1 | Ryan | Elias | Add a popup |
| 2 | James | Adrienne | Add pan & zoom controls |
| 3 | Martha | Greer | Add a geolocate button |
- Get into pairs again and start up another Slack call.
- Assign one of you to create a new file in VS Code called "pairing.html". Paste the contents of this HTML file into your new file.
- In the pairing table above, you've been assigned one type of interaction. Find the prompt for your interaction in a code comment and do your best to implement the prompt together in your pairing session.
Slides are here: https://docs.google.com/presentation/d/1wd4UNWyPX1VMut9iQkqvbnftbmn_MSWLykpAYJlN9_0/edit#slide=id.g6e50af33cb_0_119
Marker & Popup code-together file: https://github.com/mapbox/web-mapping-curriculum/blob/master/class-2/in-class-exercises/mapbox-gl-js-ct.html
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 |