Map673

MAP 673-201: Programming for Web Mapping

Course description

MAP673 integrates the principles of geographic representation and web programming in order for students to develop high-quality interactive web maps. Students will design interactive web map projects that appropriately represent spatial data in order to serve end-user goals of map engagement and visual communication. The course will train students to compose interactive maps within the context of a coherent web page layout, including the development of supplementary content (such as text and metadata) to aid in visual storytelling.

Learning objectives

After completion of this course, students will be able to:

Course format and strategy

MAP673 course is composed of 10 modules, the first part consisting of a lesson which introduces key conceptual topics, provides resources for further reading and viewing, and simple tutorial-style explanations of procedural knowledge. Lessons may then have tasks for students to complete ranging in format from engaging with a class discussion, writing short reflection pieces, completing simple quizzes, or implementing lesson examples.

Overview of course modules

Module 01: Designing a mobile-first responsive web portfolio

The primary objective of this module is to guide you through creating a web portfolio for sharing all the fabulous maps you’re creating in the New Maps Plus program. The lesson will introduce you to “responsive” design, which uses a “mobile-first” approach to ensure content displays optimally across browsers and devices of different sizes. We’ll also explore the benefits and drawbacks of using an established CSS template or framework before moving on to employ Bootstrap for our purposes.

Module 02: User interaction in web maps

Web mappers often use an AJAX request to dynamically request a GeoJSON data file and load it into the script after the DOM had loaded. Within this lesson, we extend this code to build a user interface (UI) element allowing the user to choose a new data attribute to dynamically update the map and legend.

Module 03: Client-side data processing and UI enhancements

Within this lesson, we consider a technique for making multiple asynchronous HTTP requests to load geometry and data into the map script as separate requests (i.e., separate files).

Once we do this, we use a nested looping structure to bind attribute data to geometries within the client’s browser to create a choropleth map. We then build an HTML standards-compliant UI slider widget allowing the user to sequence through temporal data attributes and update the thematic map by dragging a slider widget.

Modules 04 and 05: Diving Deep into The User Experience, UI Interface Prototyping, and Web Map

Modules 04 and 05 walk us through a typical web mapping process from start to finish. The goal is not to delineate the specific techniques one would always follow for making a web map, but rather to think through the data, design, and development processes at a more conceptual level. We want to highlight the points when design decisions are made and then about how to implement them technically when we build our web map.

Module 06: Data-driven web mapping with D3

This lesson introduces D3, one of the best JavaScript visualization libraries available. Students learn what D3 is, how to implement it within web mapping development process, and how to achieve representation and interaction objectives using it (including custom map projections).

Students addtionally begin to identify potential final project topics and datasets.

Module 07: Thematic web cartography with D3

This lesson continues a gentle exploration of the D3.js visualization library. Students are instructed through the process of building a bi-variate thematic map. Students then modify the interface to create an interactive proportional symbol map.

Students also narrow and specify their final project topics using user-centered design processes.

Modules 8, 9, and 10: Final projects

Students are guided through the creation of a final project. Alpha and beta-stage map deadlines are followed by a peer-critique exercise informing the final deliverable.

.