PROJECT REPORT

ON
LIVE LOCATION TRACKER

Submitted By
Kartik Khatri (2221518)

Under the Guidance of

Ms. Sakshi Painuly

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

GRAPHIC ERA HILL UNIVERSITY

DATE: 5th December 2024

 CERTIFICATE

This is to certify that the project titled “Live Location Tracker” submitted by
and Kartik Khatri (2221518) to Graphic Era Hill University, Department of
Bachelor of Computer Applications, is a genuine record of the work carried out
by them under my supervision.

The work described in this report has not been submitted for the award of any
other degree or diploma to any other institution. The project has been done
independently by the students with due guidance and assistance under my
supervision.

I have reviewed the content and progress of the project at every stage, and I
confirm that it is authentic and in line with academic standards.

Ms. Sakshi Painuly

Project Guide
Department of Computer Science
Graphic Era Hill University, Dehradun

Place : Dehradun, India

Date : 5 December 2024
 ACKNOWLEDGMENT

I am deeply grateful to Ms. Sakshi Painuly, my project guide, whose guidance and
mentorship have been the cornerstone of this project. Her insights into the
complexities of real-time systems, particularly location tracking applications, have
inspired me to think critically and creatively about the problem at hand.

This project, titled "Live Location Tracker," would not have been possible
without her continuous encouragement and technical expertise. She helped me
break down the problem into smaller, manageable parts, making it easier to tackle
each phase systematically. Her feedback during the planning, implementation, and
testing phases ensured that the project met academic standards and practical
usability.

I also extend my gratitude to the faculty members of the Department of

Computer Applications at Graphic Era Hill University. Their lectures on web
technologies and programming languages were instrumental in building the
foundational knowledge required to undertake this project. They provided clarity
on advanced concepts, such as serverside scripting, real-time communication
protocols, and interactive frontend design.

Furthermore, I am thankful to my peers, who provided constructive criticism during

our brainstorming sessions. Their suggestions often pushed me to think beyond my
initial ideas and consider alternative solutions. They also assisted in testing the
system, offering valuable feedback that helped improve the usability and
performance of the application.

On a personal level, I am indebted to my parents and family members for their

unwavering support throughout this project. They provided me with a conducive
environment to work, free from distractions, and motivated me whenever I felt
stuck. Their encouragement reminded me of the importance of perseverance and
dedication in achieving any goal.

Finally, I am grateful to every individual who directly or indirectly contributed to

this project's success. Whether through advice, technical assistance, or moral
support, their efforts have enriched this project in countless ways.
 ABSTRACT

The "Live Location Tracker" is an advanced web application designed to facilitate

real-time geolocation tracking for individual and group users. This system
leverages cutting-edge web technologies, including EJS, CSS, Socket.io,
Leaflet.js, and Node.js, to deliver a seamless and interactive user experience. By
integrating these technologies with the Geolocation API, the project aims to
address the growing demand for real-time location-sharing systems in various
domains, such as logistics, personal navigation, and emergency services.

The primary goal of this project is to create a scalable and userfriendly platform
for sharing and viewing live locations. Unlike traditional methods of location
sharing, which often rely on static coordinates, the Live Location Tracker updates
locations dynamically. This ensures that users always have access to the most
accurate and up-to-date information.

The project incorporates both frontend and backend technologies:

1. Frontend:

o EJS: Enables dynamic HTML rendering, making the interface

interactive and adaptable.
o Leaflet.js: Provides the mapping functionality, allowing users to view
locations on an interactive map with markers, routes, and layers.
2. Backend:

o Node.js: Handles server-side logic, including processing user requests

and managing data flow.
o Socket.io: Facilitates real-time, bidirectional communication between
clients and the server.

3. APIs:
o The Geolocation API is used to fetch the latitude and longitude of
users in real time.
 TABLE OF CONTENTS

1. ACKNOWLEDGEMENT

2. ABSTRACT

3. INTRODUCTION
3.1 What is Location Tracking?
3.2 Purpose and Scope of the Project

4. OBJECTIVE
4.1 Primary Objective
4.2 Specific Goals

5. REQUIREMENT ANALYSIS
5.1 System Requirements
5.2 Functional and Non-Functional Requirements

6. SYSTEM DESIGN
6.1 Architecture Overview
6.2 Frontend and Backend Design

7. TECHNOLOGIES USED
7.1 Frontend: EJS, CSS, Leaflet.js
7.2 Backend: Node.js, Socket.io, Geolocation API

8. IMPLEMENTATION
8.1 Frontend Implementation
8.2 Backend Implementation
8.3 Integration of Frontend and Backend

9. REFERENCES

10. APPENDIX
10.1 Source Code
10.2 Diagrams and Illustrations
10.3 User Guide
 CHAPTER 3 : INTRODUCTION

