Interactive Campus Map
Pan, zoom, and building markers for the entire campus.
Geospatial
Interactive Campus Navigation System
Developed an interactive geospatial campus navigation tool with Leaflet maps, route visualization, QR scanning, and offline support.
Offline
Map capability
QR
Code navigation
GeoJSON
Route visualization
Overview
Built an interactive geospatial campus navigation tool for a government research institution, enabling visitors and staff to explore a large research campus through an interactive map with building search, route navigation, satellite views, and offline map support.
The Challenge
A large government research campus with dozens of specialized divisions had no digital way for visitors or staff to navigate. Finding specific buildings, understanding routes, and identifying research divisions was confusing and time-consuming.
The Solution
Developed a full-featured interactive map application using React and Leaflet, with custom map tiles for offline support, GeoJSON-based road data for route visualization, geocoding via Nominatim API, and building-level detail with popups.
Tech Stack
Frontend
React 19ViteReact Router v7TypeScript
Styling
Tailwind CSSFramer MotionStyled Components
Mapping
LeafletReact-LeafletCustom map tilesGeoJSON
Geocoding
Nominatim API
Data
TanStack React Query
UI
SweetAlert2
Features
QR code reader
Key Features
Building Search with Geocoding
Find buildings by name with Nominatim API integration.
Route Navigation
GeoJSON-based road path visualization between locations.
Custom Map Tiles
Offline-capable with pre-rendered map tiles.
Satellite View Toggle
Switch between standard and satellite map views.
User Location Tracking
Real-time positioning on the campus map.
Building Popups
Images, descriptions, and division info for each building.
QR Code Reader
Scan QR codes for instant navigation to buildings.
Research Division Directory
Searchable directory of all research divisions.
Responsive Design
Framer Motion animations for smooth mobile interactions.
My Role
Full-Stack Frontend Developer
Full-stack frontend developmentâarchitected the map application, integrated Leaflet with custom tiles, implemented geocoding, built route navigation with GeoJSON, created QR code scanning.
Results & Impact
- Transformed campus navigation from paper maps to interactive digital experience
- Offline-capable with custom map tiles
- Reduced visitor confusion with searchable building directory
- QR code integration enabling instant wayfinding
- Modern geospatial application demonstrating mapping expertise