Embedded SPA via iFrame

Overview

For quick integration without backend development, embed the real-time tracking interface directly into your web portal using an iFrame. This provides a complete tracking solution with interactive maps, device status monitoring, real-time updates, trip visualization, speed monitoring, location sharing, and driver display names.

SPA URL

https://https://spa.telematicssdk.com/live-tracking/embedded

URL Parameters

Map Controls

The embedded tracker provides two floating controls on the map. Both are hidden when hideUI=true.

Status Button (Top-Right)

A circular, color-coded button indicating connection state:

Clicking the status button opens a comprehensive modal with:

• Connection status and statistics
• Device counts (active, inactive, offline)
• Speed monitoring configuration
• Active share sessions for the selected device
• Full device list with details

Fit All Drivers Button (Bottom-Right)

A single tap zooms the map to frame all visible device markers:

• One device: Centers at zoom level 15
• Multiple devices: Fits bounds with padding around all markers
• No devices: No action

Map Centering Behavior

The embedded SPA provides intelligent map centering based on URL parameters:

Custom Coordinates (lat/lng provided)

Centers the map on the specified location with the optional zoom level. Shows all devices in the area. Ideal for regional monitoring or area-specific tracking.

Single-Device Mode (devicetoken provided)

Automatically focuses on the specified device when data arrives. Uses zoom level 15 for optimal device viewing. Ideal for individual asset tracking.

Multi-Device Mode (no coordinates, no devicetoken)

Maintains a world view showing global device distribution. Does not auto-center on the first device. Ideal for fleet overview and global monitoring.

Combined Mode (coordinates + devicetoken)

Starts at the specified location, then auto-focuses on the device when data becomes available. Useful for monitoring specific devices in known regions.

SPA Features

Core Features

• Interactive Map — Map with device markers and real-time position updates
• Device Status System — 3-tier status (Active, Inactive, Offline) with color-coded markers
• Real-Time Updates — WebSocket connection for live position streaming with sub-second latency
• Trip Visualization — View trip paths with waypoints and route details (single-device mode)
• Device Popups — Detailed device information including position, speed, heading, accuracy, display name, and timestamps
• Driver Display Names — Human-readable names on map markers and popups (when metadata is configured)

Location Sharing

Create and manage share sessions directly from the embedded tracker:

1. Click a device marker to open its popup
2. Click the "Share" button
3. Configure the share: recipient name, notes, expiry, speed/heading toggles, destination
4. Click "Create Share Link" to generate a secure tracking link
5. Copy and send the link to your recipient

Active sessions are listed in the status modal and can be terminated at any time. See the Location Sharing guide for full details.

Speed Monitoring

Configure speed limits with visual alerts for devices that exceed the threshold.

URL parameter format:

• maxspeed=80 — Defaults to km/h (or mph if units=imperial)
• maxspeed=80kmh — Explicit km/h
• maxspeed=50mph — Explicit mph

Visual indicators:

• Red border on device markers when speeding
• Red waypoints on trip paths at speeding locations
• Speeding device count in the status modal

Speed limits can also be configured interactively via the status modal without changing the URL.

Unit Conversion

All sensor data is delivered in SI units (speed in m/s, distance in meters). The SPA performs client-side conversion based on the units parameter:

Device Status System

Devices offline for more than 10 minutes are automatically removed from the map.

Single-Device vs Multi-Device Mode

Hide Overlay UI

For customer-facing portals or kiosk displays where floating controls are not desired, use hideUI=true to produce a clean map with no overlay buttons.

<iframe
  src="https://spa.telematicssdk.com/live-tracking/embedded?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT&hideUI=true"
  width="100%"
  height="600px"
  style="border: none;">
</iframe>

The map, device markers, popups, and real-time updates all continue to work normally — only the floating status button and fit-all button are hidden.

Example Integrations

<!-- Basic multi-device tracking (world view) -->
<iframe src="https://spa.telematicssdk.com/live-tracking/embedded?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT"></iframe>

<!-- Single device auto-focus -->
<iframe src="https://spa.telematicssdk.com/live-tracking/embedded?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT&devicetoken=YOUR_DEVICE"></iframe>

<!-- Regional monitoring — London -->
<iframe src="https://spa.telematicssdk.com/live-tracking/embedded?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT&lat=51.5074&lng=-0.1278&zoom=8&units=metric"></iframe>

<!-- Speed monitoring with 80 km/h limit -->
<iframe src="https://spa.telematicssdk.com/live-tracking/embedded?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT&maxspeed=80kmh"></iframe>

<!-- Clean embed for customer portal (no UI overlay) -->
<iframe src="https://spa.telematicssdk.com/live-tracking/embedded?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT&hideUI=true&units=imperial"></iframe>

<!-- Full configuration -->
<iframe src="https://spa.telematicssdk.com/live-tracking/embedded?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT&units=imperial&date_format=iso&timezone=America/New_York&maxspeed=55mph&lat=40.7128&lng=-74.0060&zoom=10"></iframe>

<!-- Debug mode for troubleshooting -->
<iframe src="https://spa.telematicssdk.com/live-tracking/embedded?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT&debug=true"></iframe>

Full-Page Integration Example

<!DOCTYPE html>
<html>
<head>
    <title>Fleet Tracking Portal</title>
    <style>
        .tracker-container {
            width: 100%;
            height: 600px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
        }
        .tracker-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <div class="tracker-container">
        <iframe
            class="tracker-iframe"
            src="https://spa.telematicssdk.com/live-tracking/embedded?instanceId=YOUR_INSTANCE_ID&jwt=YOUR_JWT_TOKEN"
            allow="clipboard-write">
        </iframe>
    </div>
</body>
</html>

Using the Tracker Constructor

Instead of manually assembling URL parameters, use the Tracker Constructor — a visual tool that lets you configure all options through a form, preview the result live, and generate a ready-to-use embed URL.