Location tracking refers to the process of determining the geographical position of

an individual or object in real-time or at a specific moment. This is achieved using
technologies such as GPS (Global Positioning System), cellular towers, and Wi-Fi
triangulation. It is the backbone of many modern services, including navigation
apps, ride-hailing platforms, and emergency response systems.

Key Components of Location Tracking :

1. GPS: A satellite-based navigation system that provides accurate location

data.
2.
3. Cellular Towers: Used when GPS is unavailable; approximate location
is determined based on the signal strength from nearby towers.
4.
5. Wi-Fi Signals: Used for indoor tracking, where GPS signals are weak or
obstructed.

Types of Location Tracking :

1. Real-Time Tracking: Continuously updates the location of the user or

object.
2.
3. Passive Tracking: Records location data for retrieval at a later time.
4.
5. Predictive Tracking: Uses historical data and algorithms to predict
future movements.
3.2 Purpose of Live Location Tracking :

The Live Location Tracker is built to address several modern needs:

1. Personal Safety: Allows individuals to share their location with trusted
contacts for safety.
2. Operational Efficiency: Businesses use location tracking to monitor fleets,
optimize delivery routes, and manage logistics.
3. Emergency Services: During emergencies, first responders can locate
individuals quickly.
4. Social Connectivity: Friends and family can share locations for meetups or
coordination.

3.3 Scope of the Project

The scope of the Live Location Tracker extends beyond simple location-sharing
applications. This system has potential use cases in various domains:

1. Transportation: Monitoring the movement of public transportation

vehicles or delivery services.
2. Healthcare: Tracking the movement of ambulances and ensuring quick
response times.
3. Smart Cities: Integrating location tracking for traffic management, parking
systems, and pedestrian safety.
4. Education: School buses equipped with location tracking for parents’ peace
of mind.
 CHAPTER 4: OBJECTIVE

Primary Objective
The main goal of the Live Location Tracker is to create a robust and efficient
platform for tracking and sharing real-time geolocation information. The platform
is designed to be user-friendly, reliable, and adaptable for various applications.

Specific Objectives

1. Real-Time Location Sharing:

o Ensure the system can track and share live locations without
delays. o Update locations dynamically as users move. o
2. Interactive Map Display:
o Use Leaflet.js to provide an intuitive and visually appealing
interface.
o Include features like customizable markers and route overlays. o
3. Secure Communication:
o Protect user privacy by encrypting location data during
transmission. o Use HTTPS and secure WebSocket connections to
prevent unauthorized access.

4. Multi-User Support:
o Enable group tracking for applications like team coordination or
fleet management. o Implement user roles (e.g., admin, viewer) for
better access control.

Importance of Objectives

Each objective is crucial for meeting the needs of modern users:

• Real-time tracking enhances decision-making in logistics and emergency

scenarios.

• Interactive maps improve user engagement and usability.

• Secure communication ensures trust, which is essential for adoption in

sensitive industries like healthcare.
Extended Real-World Implications

• In disaster management, rescuers can coordinate better with live updates

from affected areas.

• In e-commerce, businesses can enhance customer satisfaction by providing

real-time delivery tracking.
 CHAPTER 5 : REQUIREMENT ANALYSIS

5.1 System Requirements

These are the minimum requirement every system need to follow

Hardware Requirements

1. User Devices: Smartphones or GPS-enabled devices for accessing the

application and sharing locations.

2. Server Infrastructure: A reliable server setup to handle real-time data

transmission, such as:

o Minimum Configuration:
▪ 2 GB RAM
▪ Stable internet connection
Browser

o Recommended Configuration:
▪ 16GB RAM
▪ Quad-core processor
▪ High-speed SSD for better performance

Software Requirements

1. Node.js: A scalable backend framework to handle server-side logic and

WebSocket communication.

2. Socket.io: A library for real-time communication between clients and

servers.

3. Leaflet.js: A lightweight JavaScript library for interactive map rendering.

5.2 Functional Requirements

The functional requirements define the essential capabilities of the Live Location
Tracker:

1. User Authentication: Ensure only authorized users can access the system.

2. Real-Time Updates: Continuously fetch and display location data with

minimal delay.

3. Customizable Tracking: Allow users to define tracking preferences, such

as time duration and sharing permissions.

4. Map Features:
o Add markers for users’ current positions.
o Draw routes based on movement history.

5.3 Non-Functional Requirements

Non-functional requirements describe the system’s operational qualities:

1. Performance:
o Handle up to 10,000 concurrent users without noticeable lag.
o Update location data in less than 500 milliseconds.

2. Security:
o Encrypt sensitive user data using AES encryption.
o Use secure communication protocols like HTTPS.

