Time calculation is incorrect when using imperial units

[aronsommer]

Hi,

I noticed that the time calculation in src/handlers/time.js is incorrect when the imperial option is set to true.

The current code assumes the distance is always in metric units, which leads to an inaccurate time when the distance is displayed in miles.

Here is a more robust fix that resolves the issue by always using the original metric distance for the time calculation.

In src/handlers/time.js, inside the pointToAttr function, I replaced this:

if (i > 0) {
  let dx = (this._data[i].dist - this._data[i - 1].dist);
  let t0 = this._data[i - 1].time.getTime();
  point.meta.time = new Date(t0 + ( dx / this._timeAVGSpeed) * this.options.timeFactor * 1000);
}

With this:

if (i > 0) {
  let dx = this._data[i].latlng.distanceTo(this._data[i-1].latlng) / 1000; // distance in km
  let t0 = this._data[i - 1].time.getTime();
  point.meta.time = new Date(t0 + ( dx / this._timeAVGSpeed) * this.options.timeFactor * 1000);
}

This ensures the time calculation is always accurate, regardless of the display units.

Thanks for the great library!

[hupe13]

My WordPress Plugin uses leaflet-elevation. My own code seems to fix this problem. I used the whole duration.

The main reason for the code was that I believe, what do the seconds matter if the total time is, for example, 5 hours?

I have an example page showing different units. It works. No one has complained so far.

[Raruto]

@aronsommer @hupe13 this would also solve #170?

[aronsommer]

Hi @Raruto,

In www.openmapeditor.com I hide the time axis at the top of the elevation chart. I also use a different time format (Walking Time: 3 d 8 h 57 m 51 s) in the summary and the tooltip instead of your original time format (Total Time: 3d 08:57'51"), because I think it fits better with the other metrics shown in the summary. In the tooltip, before the time, I also display the letter t instead of T because the y is also lowercase.

Regarding issue #170: When I enable the time axis at the top and compare the values for a long track with the ones in the tooltip, they seem to be correct. However, it seems that when the .mouse-focus-line is exactly over the dotted .elevation-control .axis line, there is a minimal difference between the value displayed in the tooltip and the value in the top time axis.

Here is my modified time.js script: https://github.com/openmapeditor/openmapeditor/blob/main/leaflet-elevation-2.5.1/src/handlers/time.js

[Raruto]

I use a different time format (Walking Time: 3 d 8 h 57 m 51 s) in the summary and the tooltip instead of your original time format (Total Time: 3d 08:57'51")

Yeah, it depends a bit on the purpose of the graphic / the target audience, e.g. if you deal with a lot of short distances (like sports competitions or short hiking tracks).

In the tooltip, before the time, I also display the letter t instead of T because the y is also lowercase.

Probably it's capitalized because it's considered as a "cumulative/computed" value (within code "t" could be an "integer, and not a date/string).

there is a minimal difference between the value displayed in the tooltip and the value in the top time axis.

I wouldn't consider 20 minutes minimal :)

Anyway if it doesn't break too much tests, go ahead and send a PR.

👋 Raruto

[aronsommer]

I wouldn't consider 20 minutes minimal :)

The issue is that the time in the tooltip only updates when the cursor is directly over an elevation data point. For a path with few points, this causes the time to update infrequently.

Therefore, the tooltip value and the value in the top time axis will only match when the cursor is perfectly aligned with one of those specific data points.

[hupe13]

this would also solve #170?

No, it does not. I guess, this line is wrong, it takes the wrong values to compute and show the duration. But I can't solve it. I dont know, how to get the associated distance and duration.

[aronsommer]

I did following test:

In test/index.html you use url: "../examples/time.gpx",.

This gives us Durata: 02:53'36" when imperial is set to true and also when its set to false.

When I use url: "../examples/tracks/very-long.gpx", instead it gives us Durata: 3d 01:52'38" when imperial is set to true.

But when imperial is set to false it gives us Durata: 4d 22:53'38".

When I use url: "../examples/tracks/very-long.gpx", and in src/handlers/time.js I change line 43 to let dx = this._data[i].latlng.distanceTo(this._data[i-1].latlng) / 1000; // distance in km it gives us Durata: 4d 22:53'35" when imperial is set to true and also when its set to false.

When I use url: "../examples/tracks/only-few-points.gpx", you can clearly see that its impossible that the durata value in the tooltip can match the value in top time axis when the cursor is over the dotted line because the time in the tooltip only updates when the cursor is directly over an elevation data point.

So I think this is why the problem #170 exists.

You can check it here in my branch fix-time-calc: https://github.com/aronsommer/leaflet-elevation/tree/fix-time-calc

[hupe13]

problem #170

What is d ? How is this calculated?

			tickFormat : (d)  => (d == 0 ? '' : opts.xTimeFormat(d)),

[aronsommer]

What is d ? How is this calculated?

I have no time to investigate right now but maybe Gemini can help you: https://g.co/gemini/share/e951748a9e33

[hupe13]

This is not true. d is a sequential number from 1 to the count of vertical lines. console.log(d) shows this. It should be the duration on this distance, but it isn't it.

[aronsommer]

Thank you @hupe13 . I had no time to investigate, just thought maybe Gemini can help you to answer your question...