Dan Swick danswick

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

Why is HTTP a thing?

Introductions
Class overview
How the internet works / intro to the languages of the web
If we have time: how web maps work

Introductions

Who am I?

Who are you? What do you want to learn during this class? Which snack do you plan to stockpile at home?

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

What are some strategies interactive map developers can use to ensure maps with a lot of interactions are not overwhelming?

Agenda

Recap homework

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?

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.

This page has two maps of the exact same area: one fully interactive Mapbox GL JS map and a simple static map. The Mapbox GL JS map is hidden at the beginning and only the static map is visible. When the Mapbox GL JS map finishes its first full render (map.on('load',...)), it seamlessly replaces the static map.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Add 3D terrain to a map</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	body { margin: 0; padding: 0; }

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>Display a map</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- 🔰How web pages work: linking to external resources -->
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" />

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>Display a map</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />
	<style>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Display a map</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }