CCSFGIS Web Map Quick Start
Session 4

Before jumping in, let's review

What did we talk about last time?

Let's take it to the next level [guitar solo]

Borrowed from Alan and Camille of Maptime fame.

github wat?

Github is git & hub

Github is version control & a website

Github is collaboration software & free public code hosting

* wikis
* issue tracking
* gists
* website hosting

Why is git + github important?

open source lives on github

git flooooowwwwww

"A successful git branching model"

gah

resources:
* simple git guide
* cheatsheet
* try.github.io
* nodeschool's git-it
* Git Flow
* Hackbright Git exercise

ADD YOUR NAME! We'll walk through it together.

success!

GitHub Pages!

GitHub pages is a convenient way to make a website to share your web maps.

It runs Jekyll out of the box.

Jekyll is a site generator that plays nice with GitHub.

Mapbox runs on Jekyll. So does Maptime!

Maptime has a really cool starter template you can check out on GitHub.

GitHub pages totally works without Jekyll. Let's use it to put our maps out there!

Head to github.com and sign up for a free account.

Create a new repo.

Name it:
your-username.github.io

Create a new file, name it index.html, and add the code from last time's Leaflet map.

Head to your-username.github.io and check out your map! (It might take a sec to show up...)

Aww yeah!

Another way you can embed a map in a page is with an iFrame.

An iFrame is a website within a website.

A lot of web mapping platforms offer pre-made iFrame code for you. Let's try embedding a CartoDB map with an iFrame

Grab the code from this link, swap in your own iFrame, and try putting it on the Internet.

hint #1: try adapting the process we used to put our Leaflet map online.

hint #2: CartoDB provides handy iFrame code for you.

You are a champion!

Let's take a break. When we come back we're going to talk data visualization with D3.

Lots of you sent me sweet dataviz examples after session 1, many of which were built with D3.

Before we break out the code, why might you use D3?

Non-map visualizations!

Projections!

And so on...
D3 is super powerful.

Let's dive in!

We're going to switch gears a bit and borrow from Maptime Boston's excellent D3 tutorial.

First, fire up Sublime Text. It should be installed on your lab computer.

Head to this link to follow along --> http://maptimeboston.github.io/d3-maptime

Thanks a ton for being a great class!

Feel free to reach out via email or Twitter at any time if you have questions or just want to geek out about maps.

Don't forget to take today's exit survey.