Custom timeline control

This example demonstrates how to build a custom timeline control using the Timeline component. It shows how to create a timeline with playback controls, date/time display, and a scrubber track with responsive dates and tick marks.

Key Features

Custom timeline layout and styling
Playback controls (play/pause, skip to start/end)
Current date and time display
Interactive scrubber with tick marks
Custom date/time formatting

Implementation

First, create a basic TimelineContainer component that handles the layout and styling:

const TimelineContainer = ({ children }) => (
    <Timeline.Container className="bg-[#212A33] text-white p-4 rounded-lg">
        {children}
    </Timeline.Container>
);

Create a TimelineTrack component that handles the track, ticks, and scrubber:

const TimelineTrack = () => (
    <Timeline.Track className="border-l-2 border-white h-12 items-end text-xs mt-1 ml-4">
        <Timeline.Scrubber>
            <Timeline.TimeProgressIndicator className="w-1 h-full bg-blue-500" />
        </Timeline.Scrubber>
        <Timeline.Ticks>
            {(tick) => (
                <>
                    <Timeline.Tick className="bottom-0 w-px h-3 bg-white" tick={tick} />
                    <Timeline.TickDateText className="text-xs" tick={tick} />
                </>
            )}
        </Timeline.Ticks>
    </Timeline.Track>
);

The render prop pattern used here gives you full control over tick rendering, allowing you to customize the appearance of individual ticks and add conditional logic based on tick data.

Create a TimelineControls component for playback controls and time display:

const TimelineControls = () => (
    <VStack className="h-full items-between">
        <HStack className="items-center justify-center space-x-2">
            <Timeline.MoveToStart />
            <Timeline.AnimationControl className="size-8 rounded-full bg-white text-black" />
            <Timeline.MoveToEnd />
        </HStack>
        <HStack className="mt-2 w-32 space-x-1 text-xs">
            <Timeline.DateText className="font-semibold text-nowrap" />,
            <Timeline.TimeText className="lowercase text-nowrap w-10" />
        </HStack>
    </VStack>
);

Finally, bring everything together with the Timeline.Provider and integrate with your animation system:

const CustomTimeline = () => {
    const [currentDate, setCurrentDate] = useState(new Date());
    const startDate = subHours(new Date(), 2);
    const endDate = addHours(new Date(), 2);
 
    const handlePlay = () => {
        // Start your animation
    };
 
    const handlePause = () => {
        // Pause your animation
    };
 
    const handlePositionChange = (position) => {
        // Update animation position
    };
 
    return (
        <Timeline.Provider
            startDate={startDate}
            endDate={endDate}
            currentDate={currentDate}
            onPlay={handlePlay}
            onPause={handlePause}
            onPositionChange={handlePositionChange}
        >
            <TimelineContainer>
                <TimelineControls />
                <TimelineTrack />
            </TimelineContainer>
        </Timeline.Provider>
    );
};

You can integrate this timeline with any animation system by implementing the appropriate handlers. For a complete example of integrating with MapsGL's timeline system, see the Adding a Custom MapsGL Timeline Control example.

Examples Layers Provider