Overview

The Vehicle Tracking Web Interface provides a public tracking page that displays the real-time location of a vehicle along with trip route information. It uses Leaflet.js for map visualization and integrates with backend APIs to retrieve tracking data.

The page is accessed through the tracking URL:

/track/<tracking_id>

This interface is typically shared with customers or operations teams to monitor vehicle movement during active logistics trips.

Architecture

Frontend: HTML + JavaScript
Map Engine: Leaflet.js
Map Data Source: OpenStreetMap
Routing Data: Mapbox API
Backend API: Frappe Whitelisted Method

Page Components

1. Map Container

The map container is responsible for displaying the interactive tracking map.

Element	Description
#map	Leaflet map container that displays vehicle position and route
#eta-box	Displays remaining distance and estimated arrival time
#show-error	Displays tracking errors when data cannot be retrieved

Tracking Data Flow

User opens tracking URL
Tracking ID is extracted from the URL
Frontend requests tracking data via API
Backend returns vehicle tracking information
Map updates with vehicle location and route
Page refreshes every 5 minutes

Backend API Integration

API Endpoint

/api/method/lnder_logistics.api.logistics_tracking.get_logistics_tracking_status

Request Parameter

Parameter	Description
url_id	Tracking identifier extracted from URL

Response Data

Vehicle current location
Pickup location
Delivery location
Trip route coordinates
Vehicle telemetry path
ETA distance
ETA duration

Map Visualization Features

1. Static Markers

Markers are displayed for pickup and delivery locations.

Marker	Description
Pickup Marker	Shows the origin location of the trip
Delivery Marker	Shows the destination location

2. Vehicle Marker

The vehicle marker displays the current position of the truck using a custom icon.

The marker updates automatically when new tracking data is received.

3. Planned Route

The planned route is drawn using coordinates returned from the Mapbox routing API.

Displayed as a blue polyline
Represents expected route from pickup to delivery

4. Telemetry Route

The telemetry route shows the actual path taken by the vehicle.

Displayed as a red polyline
Generated from vehicle GPS coordinates

ETA Information

The ETA box displays estimated travel information calculated by the backend system.

Field	Description
Distance Left	Remaining distance to delivery location
Estimated Time	Expected travel duration to destination

Error Handling

If tracking data cannot be retrieved or the tracking link is invalid, an error message is displayed to the user.

Common error scenarios:

Tracking link expired
Invalid tracking ID
Server communication failure

Fleet Tracker Overlay System

Overview

The Fleet Tracker Overlay script enhances the fleet monitoring dashboard by identifying assigned vehicles and filtering vehicles requiring operational attention.

This script interacts with backend APIs to retrieve assigned vehicle data and categorize vehicles based on trip status.

Assigned Vehicle Retrieval

Function

FLEET_GET_ASSIGNED_VEHICLES

This function retrieves vehicles assigned to trips within the last 24 hours.

Backend API

lnder_logistics.utils.get_assigned_vehicles_by_status

Returned Data

Vehicle Number
Trip Assignment Status

Trip Status Check

Function

FLEET_TRIP_STATUS_CHECK

Determines whether a vehicle currently has an active trip assignment.

Logic

Check if vehicle exists in assigned vehicles list
If present → vehicle has active trip
If not present → vehicle has no trip

Attention Filter

Function

FLEET_ATTENTION_FILTER

Identifies vehicles that require operational attention.

Conditions

A vehicle is flagged for attention if:

Vehicle has valid GPS coordinates
Vehicle has no active trip
Vehicle is outside geofence area

Alert Category

Vehicles flagged by this filter are categorized as:

No Trip Not In Geo

These vehicles typically require operational review.

Summary

The Vehicle Tracking Web Interface provides real-time vehicle tracking capabilities through an interactive map interface. Combined with the Fleet Tracker overlay system, it enables operations teams to monitor vehicles, detect anomalies, and manage logistics operations efficiently.