Art 122 CC: Creative Cartography
Class Description
Instructor: Lisa Jevbratt

Prerequisites:
Art 22 (or instructors consent). HTML experience is required. Basic JavaScript experience required (what is covered in Art 22). If you have more experience with programming there is still a lot to learn and explore both conceptually and technically.

Class Introduction:
I find myself looking at maps constantly right now. Maps in newspapers and various health organization sites show me the latest coronavirus spread, in the US, Sweden (where my family is) and the world. The satellite view in Google maps help me find paths in the park nearby my house which I made part of my ‘island’ – the small corner of the world where I am sheltering-in-place.

The word isolate is derived from Latin: insulatus “made into an island.” While the places we are hunkered up in might not have a geographical barrier such as a large body of water, mandates around travel and social distancing isolates us from friends and family, as well as strangers, and limit the geographical area we can move freely within. Right now, we are all essentially on our own islands, we might share that island with a few others, and we might make brief excursions to the ‘mainland’ to buy food and medicine, but the isolation is tangible. At the same time, on a truly exceptional level, we currently share an experience with the whole world. No country is spared the spread of the virus and its economic, social, psychological, cultural consequences.

In this class, you will make a hyperlocal map that tells a story about your “island.” You will also make a map that maps global data about anything you find interesting, telling a story about the world at large.

Some of you might make projects that help you, and your audience, process what is happening right now for you and the world. Others might want to provide an escape for themselves and their audience. Yet others might want to do both.

I have never taught an online class before, and I assume many of you have never taken one. It’s a new learning experience for many of us, in the midst of an insane time. We might not get as far in the class as we expect, and that’s fine. Most importantly I would like you to have a good time with the coding. It can be a great stress reliever (it is for me). Again, use the projects to process what is happening in the world and to you, or if that feels better, as a distraction from it all.
Students
Wesley Cheung
Boning Dong
Kelly He
Chloe Hopen
Acacia Hu
Corrie Kim
Chloe Li
Lindsey Maseba
Keilyn Rubio
Rosalie Rubio
Megan Tien
Justin Weber
Joy Yi
Emily Zhang
Required Readings and Video:
Google Maps API Succinctly, Mark Lewin, 2018, code samples
‘JavaScript for Web Designers’ on LinkedIn Learning . Sign up for a trial month of free access.
Others TBA
Software used in class:
Zoom for lectures
Slack for communication
UCSB VPN client For accessing the online book site 'Safari' and academic articles, data etc.
BBEdit, a good text editor (free version available)(Mac)
JEdit, text editor for Mac and PC. (free)
Cyber Duck, sftp client for Mac and PC. (free)
Class Introduction
M 3/30) Class Intro (Via email)
W 4/1 1PM - 1.50PM) Zoom Meeting: Tech Setup, Introductions etc.
I will send out an invitation to the Zoom meeting to your UCSB email address. In the meantime download the Zoom app to your mobile device if you want to use that for the meeting. (You can use your mobile device or a computer)

After the zoom meeting I will answer questions on our slack workspace (invite link in email sent first day of class) in realtime. Post your questions to the slack channel #class1
Google Maps Intro / Local Mapping
M 4/6) Google Maps API Intro

Lab class:
Look at my examples, the google tutorial and the reading, start working on the assignment due on Wednesday.

If you don't have much experience with JavaScript view Chapter 1 and 2 in ‘ JavaScript for Web Designers’ on LinkedIn Learning. Sign up for a trial month of free access.

View Chapter 5 in ‘ JavaScript for Web Designers’ on LinkedIn Learning. Sign up for a trial month of free access.

I will answer questions on our slack workspace (invite link in email sent first day of class) in realtime. Post your questions to the slack channel #class2

Examples:
Just a map
Map with two markers