3. Scalability:
o Support additional features like geofencing or indoor navigation in
the future.
o Handle increased traffic during peak usage times.
 CHAPTER 6 : SYSTEM DESIGN

System design involves planning the overall structure and workflow of the
application to ensure efficiency, scalability, and ease of use.

6.1 Architecture Overview

The Live Location Tracker uses a client-server architecture, where:

1. The client-side handles user input, location fetching, and displaying data.

2. The server-side processes data, manages WebSocket connections, and

stores user information.

3. A database layer ensures persistent storage of user credentials, location

history, and settings.

6.2 Frontend Design

The frontend is designed using:

1. EJS Templates: Render dynamic HTML pages based on user interactions.

2. Leaflet.js:

o Display interactive maps with features like zoom, layers, and pop-
ups.

o Add markers to represent users’ locations and draw routes to show

movement history.
6.3 Backend Design

The backend is built on Node.js, with modules for:

1. Data Processing: Handle geolocation data from clients.

2. WebSocket Communication: Use Socket.io to maintain realtime,

bidirectional connections.

3. APIs: Integrate the Geolocation API to fetch accurate coordinate.

 CHAPTER 7 : TECHNOLOGIES USED
The choice of technologies plays a pivotal role in the success of any software
project. The Live Location Tracker leverages a combination of modern, robust,
and scalable technologies to ensure functionality, performance, and ease of use.

Frontend Technologies

The frontend is the user-facing part of the system, designed to provide an

interactive and intuitive experience.

1. EJS (Embedded JavaScript)

EJS is a templating engine for Node.js that allows developers to generate

dynamic HTML pages. It integrates JavaScript directly into HTML templates,
making it ideal for applications requiring real-time updates.

Key Features of EJS:

• Enables seamless integration of dynamic data into HTML templates.

• Allows modular design with reusable components.

• Simplifies frontend-backend communication.

Why EJS for Live Location Tracker?

• Dynamic rendering of user locations and updates.

• Reduces complexity by integrating JavaScript logic directly into HTML

templates.

2. Leaflet.js

Leaflet.js is a lightweight JavaScript library used for rendering interactive maps.

It is ideal for building map-based applications like the Live Location Tracker.
Key Features of Leaflet.js:

• Supports customizable map layers and markers.

• Provides real-time interaction, including panning and zooming.

• Integrates easily with third-party APIs like OpenStreetMap.

Why Leaflet.js for Live Location Tracker?

• Facilitates rendering of real-time location data on an interactive map.

• Allows users to visualize their movement and that of others.

Backend Technologies

The backend is the system’s core, responsible for data processing,

communication, and storage.

1. Node.js

Node.js is a JavaScript runtime environment used for building scalable, high-

performance server-side applications.

Key Features of Node.js:

• Asynchronous, event-driven architecture for handling multiple requests
simultaneously.

• Extensive library support via npm (Node Package Manager).

• Cross-platform compatibility.

Why Node.js for Live Location Tracker?

• Handles multiple user connections efficiently.

• Supports integration with WebSockets (Socket.io) for real-time

communication.
2. Socket.io

Socket.io is a library for real-time, bidirectional communication between the

client and server. It uses WebSockets and provides fallbacks for older browsers.

Key Features of Socket.io:

• Event-based communication model.

• Supports broadcasting messages to multiple clients simultaneously.

• Automatic reconnection in case of connection loss.

Why Socket.io for Live Location Tracker?

• Ensures real-time updates for location data.

• Allows seamless communication between the client-side (browser) and

server-side (Node.js).

3. Geolocation API

The Geolocation API enables web applications to access the user’s geographical
location.

Key Features of Geolocation API:

• Provides latitude, longitude, and altitude data.

• Includes methods for continuous tracking of location changes.

• Offers high accuracy when combined with GPS.

Why Geolocation API for Live Location Tracker?

• Fetches real-time user location data.

 • Enables dynamic updates for the map interface.

Integration of Technologies

The technologies used in the Live Location Tracker are seamlessly integrated to
ensure a cohesive system:

1. Frontend-Backend Communication:

o EJS templates render dynamic data received from the backend.

o Socket.io establishes a real-time connection for continuous updates.

2. Map Rendering:

o Leaflet.js visualizes geolocation data fetched by the Geolocation API.

3. Data Flow:

o User location is captured by the Geolocation API and transmitted to

the Node.js server.

o Socket.io broadcasts the data to all connected clients, updating the

map interface in real time.
 CHAPTER 8 : IMPLEMENTATION

Frontend Implementation

The frontend handles user interactions and map rendering.

Dynamic HTML Rendering with EJS

EJS templates generate dynamic web pages based on user input and backend data.
For example:

• The Home Page displays a map with markers for active users.

