GEOG571: Advanced Web Mapping

Instructor: Bo Zhao, [email protected] | Office Hours: M 1600 - 1900 or by appt. @WLKN 210

Lecture: MWF 0900 - 0950 @WLKN 210 | Lab: T 1200 to 1350 @WLKN 210

Catalog course description: WEB MAPPING (4).

Concepts and techniques of web programming, digital storytelling, online project management, and web-based cartographic principles for eveloping, evaluating, and using web maps. Lec/lab.

Welcome to GEOG571:Web Mapping 🌎! This course introduces concepts and techniques of web programming, digital storytelling, online project management, and web-based cartographic principles for developing, evaluating, and using web maps. To promote the equal access to web mapping technology, we ensure all the web mapping applications from course materials can be opened, debugged or further developed in either Windows or Mac OSX operating systems, and all the relevant software or services are either open source or free. This course is comprised of two major components, including lectures and lab exercises. The lectures focus on the theories and principles behind web mapping, including system architecture, responsive user graphic design, map design and geo-narrative. The lab exercises focus on practical skills for web programming, 2d and 3d web mapping, web mapping services, and digital storytelling. In addition, there will be random quizzes focusing on prior lecture materials, a mid-term focusing on basic concepts and web programming techniques. Although there is no final exam, but each student is expected to design a web map and deploy it to an openly accessible server (e.g., GitHub). From this course, students can learn both the principles of web-based cartography and the practical skills for web mapping, and develop the capabilities of map aesthetics and critique. The course schedule might be slightly changed due to the rate of progress, the latest schedule will be on the github repository frontpage. If you have any question about this course, feel free to contact Dr. Bo Zhao for more information. 🙋

Gear up the Working Environment 💻 ☁️ 🌎 🍺

Week	Lecture (M)	Lecture (W)	Lab (M)	Lecture (F)	Reading
Wk 01	Intro to the Course, Gear Up! ⚙️	Internet Fundamentals	Lab 1: Project Management for Web Mapping	Intro to Web Mapping	Markdown, Links and Command Lines
Wk 02	Web Programming Basics I: HTML 5 and CSS	System Architecture for Web Mapping	Lab 2: Web Programming Basics II: Javascript	Web Programming Basics III: JQuery	HTML, CSS and Javascript
Wk 03	MLK Day	Web Programming Basics IV: Debugging and debugging 🐛, Final Project Guidelines	Lab 3: Web Map Design	Spatial Data for Web Mapping	Cont'd with last week's reading Leaflet and GeoJson
Wk 04	Map Client I: Basics and Geographic Features	Map Client II: Map Events and Mashup	Lab 3: Cont'd	Map Client III: Web Map Interaction	GeoServer Documentation
Wk 05	Map Server I: Intro to GeoServer	Map Server II: Styling	Lab 4: Web Map Services and Basemap	Map Server III: Web Map Services	Bing Map Tile, WFS and WMS
Wk 06	Map Server IV: Base Map Design using Mapbox	Map Server V: Map Tiles	Lab 4: Cont'd	Midterm Exam	Bootstrap Documentation
Wk 07	Map Design I: Web Template and Framework	Map Design II: Bootstrap	Lab 5: Story Map	Storytelling with Web Map I	Web Map Design Principles
Wk 08	Storytelling with Web Map II, cont'd with the last lecture	Map Design III: User Friendly Design Principles	Lab 5: Cont'd	3D Web Mapping I: Basics,	Cesium Documentation
Wk 09	3D Web Mapping II: Thematic Map on a Virtual Globe HeatMap	Map Design IV: Map Critiques	Lab 6: Thematic Map on a Virtual Globe	Real-Time Mapping: TweetMap	Server-Side JavaScript
Wk 10	Emerging Topics on Web Mapping	Final Project Discussion and Preparation	Final Project Discussion and Preparation	Final Project Presentation - Strand Ag Hall (GAZE) TBD	Elwood et al. (2012), Sui and Zhao (2015)

Syllabus

Course Project ⭐

• Final Project Guidelines
• Guideline (WK03)
• Proposal (WK04)
• Data Source (WK04/5)
• Interface Sketch (WK06)
• Map Critique (WK08)
• Peer Review (WK10)
• Final Presentation (WK10)

Tutorials

• Favicon
• Videos
• Images
• Iconagrpahy
• Web Fonts
• Colors
• Social media

Programming Languages

Html, CSS, Javascript, and Markdown

Desktop Software

Chrome, Atom, QGIS, and GeoServer

Web Services

GitHub, jsfiddle, Mapbox, W3Schools, and geojson.io ​

Libraries for Web Mapping

Jquery, Bootstrap, Leaflet, Storymap.js, and Cesium

Previous Years

2017 Fall

2017 Winter

• 🏆 A story map on Infrastructure for Water Management from a former student has won the environmental challenge 2017

Credits

This course material is maintained by the Cartography and Geovisualization Group at Oregon State University. Some of the material in this course are based on the classes taught at MIT and Penn State University and I have heavily drawn on materials and examples found online and tried our best to give credit by linking to the original source. Please contact us if you find materials where the credit is missing or that you would rather have removed.