Raruto / leaflet-elevation

Leaflet plugin that allows to add elevation profiles using d3js
GNU General Public License v3.0
255 stars 85 forks source link

Polyline layer turns black after turning off all legend filters on custom colors #279

Closed hupe13 closed 12 months ago

hupe13 commented 1 year ago

Hi Raruto,

the solution of this issue works with default themes and colors only. For custom colors like in your example with a custom theme it doesn't work.

The track is black, if preferCanvas is false and if I turn all legend filters off. If I set preferCanvas to true, the color of the track is black from the beginning and does not change.

I think, I have to change something for opt.colors:

https://github.com/Raruto/leaflet-elevation/blob/bd9316bd1b7e7784b3bf3d812960eaa808ad94d6/src/utils.js#L4-L12

https://github.com/Raruto/leaflet-elevation/blob/bd9316bd1b7e7784b3bf3d812960eaa808ad94d6/src/control.js#L205

How should I do that?

Thank you very much.

hupe13 commented 1 year ago

Partially solved. An option in elevationControl like:

colors: {custom: { area: '#9CC222', line: '#FF0000' }},

But stroke-width is not correct yet.

Raruto commented 12 months ago

But stroke-width is not correct yet.

@hupe13 it might be that you need to use a different property name (not all css properties are mapped the same way on the js side):

https://github.com/Raruto/leaflet-elevation/blob/bd9316bd1b7e7784b3bf3d812960eaa808ad94d6/src/control.js#L519-L554

hupe13 commented 12 months ago

I have given up doing it this way. It's too complicated for me. I set prefercanvas back to false and it works as described here.

Thank you very much.

Raruto commented 12 months ago

But stroke-width is not correct yet.

@hupe13 At first glance, color.outline should be the property you have been looking for:

https://github.com/Raruto/leaflet-elevation/blob/bd9316bd1b7e7784b3bf3d812960eaa808ad94d6/src/control.js#L543

For more info: