[Backend Project 🚀] Realtime Device track | Map with node.js express and socket.io | Maps | Leaflet

What the video builds (Realtime “device tracking” map)

• A backend real-time tracker similar to food delivery live-rider tracking (Swiggy/Zomato-style).
• Two devices are tracked on a map, with rider/device positions updating in real time.
• When a device moves, the map updates the marker position.
• When a device disconnects or closes the browser, that device’s marker is removed immediately.

Key tech stack / libraries used

• Node.js + Express
  • Server setup and routing.
• Socket.IO
  • Real-time, bi-directional communication between browser and backend.
• EJS
  • Templating engine to serve the frontend page.
• Leaflet (open-source map library) + OpenStreetMap tiles
  • Leaflet CSS/JS loaded via CDN (or local files).
  • Map displayed using L.map, setView, and tileLayer.

Frontend (browser) features / tutorial logic

• Uses the Geolocation API:

  • Checks whether navigator.geolocation exists (browser support).
  • Uses watchPosition() to continuously track movement.
  • Requests location with:
    • enableHighAccuracy: true
    • timeout: 5000ms
    • maximumAge: 0 (avoid cached positions)

• On every location update:

  • Extracts latitude and longitude from the watch callback.
  • Emits a Socket.IO event: send location with { latitude, longitude }.

• Leaflet map rendering:

  • Initializes the map centered at default coordinates (initially near 0,0 until real data arrives).
  • Sets a zoom level (example shown around 15).
  • Creates/updates markers per device using an in-memory markers object keyed by socket ID.

Marker behavior

• If marker exists for the device (socket ID) → update position
• Else → create marker and add it to the map
• On disconnect → remove marker layer and delete marker from markers

Backend (Socket.IO) features / tutorial logic

• Socket.IO server created from the Express HTTP server:
  • Uses the socket.io(server) pattern.
• Handles client connection:
  • Uses the socket’s unique ID socket.id as the device identifier.
• Receives location updates from clients:
  • Listens for send location
  • Broadcasts to all clients with event: receive location
  • Payload includes:
    • id (socket ID)
    • latitude / longitude (plus related data via spread/operator)
• Handles disconnections:
  • Listens for disconnect
  • Broadcasts event: user disconnected with the disconnected socket.id
  • Frontend removes the corresponding marker.

Project setup steps mentioned (guide-like)

• Create a project folder and run npm init -y.
• Create app.js (entry file).
• Install dependencies:
  • express, ejs, socket.io
• Express basics:
  • Set EJS view engine.
  • Serve static files from a public folder.
• Frontend structure:
  • views/index.ejs
  • public/js/script.js
  • CSS in public/css/ (e.g., full-width/full-height styling for the map container)

Key tutorial “learning focus” emphasized

• Teaching Socket.IO realtime handling, including:
  • emitting events from the frontend (send location)
  • listening and broadcasting on the backend
  • updating map markers without page reloads
  • cleaning up marker state when a client disconnects

Main speakers / sources

• Speaker: Harsh Vandana Sharma
• Technical sources / integrated technologies:
  • Leaflet (OpenStreetMap-based map)
  • Socket.IO
  • Node.js
  • Express
  • EJS
  • HTML5 Geolocation API