Maps UI SDK - 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 MapsGL timeline 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

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