Embedded SPA via iFrame

Overview

For quick integration without backend development, you can embed our real-time tracking interface directly into your web portal using an iFrame. This provides a complete tracking solution with interactive maps, device lists, real-time updates, trip visualization, and advanced features like speed monitoring.

SPA URL

https://portal-apis.telematicssdk.com/embedded-map

URL Parameters

Parameter	Required	Description
`instanceId`	Yes	Your instance UUID for data filtering
`jwt`	Yes	JWT token for authentication
`devicetoken`	No	Specific device token for single-device mode
`units`	No	Unit system: 'metric' (default) or 'imperial' for display
`timezone`	No	Timezone for timestamps (default: 'UTC')
`date_format`	No	Date format: 'unix' (default), 'iso', or 'localized'
`maxspeed`	No	Speed limit for monitoring (e.g., '80kmh', '50mph')

SPA Features

The embedded SPA provides a comprehensive tracking interface with:

Core Features:

Interactive Map: OpenStreetMap with device markers and real-time updates
Device Status System: 3-tier status (Active, Inactive, Offline) with color-coded icons
Real-time Updates: WebSocket connection for live position streaming
Trip Visualization: Show trip paths with waypoints and route details
Device Management: Device list with detailed information and controls

Advanced Features:

Speed Monitoring: Configurable speed limits with visual alerts
Unit Conversion: Client-side conversion between metric/imperial units
Status Modal: Comprehensive dashboard with statistics and controls
Responsive Design: Mobile-friendly interface with touch controls
Copy Functions: Copy device tokens, coordinates, and timestamps

Device Status System:

Active (Green): Last message within 1 minute
Inactive (Yellow): Last message 1-6 minutes ago
Offline (Red): Last message over 6 minutes ago
Auto-cleanup: Devices offline for 10+ minutes are removed from map

Example Integrations

<!-- Basic multi-device tracking -->
<iframe src="https://portal-apis.telematicssdk.com/embedded-map?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT"></iframe>

<!-- Single device with imperial units -->
<iframe src="https://portal-apis.telematicssdk.com/embedded-map?instanceId=YOUR_INSTANCE&devicetoken=YOUR_DEVICE&jwt=YOUR_JWT&units=imperial"></iframe>

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

<!-- Complete configuration with all options -->
<iframe src="https://portal-apis.telematicssdk.com/embedded-map?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT&units=imperial&date_format=iso&timezone=America/New_York&maxspeed=55mph"></iframe>

Speed Monitoring

The SPA supports configurable speed monitoring with visual alerts:

URL Parameter Format:

maxspeed=80 (defaults to km/h)
maxspeed=80kmh (explicit km/h)
maxspeed=50mph (miles per hour)

Visual Indicators:

Red Border: Device icons show red border when speeding
Red Waypoints: Trip path points are colored red for speeding locations
Speed Alerts: Popup warnings show speed violations
Statistics: Speed monitoring stats in status modal

Interactive Configuration:

Set speed limits directly in the status modal
Enable/disable monitoring without URL changes
Real-time updates of speeding device counts

Basic iFrame Integration

<!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://portal-apis.telematicssdk.com/embedded-map?instanceId=YOUR_INSTANCE_ID&jwt=YOUR_JWT_TOKEN"
            allow="geolocation"
            sandbox="allow-scripts allow-same-origin allow-popups allow-forms">
        </iframe>
    </div>
</body>
</html>