Web Walking Tour

This library provides a framework for the creation and implementation of a map-based guided tour, delivered through a browser. The library was created as a teaching tool for an advanced cartography course at the University of Wisconsin-Madison, for students with little to no programming experience, and beginner HTML/CSS skills. As such, this framework is designed to help develop graphic design skills through HTML/CSS (without touching JS). On a theoretical level, the creation of map-based guided tour allows students to explore the relationship between maps and places that are mapped.

For those more familiar with JavaScript, the libary can be easily adapted to new pedagogical and practical contexts. The library is built using Leaflet, Bootstrap, and Papa Parse.

The library currently utilizes sample content created for a Green Stormwater Infrastructure Tour created in partnership between the UW Cartography Lab, and Wisconsin Sea Grant.

Examples

These examples are student projects from the Fall 2024 semester of Geography 572: Graphic Design in Cartography at UW-Madison.

Wisconsin Avenue, how did you get here? by Christina Dennis (portfolio)

Small Green Spaces in East Madison by Alton Hipps (portfolio)

Keep Willy St. Weird: A Walking Tour by Brynn Patrello (portfolio)

Women of UW Madison Walking Tour by Chloe Chan (portfolio)

Urban Parking Walking Tour by Will McAllister (portfolio)

Getting Started

Begin by downloading the zip file of the library (main.zip), or cloning it to your local computer.

Structure

The Web Walking Tour is structured through a single webpage interface. The tour itself is comprised of stops and a route, both presented on a slippy map interface. Each stop is a point location, while the route is a linestring between each stop. When a stop is selected, it opens a modal interface presenting images and text about the selected stop.

• index.html: Main HTML page from which the tour is delivered.
• assets: Contains the two files which control the tour stops and route.
  • stops.csv: This file contains information about individual stops, including the stop name, description, image, and the lat/lon of its location. (more below)
  • route.geojson: This file contains geographic information regarding routes between each stop.
• img: Contains all images shown on either the main page, or at individual tour stops
• audio: Contains audio files which can be linked to each tour stop.
• css: Contains style.css which controls the style of the interface.
• lib: Contains external JS/CSS dependencies.
• js: Contains main.js, the file which builds tour functionality.

Documentation

index.html

index.html contains two custom HTML parameters which allow you to change the tour basemap based on those in the Leaflet provider's demo, or a custom UTL. Both are found within the <div id='map'>.

data-basemap: Link to the basemap tiles. Default: "https://tile.openstreetmap.org/{z}/{x}/{y}.png"

data-attribution: Basemap attribution. Default: '© OpenStreetMap contributors'

stops.csv

• id: The order of the stop in the tour. I.E. 1 for the first stop, 2 for the second, etc.
• name: The name or title of the stop. This will appear at the top of the selected stop modal interface.
• audio: The file name of an audio recording of the stop's text. Include the file type (i.e. audio.mp3). Audio recordings should be placed in the audio folder.
• lat: Latitude (y) of the stop location (decimal degrees).
• lon: Longitude (x) of the stop location (decimal degrees).
• text: Text content of the stop used to articulate its importance. Values in this column will be read as HTML, so you can include more complex elements and styling.
• direction: Text that will appear in a popup above the stop on the map to provide user's with directions.
• image: Main image that will appear below the title on the stop modal interface. Include the file type (i.e. image.png). Images should be placed in the img folder.

route.geojson

This geojson file contains the linestring of the tour route. Each section of the tour between two stops is a single feature. Each feature contains a single propert.

• id: The segment of the route on the tour. i.e. 1 for the first segment of the route.