Introduction to Web Mapping - Spring 2019

Syllabus

• Course: MUSA-611 // CPLN-401, University of Pennsylvania

• Location: Meyerson Hall B2

• Schedule: 2-5PM, Fridays

• Instructor:

  • Nathan Zimmerman, [email protected]
  • Ross Bernet, [email protected]

• Teaching Assistant:

  • Huiling (Ling) He, [email protected]

• Office Hours:

  • Nathan Zimmerman: 12:30 - 1:30pm Fridays @ The Graduate Student Center
  • Ross Bernet: 10:30 - 11:30am Fridays @ The Graduate Student Center
  • Huiling (Ling) He: 7:00 - 9:00pm Wednesdays @ Education Commons
    • Room may vary. 1/23 is in room 230

• Need help?

  • 
  • Internet Search (stack overflow is your friend!)

• Map-based Web Application Examples

• Data Sources

Software

• Atom
• git

Supplementary resources

• You Don't Know JS - A set of free online books which start from scratch and go, in-depth, into javascript concepts and best practices.
• Mozilla Developer Network - Javascript reference materials (highly authoritative)
• Eloquent Javascript - This is a free book with some advanced content. As you think about the application you might like to build for your final, the chapters on HTML forms, drawing with javascript, building a game, and constructing your own painting application will push further than we can in class.

Course outline

Throughout this 15 week course, you'll be learning to program applications using HTML, CSS, and Javascript. In addition to programming skills, we will stress the "tools of the trade": you will use a text editor designed for programming; your code will be turned in with git and managed through github. You will be programming in the same way and with some of the same tools as software developers in the industry.

We'd like to keep the course somewhat freeform — there are basic skills which must be touched on, but your interests will help shape the direction to a large extent. There will be a self-directed final assignment that can take on any topic you find interesting (so long as you use some tools from our class).

This syllabus is a living document. As the course progresses, greater detail will be added to reflect the content of each week.

Grading scale

Grade	Score	Grade	Score	Grade	Score
A+	97–100	B+	87–89	C+	77–79
A	93–96	B	83–86	C	73–76
A-	90-92	B-	80–82	C-	70–72

• Assessment Method / Grading Criteria:
  • Participation, attendance, and homework: 50%
  • Midterm Project: 15%
  • Final Project Proposal: 5%
  • Final Project: 30%

Weekly repositories

Each week will have a different repository with the seed for that week's assignment. Turning in an assignment will consist of editing the template project provided as a part of each week's repo and uploading your changes to github. Assignments are due (on github) before the next week's class.

Midterm project

We will provide a menu of appropriate features for an application to be programmed midway through the course (in a lab and at home with a completely open book). This assignment will stress the basics of open-source, online mapping applications.

Final project

The final assignment for the class will be decided through a project proposal. Final projects will be done in groups or independently— criteria for success will be hammered out in the final project proposal and group projects (if we have any) will be expected to engage with a wider scope and greater difficulty than individual projects. Group projects will also leverage the power of github to make collaboration simpler and more transparent for grading purposes (this will make more sense once you're familiar with github).

Course Schedule

Week 1 - Getting started

• Introductions and university boilerplate
• Using Git and Github (using the git CLI - we will revisit this almost every class)
• Github's Atom Text Editor + javascript extensions
• First steps with Javascript (playing in the console)
• Editing your first online map

Week 2 - Writing code

• JS Review:
  • Data types
  • Variables
  • Conditions
  • Functions (a topic we will continually return to)
• Libraries and imports

Week 3 - Working with data

• Review:
  • Arrays
  • Writing loops
  • Iterators (this is an extension to our prior work with functions)
  • Objects
• Lab:
  • Function anatomy and thinking functionally
  • Underscore functions
  • Refactoring code

Week 4 - jQuery

• Github review
• Introduction to jQuery

Week 5 - HTML & CSS

• HTML structure
• jQuery selectors

Week 6 - Advanced leaflet cartography

• APIs
• Geojson
• Where to find spatial data

Week 7 - Midterm lab

• In class (collaborative!) work on midterm project

Week 8 - Midterm presentation & discussion

• Midterm presentations
• Discussion of direction for future classes
• Code review, discussion of best practices

Weeks 9-15 - Possible directions

• Turf
• Spatial SQL
• Mapbox
• Leaflet Draw
• D3/Chart.js
• Bootstrap
• Using the command line
• Python
• Advanced debugging
• Vector tiles
• node.js (writing javascript for the server)

Academic Integrity

In compliance with Penn's Code of Academic Integrity, blatantly and egregiously copying another student's work will not be tolerated. However, because this course is designed to help prepare students for work in professional programming environments, copying and pasting is not universally prohibited: we encourage students to work together and to freely use the internet as a resource for finding solutions to vexing problems. Citing every copied and pasted line of code is not necessary. Large patterns or multiple lines of code taken from external sources should, however, be noted with in-code comments. If an instance is unclear, you should feel free to speak with the instructors.