Traccar Web Interface

The Traccar Web Interface is the front-end component for the Traccar GPS tracking platform. It provides a web-based UI to interact with the Traccar server.

Note: This repository contains only the web interface. For the back-end server implementation, refer to the main Traccar repository.

Tech Stack:

• Framework: React
• UI Library: Material UI
• Maps: MapLibre

The reverseCoordinates function is a utility to swap the order of elements in coordinate pairs (e.g., converting [latitude, longitude] to [longitude, latitude]).

It handles several input formats:

• Simple Array: [lat, lng] becomes [lng, lat].
• Nested Arrays: Recursively maps through arrays to find and reverse coordinate pairs.
• Objects: If an object has a coordinates property, it recursively calls itself on that property.

import { reverseCoordinates } from './mapUtil';

// Array
reverseCoordinates([31.23, 121.47]); // [121.47, 31.23]

// Nested Array
reverseCoordinates([[31.23, 121.47], [31.24, 121.48]]); // [[121.47, 31.23], [121.48, 31.24]]

// Object
reverseCoordinates({ id: 1, coordinates: [31.23, 121.47] }); // { id: 1, coordinates: [121.47, 31.23] }

These functions return semantic color names (used for UI styling) based on device or battery states.

getStatusColor(status)

• 'online' $\rightarrow$ 'success'
• 'offline' $\rightarrow$ 'error'
• 'unknown' or other $\rightarrow$ 'neutral'

getBatteryStatus(batteryLevel)

• $\ge 70$ $\rightarrow$ 'success'
• $> 30$ $\rightarrow$ 'warning'
• $\le 30$ $\rightarrow$ 'error'

import { getStatusColor, getBatteryStatus } from './formatter';

getStatusColor('online');    // "success"
getBatteryStatus(85);       // "success"
getBatteryStatus(50);       // "warning"
getBatteryStatus(10);       // "error"

Use formatCoordinate(key, value, unit) to format latitude or longitude into specific formats.

• key: Must be 'latitude' or 'longitude' to determine the hemisphere (N/S or E/W).
• unit:
  • 'ddm': Degrees and decimal minutes (e.g., 45° 30.000' N).
  • 'dms': Degrees, minutes, and seconds (e.g., 45° 30' 0" N).
  • default: Decimal degrees with 5 decimal places (e.g., 45.50000°).

import { formatCoordinate } from './formatter';

// Decimal degrees
formatCoordinate('latitude', 45.5, 'decimal'); // "45.50000°"

// Degrees and decimal minutes
formatCoordinate('latitude', 45.5, 'ddm');     // "45° 30.000' N"

// Degrees, minutes, and seconds
formatCoordinate('longitude', -73.5, 'dms');   // "73° 30' 0" W"

The default export getSpeedColor converts a speed value into an rgb() CSS color string based on a defined range.

It normalizes the speed relative to minSpeed and maxSpeed and then applies the Turbo colormap interpolation. This is intended for visualizing speed data in the UI.

Parameters:

• speed: The current speed value.
• minSpeed: The lower bound of the speed range.
• maxSpeed: The upper bound of the speed range.

import getSpeedColor from './src/common/util/colors.js';

// Returns an 'rgb(r, g, b)' string
const colorString = getSpeedColor(60, 0, 120);
console.log(colorString); // e.g., "rgb(128, 128, 128)"

Use speedFromKnots and speedToKnots to convert speed values. The base unit for these functions is knots (kn).

Supported units:

• kn: Knots (default)
• kmh: Kilometers per hour
• mph: Miles per hour

import { speedFromKnots, speedToKnots } from 'src/common/util/converter';

// Convert 10 knots to km/h
const speedKmh = speedFromKnots(10, 'kmh');

// Convert 100 km/h to knots
const speedKn = speedToKnots(100, 'kmh');

Use altitudeFromMeters and altitudeToMeters to convert altitude values. The base unit for these functions is meters.

Supported units:

• m: Meters (default)
• ft: Feet

import { altitudeFromMeters, altitudeToMeters } from 'src/common/util/converter';

// Convert 100 meters to feet
const altitudeFt = altitudeFromMeters(100, 'ft');

// Convert 3280 feet to meters
const altitudeM = altitudeToMeters(3280, 'ft');

The geometryToArea function converts a GeoJSON geometry object back into a string format used for geofence definitions. It automatically handles coordinate transformations to ensure the resulting string uses the correct coordinate system based on the current map.coordinateSystem setting, and it normalizes coordinate order using reverseCoordinates.

import { geometryToArea } from './mapUtil';

const geometry = {
  type: 'Polygon',
  coordinates: [[[121.47, 31.23], [121.48, 31.23], [121.48, 31.24], [121.47, 31.23]]]
};

const areaString = geometryToArea(geometry);

These functions convert raw metric values into localized strings using a provided unit and translation function t.

• formatDistance(value, unit, t): Formats distance from meters.
• formatAltitude(value, unit, t): Formats altitude from meters.
• formatSpeed(value, unit, t): Formats speed from knots.
• formatVolume(value, unit, t): Formats volume from liters.

Each function returns a string containing the value (fixed to 2 decimal places) and the localized unit string.

import { formatDistance, formatSpeed } from './formatter';

// Example usage with a mock translation function
const t = (key) => key;
const unit = 'km';

formatDistance(1500, unit, t); // "1.50 km"
formatSpeed(10, 'mph', t);    // "10.00 mph"

The prepareIcon function creates a canvas-based image representation of an icon placed on a background. It supports applying a color tint to the icon.

• background: An HTML Image element used as the base.
• icon: An HTML Image element to be drawn on top. If provided, it is scaled to 50% of the background size and centered.
• color: A CSS color string used to tint the icon via a destination-atop composite operation.

Returns an ImageData object representing the final rendered canvas.

import { prepareIcon, loadImage } from './mapUtil';

async function createIcon() {
  const bg = await loadImage('path/to/bg.png');
  const icon = await loadImage('path/to/icon.png');
  const imageData = prepareIcon(bg, icon, '#ff0000');
  // Use imageData to draw on a canvas
}

The interpolateTurbo function generates an RGB color array based on a single input value. The input value is clamped between 0 and 1. The function uses polynomial coefficients to map the input to the Turbo colormap, which is useful for heatmaps or continuous data visualization.

Returns an array of three integers [r, g, b] representing the color in the range 0-255.

import { interpolateTurbo } from './src/common/util/colors.js';

// Returns [r, g, b] for a value between 0 and 1
const color = interpolateTurbo(0.5);
console.log(color); // e.g., [128, 128, 128]