Add multiple plots for additional data besides Elevation

[fgebhart]

Hey there, thanks again for you work. I really love this plugin (and the leaflet-ui). I successfully integrated the leaflet-elevation plugin into my sports activity organizer - workoutizer.

Since it turns out really nice and was so simple to integrate, I'm now thinking about how to facilitate the functionality even further. Which is why I would like to know if it would be possible to somehow add additional plots for more activity data, e.g. heart rate, pace, speed, temperature, ...
It would be great to have multiple plots below each other displaying all kinds of data, which are all connected to each other via the hover cursor.

I am not asking you to do this for me, since it would clearly be above the scope of this project, rather than asking you to point me in the right directions, so I give it a try.

Thanks in advance!

[Raruto]

Hi Fabian,

I'm glad to know you like the leaflet-ui plugin too and thanks also for the mention inside your own project.

Which is why I would like to know if it would be possible to somehow add additional plots for more activity data, e.g. heart rate, pace, speed, temperature, ...
It would be great to have multiple plots below each other displaying all kinds of data, which are all connected to each other via the hover cursor.

This is definitely an interesting feature, but it requires a certain level of study and knowledge of this plugin, d3js and the leaflet ecosystem. Nothing too much complicated, but it's something that can take a while before it can be released.

For example, I know that the heightgraph plugin has a similar functionality on which you can rely on to take some inspiration.

As for the heart rate, pace, speed and temperature I know that the gpx plugin allows you to extract some of these parameters directly from the file (but I'm not sure if it can also calculate them for you).

I am not asking you to do this for me, since it would clearly be above the scope of this project, rather than asking you to point me in the right directions, so I give it a try.

If you actually care to understand how this library works, I suggest you start taking a quick look at the original plugin code. Although its operation may seem different, this library internally still relies heavily on the initial work of MrMufflon.

As far as you are concerned, in this other branch, I have also started a work of documentation and some code refactoring.

As usual, help and pull requests are welcome.

[Raruto]

PS here you can see a simple example which allows you to add custom external content to the svg chart

[fgebhart]

Hi Raruto,

thanks for the hints!

I do already have most of the data in the db of my application. It is parsed from fit files (Garmin) and gpx files. In order to plot it using your plugin, the data is read from the db, formatted as geojson and passed to the view. The data is passed as a list of lists containing the coordinates together with the elevation data, like

[[A, B, C], [A, B, C], ...]

where A is longitude, B is latitude and C is elevation. I was hoping to simply add a fourth value D (and a fifth E, and so on) to the list which could for example be temperature (pace, ...). For sure there would be even more adjustments necessary to enable your plugin to distinguish between the different list elements and create additional plots.

I will have a look into it.

Thanks again, feel free to close this issue :)

[Raruto]

I was hoping to simply add a fourth value D (and a fifth E, and so on) to the list which could for example be temperature (pace, ...).

The actual code implementation should be disconnected from the type of data contained / displayed (perhaps an approach to multiple arrays would be preferable). In this way you could switch from one element to another without having to necessarily define "strange" rules (in essence points are always x, y, z) regardless of the type of displayed. <-- that is, could the variable z be contained in several dedicated arrays?

Have a nice Sunday,
Raruto

[Raruto]

From version 1.2.0, this could be more feasible for anyone wishing to implement their own summary / chart

Examples:

• leaflet-elevation_slope-chart.html
• leaflet-elevation_extended-ui.html

More info at:

• src/slope.js
• src/components.js
• libs/extended-ui.js

D3:

• d3/area-chart

Greetings,
Raruto