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

leaflet-elevation/src/control.js

Lines 919 to 922 in ea15556

	if (!this._chartEnabled) {
	this._chart._hideDiagramIndicator();
	this._marker.remove();
	}

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: #235).

If I comment out these lines

leaflet-elevation/src/control.js

Lines 919 to 922 in ea15556

	if (!this._chartEnabled) {
	this._chart._hideDiagramIndicator();
	this._marker.remove();
	}

it works for me too.

Actually, the following should be the real cause:

leaflet-elevation/src/control.js

Lines 912 to 913 in ea15556

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

Your example works as expected.

Probably not implemented on canvas layers:

leaflet-elevation/examples/leaflet-elevation.html

Line 36 in ea15556

preferCanvas: true,

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:

leaflet-elevation/src/control.js

Lines 912 to 913 in ea15556

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

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:

leaflet-elevation/src/control.js

Line 913 in bd9316b

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

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.