Additional styling and .hidden class

[RaunoT]

Hi,

First of all, thank you for this plugin, it has helped me a lot!

I would like to ask if you could please change the name of .hidden class in leaflet-elevation.css, because it is conflicting with TailwindCSS .hidden class. Would be great if it would be something library specific like the other classes, e.g .leaflet-hidden.

Secondly, would it be possible to remove bottom and side "borders" somehow from the graph (marked in red)?

Lastly, what would be the best way to go about disabling the scroll zoom for elevation graph (scrolling on the elevation graph zooms in on the map)?

[Raruto]

Hi Rauno,

I would like to ask if you could please change the name of .hidden class in leaflet-elevation.css, because it is conflicting with TailwindCSS .hidden class. Would be great if it would be something library specific like the other classes, e.g .leaflet-hidden.

Isn't the final effect the same? (however, pull requests are well accepted)

---

Secondly, would it be possible to remove bottom and side "borders" somehow from the graph (marked in red)?

You can try such a thing:

.elevation-control.elevation .axis path {
    display: none;
}

---

Lastly, what would be the best way to go about disabling the scroll zoom for elevation graph (scrolling on the elevation graph zooms in on the map)?

This is the function that takes care of what you describe:

https://github.com/Raruto/leaflet-elevation/blob/a5a5b2f9b2abd417e1ae72f4253e3b455600edd5/src/control.js#L644-L653

I usually use this library in conjunction with the leaflet-gesture-handling plugin (for which it is disabled by default).

If you don't want to use that plugin, I point out this thread which describes a simple code to change the default behavior of the library. (otherwise, pull requests are well accepted)

---

Have a nice day, Raruto

[RaunoT]

Hi Raruto,

Thanks for the swift reply.

Isn't the final effect the same? (however, pull requests are well accepted)

No, in TailwindCSS as an example, .hidden applies display: none. I think it would be a better practice in general to avoid very general words. I have submitted a PR regarding this to rename .hidden to .leaflet-hidden.

You can try such a thing:

.elevation-control.elevation .axis path {
display: none;
}

Yes, I have actually already hidden the axis, however those borders a drawn on the graph itself it would seem (.elevation-control.elevation .area path) so I guess there is no way to control that, other than by tweaking the way the graph itself is drawn?

I usually use this library in conjunction with the leaflet-gesture-handling plugin (for which it is disabled by default).

Another great library! Thank you, using this has resolved my issue and saved me yet again from having to come up with my own solution.

All the best, Rauno

[Raruto]

Yes, I have actually already hidden the axis, however those borders a drawn on the graph itself it would seem (.elevation-control.elevation .area path) so I guess there is no way to control that, other than by tweaking the way the graph itself is drawn?

I don't think I understand, can you rephrase it?

There is currently no specific property (in addition to the theme option) designed for changing chart styles. If you are good with d3.js you can go with that, otherwise, you can add some simple css rules in order to customize the svg container.

[Raruto]

https://github.com/Raruto/leaflet-elevation/pull/92 released as 1.5.4