This repository contains a real-time location tracking web application that continuously tracks users' geographical positions and displays them on a live interactive map. The implementation follows the exact workflow shown below.
-
Browser Geolocation Check The application first verifies whether the browser supports the Geolocation API.
-
Geolocation Options Setup Location tracking is configured with:
- High accuracy enabled
- 5-second timeout
- No cached location data
-
Continuous Location Tracking Uses
navigator.geolocation.watchPosition()to track the user’s location continuously. -
Send Location via Socket Latitude and longitude are emitted to the server using Socket.IO with the event:
send-locationAny geolocation errors are logged to the browser console.
-
Map Initialization
- Initializes a Leaflet map centered at coordinates
(0, 0) - Default zoom level set to
15 - OpenStreetMap tiles are added to the map
- Initializes a Leaflet map centered at coordinates
-
Marker Storage An empty
markersobject is created to manage user markers dynamically. -
Receive & Render Locations When location data is received via Socket.IO:
- Extracts user
id,latitude, andlongitude - Centers the map on the new coordinates
- Updates an existing marker if present
- Creates a new marker if none exists
- Extracts user
-
Handle User Disconnect When a user disconnects:
- Their marker is removed from the map
- The marker reference is deleted from the
markersobject
- Node.js
- Express.js
- Socket.IO
- Leaflet.js
- OpenStreetMap
- JavaScript (Geolocation API)
- Live user tracking
- Real-time map-based applications
- Location-sharing systems
- Learning WebSockets and geolocation
npm install
node app.jsOpen your browser and visit:
http://localhost:3000
This project is intended for educational and demonstration purposes.
Author: Amar