Skip to content

Instantly share code, notes, and snippets.

@danswick
danswick / index.html
Created December 31, 2020 02:47
Mbx GL 3D
<!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; }
@danswick
danswick / homework.md
Created April 17, 2020 00:15
Baygeo web mapping class homework compilation
@danswick
danswick / class-1.md
Created April 17, 2020 00:13
Baygeo class 1 agenda
  1. Introductions
  2. Class overview
  3. How the internet works / intro to the languages of the web
  4. 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?

@danswick
danswick / class-4-agenda.md
Created April 16, 2020 00:09
Baygeo class 4 agenda

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?
@danswick
danswick / index.html
Created April 16, 2020 00:07
baygeo class 4 interactive overview of class concepts
<!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" />
@danswick
danswick / class-3-agenda.md
Created April 9, 2020 00:39
Baygeo class 3 agenda

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

  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?
@danswick
danswick / class3-pairing-starter.html
Created April 9, 2020 00:31
Baygeo class 3 pairing session starter code
<!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>
@danswick
danswick / class-2.md
Created April 1, 2020 23:59
[BayGeo] Developing web maps with JavaScript, class 2

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.

@danswick
danswick / README.md
Last active February 7, 2020 20:18
Load a static placeholder map until Mapbox GL JS finishes rendering

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.

@danswick
danswick / index.html
Created November 8, 2019 22:09
Basic mapbox gl js map
<!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; }