Timeline bar / Tic Label

CesiumJS
1

I want to update the Timeline bar to use my local time.
It looks like its:-

  • cesium-timeline-bar
  • cesium-timeline-ticLabel

The examples I have seen talk about viewer.timeline.makeLabel however that does not appear to exist anymore.

Is there anyway to update the tic labels?

2

Hi Andrew,

I’m aware of a user who used jQuery to change the tickLabel:

This example sets the start and end date, which may not be what you are looking for but it does allow customization of the timeline: Cesium Sandcastle

Currently I am not aware of an easy way to change the timeline bar to use local time.

1 Like
3

Cesium.Timeline.prototype.makeLabel is what you want.

Here is a Live demo

Relevant snippet:

// Override date functions to give local time
Cesium.Timeline.prototype.makeLabel = function (time) {
  const localDate = Cesium.JulianDate.toDate(time);
  return localDate.toLocaleString();
};
4 Likes
4

Thanks very much Matt!

If anyone is reading this and using TypeScript this is what I did to get it working as it was saying makeLabel didn’t exist. I also had to add this BEFORE I created the viewer

    (Timeline.prototype as any).makeLabel = (time) => {
      const localDate = JulianDate.toDate(time);
      return localDate.toLocaleString();
    };
1 Like