Waypoints: A Personal BioGeography

Mapping memories: An interactive travelogue handcrafted with Leaflet.js, Python, and open-source geospatial resources.

🌍 Live Site

⚠️ This project is under active development.

Table of Contents

• Project Overview
• Features
• Tools & Technologies
• Usage
• Gallery
• References
• Licenses
• Acknowledgements
• Author

Project Overview

Waypoints: A Personal BioGeography is a map-based storytelling project—an interactive memoir composed of travels, memories, and photos. What began as a simple way to pin photos on a map, so I can bore others with my vacation photos, soon evolved into a full-stack geospatial app integrating Leaflet.js, Python, and a suite of open mapping APIs.

It’s a digital keepsake, visualized through:

• Custom markers with photo carousels
• Activity overlays (e.g., hiking, snorkeling, kayaking)
• Route mapping for planes, boats, trains, and more

At its core is a flexible geospatial engine powered by GeoJSON and open-source APIs like Overpass, OpenRouteService, and Nominatim, with data managed via Google Sheets. View Data Dictionary.

Features

• Interactive Leaflet Map with zoomable, pan-able layers
• Photo Carousels in location popups
• Activity Icons & Overlays (hiking, snorkeling, sightseeing, etc.)
• Transportation Routes for air, road, rail, boat, and foot
• Custom Marker Clustering for performance and clarity
• Multi-source Geospatial Data Integration (OSM, APIs, hand-drawn)
• Interactive Guided Tour walking users through map layers, markers, and controls
• Responsive UI for desktop and mobile

Tools & Technologies

• Frontend: Leaflet.js, Shepherd.js, HTML, CSS, JavaScript
• Backend: Google Sheets API, Python (data ingestion and cleaning)
• Geospatial APIs: OpenRouteService, Overpass API, Nominatim
• Data Formats: GeoJSON, CSV
• Hosting: GitHub Pages

Usage

The project is live at johbry17.github.io/Waypoints.

To explore:

1. Navigate the map to explore custom markers
2. Click any marker to view associated photo galleries and descriptions
3. Use the layer control to toggle activities and route types
4. (Optional) Take the interactive guided tour to get oriented with the map interface

To update the data:

• Run extract_data.ipynb inside the resources/ directory to regenerate from source sheets and GeoJSON files.

Gallery

References

• Leaflet.js – For rendering interactive maps with custom markers, clustering, and polylines
• Overpass Turbo – For querying OpenStreetMap data (trails, routes, POIs)
• Nominatim API – For geocoding and reverse geocoding
• OpenRouteService API – For automatically generating road trip routes
• GeographicLib – For geodesic calculations (e.g., great circle routes)
• geojson.io – For hand-drawing and editing GeoJSON routes
• GeoJSON Specification – Core format for encoding spatial data
• GitHub Pages – Hosting platform
• Google Sheets API and Python – For managing and updating project data.
• Shepherd.js – For building the interactive guided tour
• Font Awesome and Material Design Icons – Iconography and styling assets

Licenses

• Code: MIT License – see LICENSE
• Images: Personal content not for reuse – see LICENSE_IMAGES

If you're in a photo and want it removed, contact me: [email protected]

Acknowledgements

Thanks to everyone who’s shared this beautiful world with me. And to the open-source community for the tools that made this project possible.

Author

Bryan Johns
Last updated: January 2026
[email protected] | LinkedIn | GitHub | Portfolio
— Fluent in Data. Fluent in Human.