Polyline layer turns black after turning off all legend filters (`legend: true` + `preferCanvas: false`)

[hupe13]

Hi Raruto,

if I toggle all chart legend filter off, the polyline is black. Example.

Your example works as expected.

If I comment out these lines https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/src/control.js#L919-L922 it works for me too.

What is the expected behavior? Or what is missing in my code?

Thank you very much.

[Raruto]

Hi @hupe13,

if I toggle all chart legend filter off, the polyline is black. Example.

It should be the intended behavior (somehow related to: https://github.com/Raruto/leaflet-elevation/issues/235).

If I comment out these lines https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/src/control.js#L919-L922 it works for me too.

Actually, the following should be the real cause:

https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/src/control.js#L912-L913

Your example works as expected.

Probably not implemented on canvas layers:

https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/examples/leaflet-elevation.html#L36

where CSS rules must be transposed into JS code, eg: L.Control.Elevation::_fixCanvasPaths()

👋 Raruto

[hupe13]

Hi Raruto,

after setting map.options.preferCanvas = true; it works now.

Thank you very much.

[hupe13]

There are many (other) problems with setting map.options.preferCanvas = true; in my WordPress plugin.

Actually, the following should be the real cause:

https://github.com/Raruto/leaflet-elevation/blob/ea155564475c44941cb81a9df3eaf8d633ed90fc/src/control.js#L912-L913

Yes, it should be:

// toggle layer visibility on empty chart
this._layers.eachLayer(layer => layer.getElement && this._chartEnabled && this.options.polyline.className && _.toggleClass(layer.getElement && layer.getElement(), this.options.polyline.className + ' ' + this.options.theme, this._chartEnabled));

`

[Raruto]

@hupe13 umph, some additional code explanation would help (it's somewhat a cryptic condition).

Also, if you feel you have the time: 👉 gifcap.dev (just to show the before/after to others).

👋 Raruto

[hupe13]

The problem in my first post was about the black polyline when all legend filters are turned off. You told me two possibilities to solve the problem:

• setting preferCanvas: true
• the line 913 in /src/control.js

First, I set map.options.preferCanvas = true; and it seemed to work. Today I know, it works with the default theme colors only. I have some options in my WordPress plugin that allow to change the colors. And if the user does this, this solution does not work. So I analyzed the line 913 and I found the solution above. I changed this corresponding line in my repository. Additionally I must set preferCanvas to false and now it works for non default theme colors also.

[hupe13]

Hi Raruto,

I changed this: https://github.com/Raruto/leaflet-elevation/blob/bd9316bd1b7e7784b3bf3d812960eaa808ad94d6/src/control.js#L913

to

 this._layers.eachLayer(layer => layer.getElement && this._chartEnabled && this.options.polyline.className && _.toggleClass(layer.getElement && layer.getElement(), this.options.polyline.className + ' ' + this.options.theme, this._chartEnabled));

I tested it with your example using custom colors. You can see, it works. Toggle Altitude on and off.