Inspiration
The project was inspired by the everyday difficulties students face while navigating large and unfamiliar campus environments. Many students, especially newcomers, struggle to find classrooms, labs, offices, and facilities during their first weeks. Seeing this real problem, the team wanted to build a simple, fast, offline-friendly navigation tool that works without paid APIs and helps anyone explore the campus easily.
What it does
Campus Navigator displays a fully interactive map of the college campus with markers for key locations such as classrooms, departments, hostels, labs, and facilities. Users can search places, view details, locate themselves on the map, and get walking directions from their current position to any selected place. A clean sidebar list, clustering of markers, and mobile-friendly layout make the navigation smooth for all users.
How we built it
The team used Leaflet.js, MarkerCluster, and Leaflet Routing Machine to build the core map and routing features. All campus locations were mapped manually using latitude and longitude values collected on-site. The interface includes a searchable place list, clickable markers, popups with route buttons, and geolocation to detect the user’s position. HTML, CSS, and JavaScript were combined to create a responsive and lightweight UI that works well on mobile and desktop. No external paid APIs were used.
Challenges we ran into
One of the biggest challenges was handling geolocation accuracy, as GPS signals often shift indoors or around tall buildings. Routing sometimes took extra time due to network delays when loading the routing API. Making the interface clean on small mobile screens and ensuring the map reacted smoothly during zooming and clustering also required multiple adjustments. Debugging the “locate me” and “clear route” buttons took time as well.
Accomplishments that we’re proud of
The team successfully created a fully functional campus navigation system without relying on paid services. Achieving smooth real-time routing, responsive design, a clean UI, and accurate mapped locations within a short hackathon time frame is something the team is proud of. The ability to help students and visitors move confidently around campus is the project’s biggest achievement.
What we learned
Throughout the project, the team learned how to work with mapping libraries, handle GPS data, implement routing systems, and make UI responsive for different screen sizes. The process also strengthened collaboration, debugging skills, and time management under hackathon pressure.
What's next for Campus Navigator
Future plans include adding indoor navigation for multi-floor buildings, integrating QR codes at blocks for quick access, improving GPS accuracy, supporting voice directions, and adding an admin dashboard to update places easily. More features like emergency routes, event markers, and dark mode could also be added to make the application even more helpful.
Built With
- css
- html
- javascript
- leaflet-markercluster
- leaflet-routing-machine
- leaflet.js
