About the Project

Inspiration

As Rice students, we often found ourselves struggling to get from class to class on time, especially when trying to figure out which paths were the fastest. Generic tools like Google Maps don’t reflect the unique layout of Rice: they cut straight through buildings, ignore sidewalks, and don’t capture key student needs like servery hours or locations of classes. That gap inspired us to build Owl Map, a tool designed by Rice students, for Rice students.


What We Learned

  • How to use React and Leaflet to build an interactive map UI.
  • How to structure a backend in Python (FastAPI) that serves nodes and routes based on a graph of campus.
  • How to containerize services with Docker and manage persistent data with Postgres.
  • How to calculate distances using the Haversine formula:

$$ [ d = 2R \cdot \arcsin \left( \sqrt{ \sin^2\left(\frac{\Delta \phi}{2}\right) + \cos(\phi_1)\cos(\phi_2)\sin^2\left(\frac{\Delta \lambda}{2}\right) } \right) ]

where (R) is Earth’s radius, (\phi) = latitude, and (\lambda) = longitude. $$

  • How to design a clean, intuitive interface for students with collapsible sidebars and quick ETA lookups.

How We Built It

  1. Frontend (React + Tailwind + Leaflet):

    • Displays the Rice campus map.
    • Lets users select “from” and “to” nodes to get an ETA.
    • Shows serveries and their live hours.
    • Provides class scheduling and daily walking summaries.
  2. Backend (Python + FastAPI):

    • Provides two APIs: /nodes (list of all campus nodes with coordinates) and /navigate (path + distance).
    • Implements graph-based routing to ensure paths stay on sidewalks instead of cutting through buildings.
  3. Infrastructure (Docker + Postgres):

    • Containerized backend and frontend for easy deployment.
    • Stores node/edge data in Postgres for flexibility when expanding the map.

Challenges We Faced

  • Getting Mapbox to work initially—dealing with tokens, permissions, and styles was harder than expected.
  • Switching to Leaflet solved styling issues but required us to rethink how to hardcode and manage edges.
  • Making the paths realistic: the algorithm initially drew straight lines through buildings until we hardcoded sidewalk-based edges.
  • Handling data flow between frontend and backend cleanly, especially normalizing nodes from the API so they worked across different components.

Takeaway

We set out to make Rice navigation easier, and in the process, we built a full-stack application that blends algorithms, UI design, and infrastructure. Owl Map is not just a tool for getting from Duncan Hall to Fondren Library, it’s a platform we can grow with real-time data, better scheduling features, and even accessibility insights in the future.

Share this project:

Updates