/geog371

GEOG 371 -- Web Mapping @ Oregon State University

Primary LanguageHTMLGNU Lesser General Public License v3.0LGPL-3.0

GEOG 371: Web Mapping

Instructor: Bo Zhao, zhao2@oregonstate.edu | Office Hours: W 1400-1500 or by appt. @STRAND 347

Lecture: MWF 1200 - 1250 @WLKN 235 | Lab: Th 1000 to 1150 @WLKN 210

Catalog course description: GEOVISUALIZATION: WEB MAPPING (4).

Current developments in Internet mapping and advanced cartographic skills applied to web-based maps. Techniques of Internet mapping and principles of web-based cartography, including multimedia, animation, 3D visualization, and user interface design. PREREQS: GEOG 201 or GEO 301.

Welcome to GEOG 371: Web Mapping 🌎! This course introduces current developments in web mapping and advanced cartographic skills applied to interactive map design. By using open sourced libraries (Leaflet, Cesium, storymap.js, Bootstrap, jQuery), free or open source software (QGIS, Webstorm), project management services (GitHub), and web mapping services (GeoServer, MapBox), 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 lectures focus on the theories and principles behind web mapping, including system architecture, responsive design, 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. The mid-term focuses on basic concepts and web programming techniques. There is no final exam, but each student is expected to design a web map and deploy it to an openly accessible server. Feel free to contact Dr. Bo Zhao for more information. 🙋

Week Lecture (M) Lecture (W) Lab (Th) Lecture (F) Reading
Wk 00 N/A Intro to the Course Lab 1: Project Management for Web Mapping Intro to Web Mapping Markdown, Links and Command Lines
Wk 01 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 02 Spatial Data for Web Mapping, 🙌Final Project Guidelines Map Client I: Basics and Geographic Features Lab 3: Web Map Design Map Client II: Map Events and Mashup Leaflet and GeoJson
Wk 03 Map Client III: Web Map Interaction Map Server I: Intro to GeoServer Lab 3: Cont'd Map Server II: Styling GeoServer docs
Wk 04 Map Server III: Web Map Services Map Server IV: Base Map Design using Mapbox Lab 4: Web Map Services and Basemap Midterm Exam Bing Map Tile, and GeoWebCache
Wk 05 Map Server V: Map Tiles Map Design I: Web Template and Framework Lab 4: Cont'd Map Design II: Bootstrap Bootstrap docs, Kosara and Mackinlay (2013)
Wk 06 Storytelling with Web Map I Storytelling with Web Map II Lab 5: Story Map Map Design III: User Friendly Design Principles storymap.js
Wk 07 TweetMap HeatMap Lab 5: Cont'd Veterans Day
Wk 08 Map Design IV: Map Critiques 3D Web Mapping I: Basics Lab 6: Thematic Map on the Virtual Globe 3D Web Mapping II: Build a Virtual Environment
Wk 09 3D Web Mapping III: Thematic Map on a Virtual Globe Final Project Discussion and Preparation Lab 6: Cont'd Thanksgiving Break
Wk 10 Emerging Topics on Web Mapping Final Project Discussion and Preparation Final Project Discussion and Preparation Final Project Presentation Elwood et al. (2012), Sui and Zhao (2015)

Syllabus

Final Project

Texts

No required textbook, but required papers and online materials will be available on the course repository on GitHub.

Programming Languages

Html, CSS, Javascript, Markdown and GeoJson

Desktop Software

Chrome, Webstorm, Typora, 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 Winter

Credits

This course material is maintained by the Cartography and Geovisualization Group at Oregon State University. Some of the material in this course is based on the classes taught at MIT and Penn State University. We 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.