PicGuide@TUM is a web tool designed to simplify navigation on the TUM main campus, especially for Cartography and Geodesy students and visitors. Unlike traditional maps, it integrates interactive maps with real-world photos, guiding users step by step with image-based directions. Users can select start and end points, follow picture-guided routes, and even contribute new paths. Features like dynamic pathfinding, progress indicators, and 360-degree views enhance usability, making campus navigation more intuitive and accessible. PicGuide@TUM bridges the gap between abstract maps and real-world environments for a seamless wayfinding experience.
PicGuide@TUM
“Find Your Destination in TUM Through the Pictures!”
Homepage
What it is about
How we built it
PicGuide@TUM was built using modern web technologies, data collection, and an iterative development process. The front-end, designed with Bootstrap for responsiveness, integrates Leaflet.js for interactive mapping. Flask, a Python framework, powers the back-end, handling data processing and communication.
Key locations and paths were identified through on-site visits, with high-resolution and 360-degree photos captured for accuracy. Data is structured using an adjacency table format, storing points and edges separately to optimize processing. Users can navigate via a clear, photo-guided system.
To enhance engagement, a 3D model of TUM, sourced from Google Earth and Bavarian geodata, was visualized using Blender and Sketchfab. A customizable VR feature allows users to explore the campus from a bird’s-eye view. Additionally, an AR function, developed in Unity, enables users to scan markers via an Android app for classroom navigation.
A brochure with transport and campus details, along with a dedicated webpage, further improves accessibility. Continuous user testing and feedback collection led to refinements in UI, route visualization, and usability, ensuring an intuitive and user-friendly navigation experience.
Key locations and paths were identified through on-site visits, with high-resolution and 360-degree photos captured for accuracy. Data is structured using an adjacency table format, storing points and edges separately to optimize processing. Users can navigate via a clear, photo-guided system.
To enhance engagement, a 3D model of TUM, sourced from Google Earth and Bavarian geodata, was visualized using Blender and Sketchfab. A customizable VR feature allows users to explore the campus from a bird’s-eye view. Additionally, an AR function, developed in Unity, enables users to scan markers via an Android app for classroom navigation.
A brochure with transport and campus details, along with a dedicated webpage, further improves accessibility. Continuous user testing and feedback collection led to refinements in UI, route visualization, and usability, ensuring an intuitive and user-friendly navigation experience.
Challenges we ran into
One major challenge was the time-consuming process of collecting and organizing photos for numerous locations. To streamline this, we divided tasks among team members, ensuring efficiency and accuracy. Additionally, bidirectional photos were captured at each point, cutting the workload in half.
For the 3D model of TUM, we initially attempted to use NavVis indoor laser scans and the TUM-MLS-2016 dataset. After gaining access to the data, we faced challenges in processing it—merging frames, reconstructing meshes, and colorizing the model. Despite weeks of trials with MeshLab and Blender, the dataset remained too large for web deployment, had resolution issues, and caused excessive server load. Ultimately, we opted for a different approach.
In AR interaction design, a key challenge was ensuring accurate target recognition. Some visually similar targets caused misidentifications, affecting user experience. Additionally, due to iOS system complexities, the AR feature is currently only available as an Android app, limiting accessibility for iOS users.
For the 3D model of TUM, we initially attempted to use NavVis indoor laser scans and the TUM-MLS-2016 dataset. After gaining access to the data, we faced challenges in processing it—merging frames, reconstructing meshes, and colorizing the model. Despite weeks of trials with MeshLab and Blender, the dataset remained too large for web deployment, had resolution issues, and caused excessive server load. Ultimately, we opted for a different approach.
In AR interaction design, a key challenge was ensuring accurate target recognition. Some visually similar targets caused misidentifications, affecting user experience. Additionally, due to iOS system complexities, the AR feature is currently only available as an Android app, limiting accessibility for iOS users.
What we're proud of
We are particularly proud of our contributions to the frontend and backend code of our website. We often spent long hours brainstorming code structures and designing the database, even pulling all-nighters to fix bugs when inspired by a new idea. Every time the code ran successfully, it brought us immense satisfaction. Seeing users successfully navigate to their destinations during testing made us even prouder, as it showed our project fulfilled its purpose and truly helped others.
What we learned
This was our first time developing a multi-page web application with both frontend and backend. We learned how to manage data using Flask in Python coding and handle data interactions between the frontend and backend. Much new knowledge from this semester, such as UI design, geoinformation data structures and algorithms, dashboard design, and user survey test, were applied to this project, enhancing both our technical skills and practical experience.
What's next
We plan to expand PicGuide@TUM by adding more paths and points, covering additional locations across the campus. This will enhance the guide’s comprehensiveness and improve mobile interactions, offering users more navigational options and up-to-date campus information.
Additionally, we aim to refine the AR functionality for more accurate target recognition, ensuring a seamless and intuitive user experience.
Looking forward, we hope future MSc Cartography students will adopt this tool to quickly familiarize themselves with the campus. Beyond navigation, the project could evolve with features like real-time updates, personalized routes, and integration with transportation or event schedules, making it an essential resource for campus life.
Additionally, we aim to refine the AR functionality for more accurate target recognition, ensuring a seamless and intuitive user experience.
Looking forward, we hope future MSc Cartography students will adopt this tool to quickly familiarize themselves with the campus. Beyond navigation, the project could evolve with features like real-time updates, personalized routes, and integration with transportation or event schedules, making it an essential resource for campus life.
Guide Example
Brochure
3D Model
Sources
OpenStreetMap Foundation (2022). Guidelines for Web Map Styling. Retrieved from OpenStreetMap Wiki.
Leaflet Documentation (2023). Leaflet: An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps. Retrieved from Leaflet Documentation.
Fuchsberger, D. (2015, May 17). Turm der TU München [Photograph]. Wikimedia Commons. https://commons.wikimedia.org/wiki/File:Turm_der_TU_M%C3%BCnchen.jpg
Bootstrap. (n.d.). Official website. https://getbootstrap.com
Digital Orthophoto RGB 20cm (DOP20 RGB), Bavarian state government. https://geodaten.bayern.de/opengeodata/OpenDataDetail.html?pn=dop20rgb
TUM_studentModel, wongchingyeung(2025). https://skfb.ly/ptVxG
Leaflet Documentation (2023). Leaflet: An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps. Retrieved from Leaflet Documentation.
Fuchsberger, D. (2015, May 17). Turm der TU München [Photograph]. Wikimedia Commons. https://commons.wikimedia.org/wiki/File:Turm_der_TU_M%C3%BCnchen.jpg
Bootstrap. (n.d.). Official website. https://getbootstrap.com
Digital Orthophoto RGB 20cm (DOP20 RGB), Bavarian state government. https://geodaten.bayern.de/opengeodata/OpenDataDetail.html?pn=dop20rgb
TUM_studentModel, wongchingyeung(2025). https://skfb.ly/ptVxG
Students
Weiyi Gao, Lingyu Tang, Ching Yeung Wong and Ximing Wang
14th intake
Supervisor
Juliane Cron, M.Sc.
Keywords
Picture guide, TUM, Campus, Panoramic, AR
Try it
