MAP673 - Design for Interactive Web Mapping

MAP 673: Design for Interactive Web Mapping

This course 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.

Module 01: Creating a Dynamically Drawn Choropleth Map

This lesson provides instruction on how to create a dynamically generated choropleth map in Leaflet with an accompanying legend. It also explains how to use the JQuery JavaScript library to load an external data file using AJAX. The lesson:

  • reviews the technology stack (HTML, CSS, JavaScript)
  • ensures proper configuration of a local development environment, and using a proper file/directory structure
  • reviews the workflow for creating an interactive web map using the Leaflet.js library for representation and user interaction
  • reviews how to read and employ API documentation
  • provides instruction as to the layout of the map using CSS (i.e., full extent of the browser window, placement of HTML elements using absolute positioning, etc)
  • introduces the JQuery JavaScript library
  • creates a dynamically drawn and classified web map
  • creates a dynamically drawn legend

The lab component practices these techniques while developing a "critical map literacy" among students.

Module 02: Toward Advanced User Interaction In Web Maps

Module 01 used an AJAX request to dynamically request a GeoJSON data file and load it into the script after the DOM had loaded. We then wrote functions to normalize and classify the data on the fly, appropriately color a choropleth map, and dynamically create a legend depicting the class ranges. Within this lesson, we learn how to extend this code to build a user interface element allowing the user to choose a new data attribute to dynamically update the map and legend. We also consider a technique for building an information panel.

The lesson and lab:

  • introduces Map Shaper client and command line for data preparation introduces the JQuery JavaScript library and DOM element selections
  • instructs technique for asynchronously loading an external GeoJSON file using JQUERY/AJAX
  • builds code allowing users to re-express the drawn data and update the legend using a UI widget
  • utilizes more JQuery methods for the selection and manipulation of DOM elements
  • considers layout options using CSS for visual enhancement of the user interface

Module 03: Client-side data processing and UI enhancements

In previous modules we used an asynchronous HTTP request to load our GeoJSON data into the script at runtime. 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 a HTML standards-compliant UI slider widget allowing the user to sequence through temporal data attributes and update the thematic map.

  • uses multiple asynchronous HTTP requests to load geometry and data into the map script
  • builds nested looping structures to bind attribute data to geometries within the client browser at runtime
  • builds a HTML standards-compliant UI slider widget allowing the user to sequence though temporal data attributes and update the thematic map
  • considers additional UI adjustments to improve usability of the map

Module 04: Mapping Workflow Part I – Toward the elements of the User Experience

This module and the following one walk us through a typical, though somewhat simplified, 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 design and development process at a more conceptual level. We want to highlight the points when design decisions are made. For this lesson, we'll be using another JavaScript mapping library named Mapbox.js. Like CartoDB's JavaScript library, Mapbox.js is built upon Leaflet.js. Consider it a "wrapper" for Leaflet.js, which extends Leaflet's functionality. That is to say, the methods, options, and events that are available through the Leaflet API are all available within the Mapbox.js library as well. Much like Leaflet's many useful plugins, there are additional plugins for Mapbox.js that extend its functionality. This lesson:

  • introduces user experience (UX) design through user-centered design, the use of personas and scenarios, and the element of the user experience
  • considers the product objectives and user needs of an example case study
  • covers the development of functional specifications and content requirements of a map product
  • covers principles of applying interaction design and information architecture to map development (including data wrangling, building a boilerplate, and loading data into the map)

Module 05: Mapping Workflow Part II – Data Representation, UI Prototyping, and Refinement of the Map

This lesson continues from lesson 04 to guide us through a complete web mapping workflow. We left off in lesson 04 with the data organized in a particular way and loaded into the script. The next step is to provide the code that will represent these data in a cartographically thematic way. However, choosing particular paths and moving forward through a mapping process does not always guarantee success. At times there is a need get the data processed and visualized on the map quickly, which is what's known as a prototype, before committing to polishing and enhancing the map. The lesson covers:

  • principles of cartographic interaction (what, why, when, to whom, where, and how)
  • applying information design, interface design, and navigation design to map development
  • developing a wireframe mockup and paper prototyping
  • developing novel representation solutions
  • providing user enablement to sequence through the data
  • refining the sensory plane: CSS design

Module 06: Advanced mapping techniques with CartoDB.js

This lesson explores the JavaScript library supporting the CartoDB platform, CartoDB.js, which expands the potential of CartoDB's web editor for creating customized web maps. The lesson introduces the API documentation and demonstrates various techniques for requesting data from a personal account on CartoDB to render a map in the browser. The lesson:

  • integrates a web-based database platform (CartoDB) within the web mapping development and deployment process
  • reviews extension of Leaflet’s API through the Cartodb.js library
  • introduces CartoDB’s SQL library for querying data and updating a map
  • integrates PostGIS functionality within a user-driven mapping scenario

Module 07: Data-driven thematic web mapping with D3.js

This lesson introduces the D3.js visualization library and applies it to web mapping. The lesson:

  • familiarizes students to D3.js through building a simple vector web map
  • applies basic interaction to the D3 web map
  • introduces queue.js for loading external files using AJAX
  • introduces the TopoJSON data format
  • plots point-level data from a CSV file
  • creates a proportional symbol map from these points
  • uses a range input slider to filter the data
  • draws a projected choropleth map

Modules 08 through 10: Independent Final Map Project

MAP673 and the New Maps Plus Certificate culminate in an independent project of substantial work and quality. The goal of this final project is threefold:

  • challenge you to synthesize a range of technical and conceptual knowledge gained throughout the New Maps Plus courses to produce a novel and effective web map
  • provide you with a chance to procure your own data relating to a meaning topic of your choosing, and in doing so allow you to explore and experiment with additional mapping techniques not covered within course lessons
  • give you a strong portfolio piece celebrating your skills and demonstrating your talent to employers, potential clients, and the wider geospatial community

Weekly deliverables include a written overview of the topic, a formal map proposal, a working prototype of the complete map, a beta version of the complete map (hosted and served over the web and available for peer review and critique), and the final map hosted within the student's personal web portfolio. Students also create a 5-minute video presentation of their beta map to share with their peers for a map critique exercise

In Front Previews: