Polyline color is changed to black

[ZhukDmitry]

Subject of the issue

I display my KML or GPX files by polylines, I define its color and show it on map. But when I apply to show elevation, I got my lines in black color. I used old version before (0.6.8) - and all was OK. But when I switched to the last version - I got incorrect behavior

Your environment

• leaflet-elevation: 2.2.8
• leaflet: 1.9.3
• browser: FireFox
• operating system: win11 and version desktop

Steps to reproduce

• create map
• create polyline
• create elevation control
• add polyline data to elevation control

var map = new L.Map('map');
var controlElevation = L.control.elevation(options).addTo(map);

var fv_path = L.polyline(path_coordinates , path_options);  

controlElevation.addData(fv_path);
controlElevation._updateSummary();

// remove color overriden by plugin (function addData)
if (typeof fv_path._path !== 'undefined') 
{
 L.DomUtil.removeClass(fv_path._path, 'elevation-polyline');
 L.DomUtil.removeClass(fv_path._path, fv_elevation_theme);             
}      

Expected behaviour

I expected removed class 'elevation-polyline', which is break styles

this CSS is applied to my line

.elevation-polyline {
  stroke: var(--ele-poly,var(--ele-area,#000));
}

Actual behaviour

Polyline has not expected color, CSS class is not removed

Ie my question how suppress applying CSS class 'elevation-polyline' or how get back my line color

[Raruto]

I expected removed class 'elevation-polyline', which is break styles

this CSS is applied to my line

.elevation-polyline {
 stroke: var(--ele-poly,var(--ele-area,#000));
}

Hard to tell if you don't provide a demo reproducing this issue..

Can't you simply use some custom css? (eg. Using CSS variables)

👋 Raruto

[ZhukDmitry]

Hi

I did little example https://jsfiddle.net/DmitryZhuk/14m9fhnL/50/

Line is red, if you comment elevation control creating you'll see my initial line style

And you can see that it is due to "elevation-polyline" CSS class on path element

[Raruto]

@ZhukDmitry I haven't checked in depth if this is a bug (ie. related to the use of fv_elevation.addData(fv_path); instead for example of raw gpx files).

But doing so I think it should fix your situation:

L.control.elevation({
 ...
 polyline: { className: '', }
});

For more info:

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

[ZhukDmitry]

Thanks a lot. It fixed for my case. You can close issue. And thank you for your work