Tutorials/Help:
Google Maps API Tutorial
get a Google Maps API Key.
Due: Basic HTML5 homepage
Make a simple homepage in HTML5 (by starting it with <!DOCTYPE HTML>). Use CSS to set the background color, text color, font etc. The page should look good and be readable both on your mobile device and on desktops. Make it very simple, it should have your name and a picture of yourself. It will be used later in class to link to your assignments.
  • Log into our web server/host "class.arts.ucsb.edu". The account/user is "art122". I will give you the password in class.
  • Create a folder in the 'Sites/s_20' folder called 'yourlastname_yourfirstname' all lower case.
  • Save the page as 'home.html' to the folder you just created.
  • The url will be http://class.arts.ucsb.edu/~art122/s_20/yourlastname_yourfirstname/home.html.
You can use any text editor and sftp program to transfer your file to our server but I recommend using BBedit if you are on a mac, and JEdit on a pc because it is easy to save directly to the server. Below are instructions for how to save files directly to the server in BBedit and JEdit (PC). You can also write the code in any text/code editor and use a separate SFTP program to upload it to the server.

Go to "file -> save to FTP/SFTP server" in BBedit/TextWrangler (mac) or to "plugin -> FTP -> save to Secure FTP" in JEdit (PC). If that option is not available in JEdit select Plugin Manager from the Plugin menu and install the 'FTP' plugin there.
W 4/8) Zoom Meeting: Google Maps API cont.
I will answer questions about signing up to the API and making the first simple map. I will then introduce some more API features.
Due: 1. Reading from Google Maps API Succinctly and first map exercise.
Read chapter 1,2 and 4 until the end of page 33 in Google Maps API Succinctly, Mark Lewin, 2018. Be prepared to ask any questions you have about what you learn in the text.

With the help of the books and its code samples make a webpage with a google map.
  • The map should have at least 5 markers on it.
  • With the help of my examples, the reading and the google tutorial, make all your markers look different.
  • Link to the page from your homepage (mark the link with the number 1)

Overlay, Polygon and Marker Examples
Examples:
  • Ground Overlay A png with a transparent background.
  • A precise ground overlay I rotated and cropped the photo in photoshop to make it fit the map. Then I used maps.google.com to find the coordinates for the corners of the overlay and entered those into my javascript code.
The site I used to get the old aerial photo: UCSB Library FrameFinder

More complex examples (use only of you have more experience with JavaScript):
M 4/13) Google Maps API Styled Maps
Due: 2. More is more
  • Add overlays and polygons to the map you already started, or make a new one with markers overlays and polygons.
(You can read about overlays in Chapter 4, Google Maps API Succinctly, Mark Lewin, 2018)

Link to the updated version using the number 2 in the link.

If you are done adding polygons and overlays to your map, then start styling your map. Look at help and my examples below.

I will be available to help with overlays, styling or anything via slack from 1PM-3PM. If you want to, I can help individually on zoom, let me know on slack.

Style Examples/Help
W 4/15) Google Maps API Styled Maps

Zoom Lecture 1PM: Styled Maps, Info Windows etc.

Examples:
Info Windows
Info Windows, close any open window before opening a new

Help:
Google Maps API events
InfoWindows

Due: 3. Map Styling
Style the map that you already started. Change as many things as possible. Make it look interesting and unusual. Link to the updated version using the number 3 in the link.
M 4/20) Lab
Work on Island Map Project

I will be available to help via slack from 1PM-3PM. If you want to, I can help individually on zoom, let me know on slack.

Various examples:
Play sound when infowindow opens
W 4/22) 'Island' Map Project Critique
Due: 4. 'Island' Map Project
Make a map of your ‘Island’ – the area you are currently confined to, physically and mentally.

Use markers (make your own), overlays, styling, polygons etc. You can also add photos, video and sound to your info windows.

Your map should mark at least 12 locations.

Pick one or more categories of things to map. If you use more than one category, pick one or two that are interesting together for some reason. Be careful choosing categories. Be specific. Avoid very broad categories such as “spots I spend my day”, “thinks I like.”

