MapsGL Timeline Control

The MapsGLTimelineControl is a specialized component designed for MapsGL, leveraging and enhancing the Timeline component to offer a comprehensive interface for time-based map animations. It includes built-in navigation, dynamic tick marks and date labels, customizable time ranges, and an expandable, responsive UI, making it ideal for time-driven visualizations on MapsGL powered maps.

Features

• Automatic MapsGL Integration: Connects directly to the MapsGL timeline system through the MapsGLMapControllerProvider
• Responsive Design: Includes an expandable interface that adapts to available space
• Time Range Management: Built-in controls for adjusting the timeline's date range
• Animation Speed Control: Configurable animation playback speeds
• Loading States: Automatic loading indicators during data fetching

Usage

The component must be used within a MapsGLMapControllerProvider to access the map controller:

import { MapsGLMapControllerProvider, MapsGLTimelineControl } from '@xweather/maps-ui-sdk';
 
const MapWithTimeline = () => (
    <MapsGLMapControllerProvider
        accessKeys={accessKeys}
        strategy="mapbox"
        map={mapInstance}
    >
        <MapsGLTimelineControl />
    </MapsGLMapControllerProvider>
);

Interface

The control provides several interactive elements:

Animation Controls

• Play/Pause button for starting and stopping animations
• Current time display
• Progress indicator showing position in the time range

Settings Panel

Accessible via the settings icon, provides controls for:

• Adjusting start and end dates
• Modifying animation speed

Timeline Track

• Draggable scrubber for manual time selection
• Dynamic tick marks showing time intervals that are automatically generated based on the current time range and available space
• Buttons for jumping to start/end/current time

Customization

While the UI of the MapsGLTimelineControl is preconfigured, the inital animation options are customizable via controller options passed to the MapsGLMapControllerProvider. For a full list of options, see the MapsGLMapControllerProvider (opens in a new tab) documentation.

    const mapsGLControllerConfig = {
        animation: {
            start: subHours(new Date(), 12),
            end: addHours(new Date(), 12)
        }
    }
 
    <MapsGLMapControllerProvider
        // ...
        options={mapsGLControllerConfig}
    >
        <MapsGLTimelineControl />
    </MapsGLMapControllerProvider>
);

It can be used as a reference for building custom timeline implementations using the base Timeline component. The source code demonstrates how to:

• Integrate with MapsGL's timeline system
• Handle loading states
• Manage animation controls
• Implement responsive layouts
• Integrate with the ExpandCollapseProvider for expand/collapse behavior
• Configure time range settings
• Customize date labels and tick marks
• Customize styling

Related Components

• Timeline: The base timeline component
• MapsGLMapControllerProvider: Required provider for MapsGL integration
• ExpandCollapseProvider: Handles the expand/collapse functionality