Web GIS: An Introduction to Digital Mapping
Spring 2021: DH 151
Instructor: Yoh Kawano (yohman@gmail.com)
Time: Mondays 2:00 – 4:50pm
Office Hours
Time: Thusdays 1:00 - 3:00pm
Schedule here:
Or email me to schedule a different day/time
Pre-class Survey
- Make sure to take this survey before class begins
Office hours
Thursdays 1pm-3pm
- Schedule here: https://calendly.com/yohda/officehours
Or email me to suggest a different date/time.
Overview
As a digital humanist, you are at the crossroads of three simple inquiries: Where did it happen? When did it happen? Why did it happen? Space and time are forever interlinked, and the digital revolution has made it such that the visualization of the “spatial” and the “temporal” brings possibilities to interrogate, analyze, reveal, narrate and discover new dimensions that may otherwise remain dormant in its original state. In today’s Internet centered, social media frenzied society, spatial data is becoming one with the web. Twitter, Facebook, TikTok, Google Maps, Leaflet are examples of geospatial technologies centered around the notion that “location,” “mobility,” and “time” are correlated, and they matter. Humanists are asking new questions, demanding justice from data that did not exist a decade ago, resulting in the creation of compelling web-based mapping applications that are empowering the public to become online cartographers.
The purpose of this course is to implement and examine such web-based technologies. Students will develop the knowledge and skills necessary to plan, design, develop and publish web-based digital mapping solutions. Students will learn how GIS on the internet differs from the desktop experience, and how to prepare spatial information for the web. Although no prior programming experience is required, the course is specifically designed to bring out the “coder” in the “non-coder,” and will teach the basics of internet programming languages. Different web technologies will be explored, including GitHub, HTML, CSS, Javascript and Leaflet.
It should be noted that the course is primarily a programming class. On top of the web-GIS discussion, we will cover the technical details about web servers and networks that are necessary for a solid and comprehensive understanding of web technologies and web programming in general. Students will be expected to fully code and produce a functioning interactive, database driven mapping website.
Class format
The class will be conducted as a studio course, and students will form groups to deliver full-fledged GIS websites according to their research interests. Pedagogic strategies to use a studio based approach is to provide students with a project based environment that strongly resembles the multiple phases required in any web development project team. The studio aims to encourage students to work in collaborative and cooperative activities, and to present ideas as collective group presentations.
The class will meet once a week, and will consist of a combination of short lectures, hands on training on different web technologies, and a segment dedicated for studio project group activities. In addition, I hope to invite current practitioners in the field of web-based GIS as guest speakers and lecturers. Students will be assigned weekly readings and assignments geared to train them on the technical skills necessary. These assignments must be completed prior to coming to each class, and students will be asked to demonstrate their grasp of these technologies via class participation and discussions.
Assignments and Evaluation
All assignments, unless otherwise specified, must be posted in the discussion section category for "Assignments" by midnight of the Sunday prior to our class on Monday. Assignments are posted in each week's page, so make sure to read them carefully.
- Participation 10%
- Individual assignments 20%
- Group assignments 20%
- There will be four group assignments throughout the quarter. Each assignment will be worth 25% of the total group assignment grade.
- Mid-term 20%
- Final report 30%
| Task | Number of items | Points |
|---|---|---|
| Participation | 1 | 100 |
| Individual assignments | 5 to 7 | 40 points per assignment |
| Group Assignments | 4 | 50 points per assignment |
| Mid-term | 1 | 200 |
| Final project | 1 | 250 |
Grading criteria
All assignments are graded on the following criteria:
- Timeliness: Unless otherwise specified, all assignments are due at midnight of the day before the next class. For most assignments, you will be asked to submit them as files on your github account, and then to submit a post in the discussion section of this site. The timestamp on the files on your github account, along with the timestamp on the discussion post will be used to determine whether they were submitted on time. Any late assignments will be marked down 10% per day that it is late. For example, for assignments that are worth 10 points, you will get 9 points for submitting it a day late, 8 points for being two days late, and so forth.
- Cleanliness: Nobody wants to go through unreadable code! Make sure to document your work accordingly, providing comments throughout, and to indent your code accordingly.
- Does it work?: All web assignments must run without any errors.
- Thinking out of the box: It is easy to copy an existing lab, and replace datasets and parameters to fulfill an assignment. But how well have you/your group grasped the underlying concepts? This can be demonstrated by your ability to think outside the box, and applying rather than copying each step of a given assignment. For example, you may experiment with functions not demonstrated in class, or create your own workflow that borrows certain concepts learned in class and/or taken from outside material to make them your own.
Weekly schedule
Topics and lecture plans subject to change:
| Week 1: Intro to Web GIS | |
|---|---|
| Lecture |
|
| Lab |
|
| Assignments |
|
| Week 2: Spatial Narratives-Story Maps | |
|---|---|
| Lecture |
|
| Lab |
|
| Assignments |
|
| Week 3: It's all about data | |
|---|---|
| Lecture |
|
| Lab |
|
| Assignments |
|
| Week 4: Building a narrative-Storyboarding | |
|---|---|
| Lecture |
|
| Lab |
|
| Assignments |
|
| Week 5: User Interface Design | |
|---|---|
| Lecture |
|
| Lab |
|
| Assignments |
|
| Week 6: Midterm presentations |
|---|
| Week 7: Census Data | |
|---|---|
| Lab |
|
| Assignments |
|
| Week 8: Data API's | |
|---|---|
| Lab |
|
| Assignments |
|
| Week 9: Time | |
|---|---|
| Lab |
|
| Assignments |
|
| Week 10: Data Analytics | |
|---|---|
| Lab |
|
| Assignments |
|
| Week 11: Final presentations |
|---|
Studio Group Projects
Students will be tasked to create a web-based mapping site for researching neighborhoods that may include queryable statistical layers on demographics, housing, transportation or other planning related datasets. In addition, projects must incorporate “streaming” data sources from online data providers such as Twitter, Metro LA, US Census, or other open data portal datasets.
Within the first 5 weeks of the course, students will be asked to submit, as well as present to the class, a proposal, scope and development plan for their portion of the website. Initial tasks will include:
a web design strategy to understand web based user experiences and designing effective user interfaces research available data for your topic and put together a data plan come up with a full web-site proposal (including wire-frames, screenshot sketches and diagrams, timelines and budget) research of available web technologies and come up with a technology assessment compiling query-able spatial data layers, designing an intuitive user flow and interface for their data, and developing an interactive maproom using Leaflet and MySQL (or comparable technologies). A weekly “Thinking captain’s” blog entry that reflects on the student’s understanding on the technologies covered and how it relates to their project Week 6 will be reserved for project presentations, and weeks 7-10 will be dedicated towards development time, and will focus heavily on studio work.
The final product will result in an intuitive, searchable, map-based website, and will be used by future humanities students as well as the general public.
Why you should consider taking this course
- Learn how and why governments and non-profits are shifting to the web for their GIS solutions
- Learn the principles of web-based cartography
- Learn about user interface, user experience, and graphic design
- Learn web design skills specific to creating internet mapping solutions
- Learn about API’s (Application Programming Interface) and how to leverage technologies like Google Maps and Leaflet
- Learn how to publish map services using ArcGIS Server and MySQL
- Get practical, hands-on instructions on the basic concepts of building a web-GIS platform
Technology skills you will learn
- WordPress
- HTML
- CSS/Bootstrap
- Javascript/jQuery
- MySQL
- Leaflet Javascript API
- ArcGIS Server
Readings/Textbooks
Hands-On Data Visualization: Interactive Storytelling from Spreadsheets to Code
- Jack Dougherty, Ilya Ilyankou
- Michael Dorman
Remote zoom learning expectations
Welcome to the new normal. It is expected that the quarter will be conducted remotely and via zoom in its entirety. The good news is that this course—coding, data, maps!—is situated perfectly for remote learning. Nevertheless, there are some expectations and guidelines I would like to enforce in order to make this experience as fruitful and productive for all of us. First, make sure that your Internet connection and equipment are set up to use Zoom and able to share audio and video during class meetings. Let me know if there is a gap in your technology set-up as soon as possible, and we can see about finding solutions.
Recording of class sessions
All synchronous classes will be recorded via Zoom so that students in this course (and only students in this course) can watch or re-watch past class sessions. Please note that breakout rooms will not be recorded. I will make the recordings available on CCLE as soon as possible after each class session (usually the day after the class meeting). Recordings will live in our CCLE website.
Please note that you are not allowed to record the class yourself or share the class recordings. This is to protect your FERPA rights and those of your fellow students.
Sharing video
In this course, being able to see one another helps to facilitate a better learning environment and promote more engaging discussions. Therefore, our default will be to expect students to have their cameras on during lectures and discussions. However, I also completely understand there may be reasons students would not want to have their cameras on. If you have any concerns about sharing your video, please email me as soon as possible and we can discuss possible adjustments.
Note: You may use a background image in your video if you wish; just check in advance that this works with your device(s) and internet bandwidth. Also, having a profile picture on your Zoom account helps humanize your presence in the course at times when you need to shut the camera off.
Parents
Parents deserve access to education. At all times, I strive to be inclusive to parents, and now, in our virtual learning space, with many children learning from home or schools facing sudden closures, we can expect children to be present in class from time to time.
- All breastfeeding babies are welcome in our synchronous sessions as often as is necessary to support the breastfeeding relationship. I'd never want students to feel like they have to choose between feeding their baby or continuing their education.
- Children may be visible onscreen during class sessions, either in your lap or playing in the background. Alternatively, you may turn your camera off if more privacy is required.
- Parents or caregivers who anticipate having a child(ren) with them during class sessi ons are encouraged to wear a headset to help minimize background noise. You may mute your microphone and communicate through the chat feature at any point necessary.
- Stepping away momentarily for childcare reasons is completely understandable and expected. Simply mute and/or turn off your camera as necessary, and rejoin us when you are able.
- I ask that all students work with me to create a welcoming environment that is respectful of all forms of diversity, including diversity in parenting status.
- I hope that you will feel comfortable disclosing your student-parent status to me. This is the first step in my being able to accommodate any special needs that arise. While I maintain the same high expectations for all student in my classes regardless of parenting status, I am happy to problem solve with you in a way that makes you feel supported as you strive for school-parenting balance.
How to ask a technical question
Given the nature of the course, you will have many, many questions along the way. However, we ask that you adhere to the following guidelines in order to make consultations as productive as possible. Students who do not follow these guidelines will be asked to reschedule.
Before asking a question:
- Close all open programs, restart your computer, then try your task again
- Search google and stackoverflow for the topic/problem (for example, the name of the function you're struggling with or the error message you are seeing)
- Go back through the relevant lecture materials to look for any insights
- Go back through the assigned reading materials to look for any insights
If the above steps haven't solved your problem, send an email (or attend office hours) and include the following information:
- A detailed description of what you're trying to do, why, and how
- A complete minimal reproducible example of your code so far (never send screenshots of code)
- What you've already tried to do to solve your problem and what you have learned from it (specifically, explain the results of steps 1-4 above, including relevant links from stackoverflow etc)
Statement of Affirmation
I intend to make this classroom a space that affirms all identities and perspectives, including your race, color, national origin, ethnic origin, ancestry, marital status, religion, age, sex, gender, gender expression, gender identity, transgender status, pregnancy, physical or mental disability, medical condition, genetic information (including family medical history), sexual orientation, political ideology and affiliations, citizenship, or service in the uniformed services. Regardless of background, all students have a right to an equitable education. Because of the multi-faceted and complex nature of our identities, it is imperative that we are committed to affirming one another’s perspectives as a community for all enrolled in this course. I encourage all members to embrace and learn from the diversity in this classroom, school, and university. I want to highlight that discrimination, harassment, or forms of hateful transgressions will not be tolerated in our learning environment. If you have any recommendations about how to make our environment more inclusive please feel free to let me know.
Accommodations based on disability
If you are already registered with the Center for Accessible Education (CAE), please request your Letter of Accommodation on the Student Portal. If you are seeking registration with the CAE, please submit your request for accommodations via the CAE website. Please note that the CAE does not send accommodations letters to instructors--you must request that I view the letter in the online Faculty Portal. Once you have requested your accommodations via the Student Portal, please notify me immediately so I can view your letter.
Students with disabilities requiring academic accommodations should submit their request for accommodations as soon as possible, as it may take up to two weeks to review the request. For more information, please visit the CAE website (www.cae.ucla.edu), visit the CAE at A255 Murphy Hall, or contact by phone at (310) 825-1501.