Examples of categories you could map:
  • How you feel in different spots
  • What you do in different spots
  • Memories in different spots
  • Where you buy toilet paper
  • Where you always run into person x and y and z
  • Where you have interesting encounters with animals
  • Plants
  • Colors
  • Textures
  • Sounds
  • The boundaries of your 'island'

Imagine the audience for your map. What do you want them to get out of your map. Are you telling a story? Are you, and in extension your audience, learning something new from the map? Do you want it to be surprising, emotional, funny, poetic, political, beautiful …?

Mapping the World
M 4/27) Slack Lab
Due: Comments on projects
Look at the 'island' map projects (assignment 4) by the three students below your name on the class homepage. For example Keilyn should look at Rosali's, Ed's and Megan's maps. If you are towards the bottom of the list, circle around to the top, so Joy will look at Emily's Wesley's and Boning's project.

Write comments in the # islandmap channel on slack. Tag the student whos work you are commenting on using the @ character in front of their name. (see mention a member in slack)
W 4/29) Zoom Lecture: Mapping Data
Due: 5. Update your map
Read the comments from your fellow students. Use the comments from them and me (from the crit.) to make any fixes you like to your map project.

Link to the updated version using the number 5 in your link.
Due: 6. Reading : What would a floating sheep map?
Read What would a floating sheep map? Zook M, T Shelton, A Poorthuis, R Donohue, M Wilson, M Graham, M Stephens.

Write a couple of paragraphs about something you found interesting in the text. Make an explicit reference to the text.
Due: 7. World Data Map Sketch
Using the reading above as inspiration, make a sketch (in any medium for example, draw, collage, or use the Google Maps API) of a world map that maps at least two kinds of data. The assignment is not a sketch for a map you actually have to make, so you can imagine using data that you don't know if it exists or not.

Make a webpage with the sketch and a paragraph explaining your map.
M 5/4) Slack Lab
Work on the assignment due on Wednesday.
W 5/6) Zoom Lecture: Data Layer
Due: 8. Data Layer Exercise
Try to modify the look of this map visualizing the most recent earthquakes on a Google Map. Try changing the markers, the marker colors etc. Change as much as you can without creating errors.

USGS Earthquakes

Data Layer Examples
Google Maps API Help/Reference pages. They might be helpful but can be confusing
Other examples
M 5/11) Slack Lab
Work on your "Out There" Project
Due: 9. 'Out There' geojson file
Find a 'geotagged' set of data that you think is interesting. Search the web using searches such as "geotagged political data" , or "geojson weather"

Some places to find data: The data has to:
  1. Have longitude and latitude coordinates.
  2. Be in geoJSON, CSV, JSON or KML format.
If the data set is not in geoJSON format, convert it to geoJSON using one of the following utilities.
Due: Comments on assigments
Write a comment for each fellow student about their assignments 7 and/or 8.
W 5/13) Data Layer continued.
Due: 10. 'Out There' Project Part 1
Load the data you worked with in a map. Style the data and the map.
Example:
Mapping two data files
M 5/18) Slack Lab
Work on your "Out There" Project
W 5/20) Zoom Lab
Meet up in zoom to get help with project.
M 5/25) Slack Lab
Work on your "Out There" Project
W 5/27) 'Out There' Project Presentations
Due: 11. 'Out There' Project
Make a map using two or more data sets. Add to the map you started last week (or if you have a new idea you may use new sets of data).

Think about what you learned from your map, and the message/idea/story the map conveys. Style the map and the data layers to help further any lessons/stories/ideas expressed in the map.
M 6/1) Slack Lab (or individual Zoom with me, let me know via Slack)
Work on your final project.
W 6/3) No Zoom Meeting (Have a great Summer!)
Due: 12. Final Project
Select the map you made in class that you like the best. Make it even better! Add to it, fix errors, update colors, make better icons, add another layer of data, whatever seems fun and interesting to try. In the end the map should be without errors, and redy to be exhibited.

Make another webpage with the project title and a description of your project. Link to the map from that page.

I will make a class exhibition page linking to all the projects.