Timelines

Set Timeline

Using the setTimelineConfig(...) API function user can set time filter timeline configuration that allows us to set timeline visibility, play/pause the animation, set the speed, set the time interval, change the time format and timezone.

UnfoldedMap.setTimelineConfig(
  config: TimelineConfig
): Promise<TimelineConfig>

interface TimeInterval {
  startTime: number;
  endTime: number;
}
interface TimelineConfig {
  idx: number;
  currentTimeInterval?: TimeInterval;
  isVisible?: boolean;
  isAnimating?: boolean;
  speed?: number;
  timezone?: string;
  timeFormat?: string;
}

Example

const unfoldedMap = new UnfoldedMap({
  mapUUID: 'MAP-UUID-GOES-HERE',
  embed: true,
  appendToDocument: true
});
const startTime = new Date('2020.10.29').getTime();
const endTime = new Date('2020.10.31').getTime();
const config = {
  idx: 0,
  currentTimeInterval: {
    startTime: startTime,
    endTime: endTime
  },
  timezone: 'Europe/Berlin',
  timeFormat: 'DD.MM.YYYY. HH:mm'
};
unfoldedMap.setTimelineConfig(config).then(data => {
  console.log(data);
});

Get Timeline Information

Using the getTimelineInfo() API function user can get the information object for the time filter timeline control.

UnfoldedMap.getTimelineInfo(): Promise<TimelineInfo>

interface TimelineInfo {
  dataId: Array<string>;
  domain: Array<number>;
  isVisible: boolean;
  enlargedHistogram: Array<any>;
  histogram: Array<any>;
  value: Array<number>;
  speed: number;
  step: number;
  isAnimating: boolean;
}