This article describes how to use Angular, the Google Maps JavaScript API, and real-time push technologies like SignalR or WebSockets to create a comprehensive real-time GPS tracking dashboard. Every diagram has smaller headers and adheres to your desired style.
The information is appropriate for both novice and seasoned full-stack engineers, and the language is maintained simple in Indian English.
Overview
Logistics, taxi services, fleet management, delivery systems, public transportation, and safety applications all make use of real-time GPS tracking. The Google Maps API is the most dependable mapping platform for real-time updates, and Angular offers a great front-end framework for dynamic dashboards.
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:
- Fleet tracking systems
- Cab/driver live monitoring
- School bus tracking
- Asset movement inside warehouse
- Delivery agent tracking