A Node.js and WebSocket-powered web application that tracks and broadcasts user locations in real-time on an interactive map.
Whenever a user opens the app, their browser's geolocation API fetches their coordinates and sends them to the server. The server then broadcasts this location to all connected users, dynamically updating pinpoint markers on a shared map.
- Live Geolocation Tracking: Continuously monitors the user's location using the browser's native Geolocation API (
watchPosition). - Real-Time Communication: Utilizes Socket.io for lightning-fast, two-way event-based communication between the server and clients.
- Interactive Mapping: Powered by Leaflet.js and OpenStreetMap for smooth panning, zooming, and marker rendering.
- Multi-User Support: Assigns unique IDs to every connected user, allowing multiple devices to be tracked simultaneously on the same map.
- Automatic Cleanup: Detects when a user disconnects (closes the tab) and automatically removes their specific marker from the map.
- Frontend: HTML, CSS, JavaScript, EJS (Embedded JavaScript templates)
- Backend: Node.js, Express.js
- WebSockets: Socket.io (v4.8.x)
- Map Rendering: Leaflet.js (v1.9.x) & OpenStreetMap
├── public/
│ ├── javascript/
│ │ └── script.js # Client-side Socket.io and Leaflet map logic
│ └── stylesheets/
│ └── style.css # Basic styling (map height/width)
├── views/
│ └── index.ejs # Main HTML template containing the map container
├── app.js # Node.js server, Express setup, and Socket.io logic
├── package.json # Project dependencies
└── README.md