EJS Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Tracking App</title>

<!-- Corrected path for CSS -->

<link rel="stylesheet" href="/css/style.css">

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"
integrity="sha512-
h9FcoyWjHcOcmEVkxOfTLnmZFWIH0iZhZT1H2TbOq55xssQGEJHEaI
m+PgoUaZbRvQTNTluNOEfb1ZRy6D3BOw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- Your body content goes here -->
<!-- Map container -->
<div id="map"></div>

<!-- Corrected path for JS -->

<script
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"
 integrity="sha512-
puJW3E/qXDqYp9IfhAI54BJEaWIfloJ7JWs7OeD5i6ruC9JZL1gERT1wjt
wXFlh7CjE7ZJ+/vcRZRkIYIb6p4g==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>

<script src="https://cdn.socket.io/4.8.1/socket.io.min.js"
integrity="sha384-
mkQ3/7FUtcGyoppY6bz/PORYoGqOl7/aSUMn2ymDOJcapfS6PHqxhRT
Mh1RR0Q6+" crossorigin="anonymous"></script>

<script src="/js/script.js"></script>
</body>
</html>

Styling with CSS

CSS ensures a clean and responsive design.

• Map Container: Styled for full-screen display on mobile devices.

CSS Code:
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#map {
width: 100%;
height: 100%;
}

Script.js Code:

const socket = io();

if (navigator.geolocation) {
navigator.geolocation.watchPosition(
(position) => {
const { latitude, longitude } = position.coords;
 socket.emit("send-location", { latitude, longitude });
},
(error) => {
console.error(error);
},
{
enableHighAccuracy: true,
maximumAge: 0,
timeout: 5000
}
);
}

// Initialize the map

const map = L.map("map").setView([0, 0], 10); // Set default view to [0,0] at
zoom level 10

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '&copy; <a
href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>
contributors',
}).addTo(map);

const markers = {};

// Helper function to slightly offset markers at the same position

function offsetLocation(latitude, longitude, offset = 0.0001) {
return [latitude + offset, longitude + offset];
}

socket.on("receive-location", (data) => {

const { id, latitude, longitude } = data;

// Offset the marker's position slightly if it already exists

const markerPosition = markers[id]
? offsetLocation(latitude, longitude)
: [latitude, longitude];

// Update the map view to focus on the new position

map.setView([latitude, longitude], 16);

if (markers[id]) {
// Update the existing marker's position
 markers[id].setLatLng(markerPosition);
} else {
// Add a new marker if it doesn't exist
markers[id] = L.marker(markerPosition).addTo(map);
}
});

// Handle user disconnection

socket.on("user-disconnected", (id) => {
if (markers[id]) {
map.removeLayer(markers[id]); // Remove the marker from the map
delete markers[id]; // Delete the marker from the object
}
});
};
Backend Implementation

The backend manages data processing, user connections, and realtime

communication.

Setting Up the Node.js Server

The server processes location data and handles WebSocket connections.

App.js Code:

const express = require('express');

const app = express();
const http = require("http");
// Socket.io setup
const socketio = require("socket.io");
const path = require('path');
const server = http.createServer(app);

const io = socketio(server);

// Set view engine to EJS

app.set("view engine", "ejs");

// Serve static files from the "public" folder

app.use(express.static(path.join(__dirname, "public")));

// Socket.io connection event

io.on("connection", function (socket) {
socket.on("send-location",function(data){
io.emit("receive-location",{id: socket.id, ...data},)
})
socket.on("disconnect",function(){
io.emit("user-disconnected",socket.id);
})
});

// Route for the home page

app.get("/", function (req, res) {
res.render("index");
});

// Start the server

server.listen(3000, () => {
console.log("Server is running on http://localhost:3000");
});

The backend broadcasts the location data to all connected clients, ensuring real-
time updates on the map.
Screenshots and Illustrations:
 CHAPTER 9 : REFERENCES

OpenStreetMap Contributors. OpenStreetMap. Retrieved from

https://www.openstreetmap.org/

Leaflet.js Documentation. Leaflet - An Open-Source JavaScript Library for

Interactive Maps. Retrieved from https://leafletjs.com/

Socket.IO Documentation. Real-Time Bidirectional Event-Based

Communication. Retrieved from https://socket.io/docs/

Node.js Foundation. Node.js Documentation. Retrieved from

https://nodejs.org/en/docs/

Express.js Documentation. Express - Fast, Unopinionated, Minimalist Web

Framework for Node.js. Retrieved from https://expressjs.com/

EJS Documentation. Embedded JavaScript Templates. Retrieved from

https://ejs.co/

Stack Overflow. Various Community Solutions for Programming Challenges.

Retrieved from https://stackoverflow.com/