SFU Wayfinder
Inspiration
As a friend of SFU students, finding a classroom can be stressful—especially when navigating an unfamiliar building, moving between floors, or trying to determine which entrance is accessible. Existing maps show where buildings are located, but they do not always make it easy to plan an indoor route. SFU Campus Wayfinder was created to make navigating the Burnaby campus simpler and more intuitive.
What It Does
SFU Campus Wayfinder is an interactive 3D campus map that helps students find routes between buildings, classrooms, entrances, and other locations.
Users can search for a starting point and destination, view the suggested route directly on the map, and follow step-by-step directions. The application also supports routes between different floors and buildings, along with a step-free option that prioritizes elevators and accessible pathways.
How We Built It
We built the application using React, TypeScript, and Vite, with Tailwind CSS for the responsive interface. Three.js, React Three Fiber, and Drei were used to render the interactive 3D campus environment.
Real building and road footprints were imported from SFU Facilities Services GIS data and converted into a format that could be displayed in the 3D scene. We created a graph of classrooms, hallways, entrances, stairs, elevators, and outdoor paths, then implemented Dijkstra’s algorithm to calculate the fastest route between locations.
The application also includes search autocomplete, floor selection, step-by-step directions, accessible routing, Google Maps integration, and an SVG fallback for devices that cannot display the 3D map.
Built With
React, TypeScript, Vite, Three.js, React Three Fiber, Drei, Tailwind CSS, Dijkstra’s algorithm, SFU GIS data, Google Maps, Vitest, and Playwright.
The project is currently a prototype. Building footprints use real geographic data, while classroom locations, indoor routes, accessibility information, and travel-time estimates are for demonstration purposes.
