This article explains how to build a complete real-time GPS tracking dashboard using Angular, Google Maps JavaScript API, and real-time push mechanisms such as SignalR or WebSockets. All diagrams follow your preferred style with smaller headers.
Language is kept simple Indian English, and the content is suitable for beginners to expert full-stack developers.
Introduction
Real-time GPS tracking is used in logistics, cab services, fleet management, delivery systems, public transport, and safety applications. Angular provides an excellent front-end framework for interactive dashboards, and Google Maps API is the most reliable mapping platform for live updates.
In this article, we will build a dashboard that:
Loads Google Map inside Angular
Displays vehicles or assets as markers
Updates marker positions in real time
Shows movement paths (polyline)
Displays speed, direction, and other attributes
Uses ASP.NET Core backend + SQL Server for storing location history
Uses SignalR/WebSocket to push live updates
Flowchart (smaller header)
+-----------------------+
| GPS Device / Mobile |
| Sends Location Data |
+-----------+-----------+
|
v
+-----------+-----------+
| ASP.NET Core API |
| Stores Data in SQL |
| Pushes Live Update |
+-----------+-----------+
|
v
+-----------+-----------+
| Angular App (Client) |
| Google Maps Component |
| Marker Refresh |
+-----------------------+
Workflow (smaller header)
Device generates latitude, longitude, speed, time.
Backend receives data via REST API or MQTT gateway.
SQL Server stores the raw and processed logs.
Backend broadcasts live changes using SignalR/WebSockets.
Angular receives update and moves marker smoothly on Google Map.
Dashboard displays distance covered, history, and alerts.
Architecture Diagram (Visio-style, smaller header)
+--------------------------+
| GPS Device / Mobile |
+-----------+--------------+
|
v
+------------+-------------+
| ASP.NET Core API |
| (Tracking Controller) |
+------------+-------------+
|
+------------------+------------------+
| |
v v
+-----------+-----------+ +-------------+---------------+
| SQL Server DB | | SignalR Hub / WebSockets |
| (Location History) | | Sends Real-time Updates |
+-----------+-----------+ +-------------+---------------+
|
v
+-----------+------------+
| Angular GPS Dashboard |
| Google Maps Component |
+------------------------+
ER Diagram (smaller header)
+---------------------+ +---------------------------+
| Device | 1 --- * | LocationLog |
+---------------------+ +---------------------------+
| DeviceId (PK) | | LogId (PK) |
| Name | | DeviceId (FK) |
| Type | | Latitude |
| Status | | Longitude |
+---------------------+ | Speed |
| Direction |
| RecordedAt (datetime) |
+--------------------------+
Sequence Diagram (smaller header)
Device → API: Send(lat, long, speed)
API → SQL: Insert location log
API → SignalR Hub: Broadcast update
Hub → Angular: Push new coordinates
Angular → Google Maps: Update marker position
User → Angular: View dashboard and history
Setting Up Google Maps in Angular
Step 1: Load Google Maps API
Add the script with your API key in index.html:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=geometry"></script>
Step 2: Create the Map Component
map.component.ts
import { Component, OnInit, NgZone } from '@angular/core';
declare const google: any;
@Component({
selector: 'app-live-map',
templateUrl: './live-map.component.html',
styleUrls: ['./live-map.component.scss']
})
export class LiveMapComponent implements OnInit {
map: any;
markers: any = {};
ngOnInit() {
this.initMap();
}
initMap() {
this.map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 19.0760, lng: 72.8777 },
zoom: 11
});
}
updateMarker(deviceId: string, lat: number, lng: number) {
if (!this.markers[deviceId]) {
this.markers[deviceId] = new google.maps.Marker({
position: { lat, lng },
map: this.map,
title: deviceId
});
} else {
this.markers[deviceId].setPosition(new google.maps.LatLng(lat, lng));
}
}
}
map.component.html
<div id="map"></div>
map.component.scss
#map {
width: 100%;
height: 100vh;
}
Adding Real-Time Tracking with SignalR
Step 1: Install SignalR Client
npm install @microsoft/signalr
Step 2: Connect to ASP.NET Core Hub
import * as signalR from '@microsoft/signalr';
export class LiveMapComponent implements OnInit {
hub: any;
ngOnInit() {
this.initMap();
this.hub = new signalR.HubConnectionBuilder()
.withUrl('https://yourapi.com/gpsHub')
.build();
this.hub.start().then(() => console.log('Hub connected'));
this.hub.on('locationUpdated', (data: any) => {
this.updateMarker(data.deviceId, data.lat, data.lng);
});
}
}
Backend: ASP.NET Core SignalR Hub
TrackingHub.cs
public class TrackingHub : Hub
{
public async Task BroadcastLocation(LocationDto location)
{
await Clients.All.SendAsync("locationUpdated", location);
}
}
Receiving Data and Broadcasting
TrackingController.cs
[ApiController]
[Route("api/tracking")]
public class TrackingController : ControllerBase
{
private readonly IHubContext<TrackingHub> _hub;
public TrackingController(IHubContext<TrackingHub> hub)
{
_hub = hub;
}
[HttpPost("update-location")]
public async Task<IActionResult> UpdateLocation(LocationDto dto)
{
// Save in SQL Server
// _repository.SaveLocation(dto);
// Broadcast to clients
await _hub.Clients.All.SendAsync("locationUpdated", dto);
return Ok();
}
}
Building the Dashboard UI
You can enhance your Angular dashboard with:
Vehicle list with status
Search bar
Speed and direction indicators
Polyline showing route history
Alerts (overspeeding, idle time)
Heatmap of frequent stops
Example: Drawing Movement Path
updatePath(deviceId: string, lat: number, lng: number) {
if (!this.paths[deviceId]) {
this.paths[deviceId] = new google.maps.Polyline({
path: [],
map: this.map,
strokeColor: '#007bff'
});
}
const path = this.paths[deviceId].getPath();
path.push(new google.maps.LatLng(lat, lng));
}
SQL Server Storage Strategy
Use partitioning for large tables
Store raw logs separately from processed logs
Create indexes on (DeviceId, RecordedAt)
Use archival tables for old tracking data
Example DDL
CREATE TABLE LocationLog (
LogId INT IDENTITY PRIMARY KEY,
DeviceId NVARCHAR(50),
Latitude FLOAT,
Longitude FLOAT,
Speed FLOAT,
Direction FLOAT,
RecordedAt DATETIME2
);
Performance and Scalability Tips
Use clustering + SignalR backplane for many devices
Use SQL Server temporal tables for fast history browsing
Implement marker clustering on Google Maps for large datasets
Enable lazy loading of historical paths
Use RxJS for throttling UI updates
Conclusion
You now have a complete blueprint for designing and implementing a real-time GPS tracking dashboard in Angular using Google Maps, ASP.NET Core, SignalR, and SQL Server.
The same architecture works for:
Full Source Code : Complete Source Code Structure for Real-Time GPS Tracking Dashboard (Angular + ASP.NET Core)