Possibility to use the horizontal ruler for other data than elevation?

[MI-KY]

I'm actually trying to use leaflet-elevation to visualize some data of a GPS track and it looks already very good - thanks for all the work on this! I also saw the horizontal "ruler" on the right side of the chart which can visually mark the parts of a track that are higher / lower than the selected value of altitude. I'm wondering if it would possible to tell leaflet-elevation to use other data than the altitude when using the ruler? For example a temperature value, so that the user can choose a temperature limit to visualize inside the track?

[Raruto]

Hi @MI-KY,

I also saw the horizontal "ruler" on the right side of the chart which can visually mark the parts of a track that are higher / lower than the selected value of altitude. I'm wondering if it would possible to tell leaflet-elevation to use other data than the altitude when using the ruler? For example a temperature value, so that the user can choose a temperature limit to visualize inside the track?

I don't think out of the box (I honestly don't remember), I suggest you take a close look at the related code to be really sure.

With a little knowledge of d3js you could even build your own control, but in any case pull requests for improvements are always welcome (if I remember correctly in other parts of the code it is already possible to specify an yAttr different from altitude, eg. hotline ?)

https://github.com/Raruto/leaflet-elevation/blob/868179234d8e9b8f7beaea57d0e34d8bd79a2622/src/components/d3.js#L359-L428

https://github.com/Raruto/leaflet-elevation/blob/868179234d8e9b8f7beaea57d0e34d8bd79a2622/src/control.js#L622

https://github.com/Raruto/leaflet-elevation/blob/868179234d8e9b8f7beaea57d0e34d8bd79a2622/src/components/chart.js#L276-L313

https://github.com/Raruto/leaflet-elevation/blob/868179234d8e9b8f7beaea57d0e34d8bd79a2622/src/control.js#L879-L881

https://github.com/Raruto/leaflet-elevation/blob/868179234d8e9b8f7beaea57d0e34d8bd79a2622/src/control.js#L1259-L1264

Have a nice dig in code 👋 Raruto

[Raruto]

this should be the yAttr option i was referring to (although i never use it)

https://github.com/Raruto/leaflet-elevation/blob/868179234d8e9b8f7beaea57d0e34d8bd79a2622/src/options.js#L66

[MI-KY]

Hi @Raruto , thanks for your reply! I will try my best as I'm completly new to all of this 🙂 .

[MI-KY]

For everyone looking to achieve the same: @Raruto is right: yAttr can override the default setting for the ruler. You have to define this inside the options of elevationControl where also the handlers are defined. https://github.com/Raruto/leaflet-elevation/blob/868179234d8e9b8f7beaea57d0e34d8bd79a2622/examples/leaflet-elevation_extended-ui.html#L272

So you set altitude to false and for yAttr you set the name of the data to show. This now works perfectly :slightly_smiling_face: .

My only problem is that I would need to be able to change the value of yAttr dynamically (basing on the decision of the user) - as I'm completely new to JavaScript at the moment this seams not possible to me as the options are defined once on loading the page...? I will try to find a solution :slightly_smiling_face: .