Living Campus

Overview

The Living Campus project is an interactive web map that allows users to locate and explore donated trees and campus objects at Bryn Mawr College.

As mentioned in Bryn Mawr College's Fall 2019 Bulletin about the project, the primary goal was "to create a searchable site that descendants and others can use to look up a particular bench or tree, find out where it is located on campus, and view photographs and other information about it online."

The map is built using LeafletJS and renders geographic data points representing trees and campus objects across Bryn Mawr's campus.

Tech Stack

• HTML
• CSS
• JavaScript
• LeafletJS
• GeoJSON

Data

The dataset includes information about 190+ campus objects such as trees and benches along with their geographic coordinates and descriptive metadata. These records are stored in CSV and GeoJSON formats.

The GeoJSON data contains geographic coordinates and metadata for each object. These coordinates are used to generate markers on the Leaflet map, enabling users to interact with the dataset visually.

Personal Contributions to the Project

I implemented a search feature in JavaScript that allows users to locate trees and objects by name. The feature scans the dataset for matching entries and highlights the corresponding marker on the Leaflet map, allowing the user to quickly navigate to the selected object.

Implementation

The search functionality is implemented in JavaScript by iterating through the dataset and comparing each object's name to the user's search query. When a match is found, the map automatically centers on the corresponding marker and displays its popup information.

When a search result is selected, the map automatically centers on the corresponding map marker.

Challenge

Initially, the search functionality could only query a single dataset at a time. The map data was divided into two groups – trees and campus objects (such as benches and other donated items). Because these datasets were stored separately, the search logic was only able to iterate through one group at a time.

To resolve this, I updated the data structure so that both datasets could be accessed by the same search function. This allowed the search feature to iterate through all objects on the map and return results across multiple categories.