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

Map Centering Behavior

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

1. Custom Coordinates (lat/lng provided)

• Centers map on the specified location with optional zoom level
• Shows all devices in the area around the specified coordinates
• Perfect for regional monitoring or area-specific tracking

2. Single Device Mode (devicetoken provided)

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

3. Multi-Device Mode (no coordinates, no devicetoken)

• Maintains world view showing global device distribution
• Does NOT auto-center on the first device
• Perfect for fleet overview and global monitoring

4. Combined Mode (coordinates + devicetoken)

• Starts at the specified location
• Auto-focuses on the device when data becomes available
• Useful for monitoring specific devices in known regions

Coordinate Parameters

Supported Parameter Names:

• Latitude: lat, latitude
• Longitude: lng, lon, longitude
• Zoom: zoom

Parameter Validation:

• Latitude: Must be between -90 and 90 (decimal degrees)
• Longitude: Must be between -180 and 180 (decimal degrees)
• Zoom: Must be between 3 and 18 (integer)
• Invalid values: Ignored and fallback to default behavior

Example Coordinate Formats:

# Standard format
?lat=40.7128&lng=-74.0060&zoom=10

# Alternative longitude format
?lat=51.5074&lon=-0.1278&zoom=12

# Full parameter names
?latitude=34.0522&longitude=-118.2437&zoom=8

# Mixed formats (all valid)
?lat=48.8566&longitude=2.3522&zoom=11

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 (world view) -->
<iframe src="https://portal-apis.telematicssdk.com/embedded-map?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT"></iframe>

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

<!-- Regional monitoring - New York City -->
<iframe src="https://portal-apis.telematicssdk.com/embedded-map?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT&lat=40.7128&lng=-74.0060&zoom=10"></iframe>

<!-- European fleet monitoring - London -->
<iframe src="https://portal-apis.telematicssdk.com/embedded-map?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT&lat=51.5074&lng=-0.1278&zoom=8&units=metric"></iframe>

<!-- Single device with imperial units and custom location -->
<iframe src="https://portal-apis.telematicssdk.com/embedded-map?instanceId=YOUR_INSTANCE&devicetoken=YOUR_DEVICE&jwt=YOUR_JWT&units=imperial&lat=34.0522&lng=-118.2437&zoom=12"></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&lat=40.7128&lng=-74.0060&zoom=10"></iframe>

<!-- Debug mode for troubleshooting -->
<iframe src="https://portal-apis.telematicssdk.com/embedded-map?instanceId=YOUR_INSTANCE&jwt=YOUR_JWT&debug=true"></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

Data Handling

Important Notes:

• Raw Sensor Data: The SPA receives speed in m/s and distance in meters
• Client-side Conversion: All unit conversions happen in the browser
• Real-time Processing: WebSocket data is processed immediately for live updates
• Fallback Strategy: Uses REST API for initial data, WebSocket for real-time updates
• Caching: Intelligent caching of device positions and trip data
• Map Centering: URL parameters are parsed and validated on page load
• Auto-Focus: Single device mode automatically centers on device when data arrives
• World View: Multi-device mode maintains global overview without auto-centering

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>