---

Web Mapping

A Workbook for Interactive Cartography and Visualization on the Open Web

Robert Roth, Carl Sack, Gareth Baldrica-Franklin, Yuying Chen, Rich Donohue, Lily Houtman, Tim Prestby, Robin Tolochko, Nick Underwood

Cite/Attribute as: Roth RE, CM Sack, G Baldrica-Franklin, Y Chen, R Donohue, L Houtman, T Prestby, R Tolochko, and N Underwood. 2020. Web Mapping: A Workbook for Interactive Cartography and Visualization on the Open Web. Version 0.1. University of Wisconsin Cartography Laboratory: Madison, WI. DOI: 10.5281/zenodo.4685763

---

About this Workbook

This workbook introduces the practical skills needed to develop interactive maps and visualizations on the open web. Compared to a traditional textbook, this workbook utilizes a "spiral" curriculum of short but interconnected lessons that incrementally build proficiency in interactive cartography and visualization.

The technological landscape for web mapping and visualization is broad, and this workbook is intended as a partial entry point rather than a comprehensive survey. Specifically, the workbook covers core open source web technologies, including the HTML, CSS, and (in particular) JavaScript languages and the Leaflet.js and D3.js web mapping and visualization libraries. Throughout, Github is used as the primary teaching and learning platform. This workbook is free to use, share, and extend as an open educational resource following a CC-BY license.

The workbook is funded by NSF CAREER #1555267 and is meant to be a living resource updated by the University of Wisconsin Cartography Lab. Version 0.1 is a work-in-progress as we migrate materials to Github, but is stable for classroom instruction. Version 1.0 will be released May 2021.

Table of Contents

Introduction

Unit 1 - Workflows and Data

• Chapter 1 - Setting Up Your Workspace
• Chapter 2 - Scripting and Debugging
• Chapter 3 - Data and AJAX

Unit 2 - Designing with Leaflet

• Chapter 4 - Leaflet Foundations & Using Online Resources
• Chapter 5 - Dynamic Mapping with Leaflet
• Chapter 6 - The Internal Logic of Leaflet
• Chapter 7 - Collaborating with Github

Unit 3 - Designing with D3

• Chapter 8 - D3 Foundations
• Chapter 9 - Mapping in D3
• Chapter 10 - Coordinated Visualizations
• Chapter 11 - Coordinated Interactions

Technical Skills

This workbook covers foundations in several coding libraries used for different web mapping applications. These include:

• JQuery 3.4.1
• D3 6
• Leaflet 1.6

Foundational Knowledge

While this workbook outlines the fundamental aspects of web cartography and visualization, including coding tutorials, it does assume a basic knowledge of programming concepts.

• If you do not have any programming experience, we recommend first completing the Learn How to Code broad overview of programming concepts (~1 hour).

• If you do not have experience with HTML or want a refresher, we recommend completing Lesson 1 (and only Lesson 1) of the Introduction to HTML Tutorial (~1 hour).

• If you do not have experience with CSS or want a refresher, we recommend completing Lesson 1 (and only Lesson 1) of the Introduction to CSS Tutorial (~2 hours).

How to Use this Workbook

This workbook and its resources can be downloaded directly from Github for individual use. Each Chapter folder contains the chapter content, as well as any data and files referenced.

If you're an instructor using Canvas (or a similar LMS), and want to incorporate book materials directly into a course site, additional steps are necessary.

1. Download the workbook.
2. Convert Markdown files to HTML
   1. Each chapter contains one Markdown file with chapter content. To view this information in Canvas, it needs to first be converted to HTML.
   2. Use our HTML-to-MD tool to convert each Markdown file.
3. Upload HTML to Canvas page
   1. Create a new page in Canvas.
   2. In the top right of the editor, select "HTML Editor"'.
   3. Copy the selected HTML file into the page.
4. Repair image links
   1. Upload all Chapter images (stored in an "img" folder in each Chapter) to Canvas.
   2. Now, each image will have its own URL on your canvas site.
   3. Replace the relative image links in the HTML with your new uploaded image links.

Past Examples

This workbook was originally created for an Interactive Cartography and Geovisualization course at the University of Wisconsin - Madison. To see examples of past student work, please visit https://geography.wisc.edu/cartography/education/G575/G575SP2020.html.

This work is licensed under a Creative Commons Attribution 4.0 International License.
For more information, please contact Robert E. Roth (reroth@wisc.edu).