Realtime Device Tracker using Node.js, Socket.IO & Leaflet

In this tutorial, you’ll learn how to build a realtime location tracking application that uses the browser’s GPS, Socket.IO for live communication, and Leaflet.js to display users on a map.

🚀 Project Overview

• Backend: Node.js, Express.js, Socket.IO
• Frontend: HTML, Leaflet.js, Socket.IO client
• Features: Live GPS tracking, multi-user map, disconnect cleanup

📁 Folder Structure

project-root/
├── app.js
├── package.json
├── src/
│   ├── public/
│   │   ├── css/
│   │   │   └── style.css
│   │   └── js/
│   │       └── script.js
│   ├── routes/
│   │   └── routers.js
│   ├── socket/
│   │   └── socketHandler.js
│   └── views/
│       └── index.ejs
  

🧠 How It Works

1. Each user shares their location using the browser's navigator.geolocation API.
2. Location is sent to the server via Socket.IO.
3. The server broadcasts each user’s position to all clients.
4. Leaflet.js displays each user as a marker on a shared map.

🔧 Setup Instructions

1. Clone the repository:

git clone https://github.com/RanaGithub30/live-location-tracker.git

2. Navigate into the project folder:

cd live-location-tracker

3. Install dependencies:

npm install

4. Run the application:

npm start

5. Open your browser at:

http://localhost:3000

🌐 Demo

Open http://localhost:3000 in two browser tabs or devices. You’ll see each user's location updated live on the map.

🔗 GitHub Repository

You can view or clone the complete source code from GitHub:
https://github.com/RanaGithub30/live-location-tracker

💡 Future Ideas

• Add user names or avatars for better identification.
• Integrate WebRTC for live voice communication.
• Store historical movement logs in a database.

Happy Coding! 🚀