Polyline layer turns black after turning off all legend filters (`legend: true` + `preferCanvas: false`)
hupe13 opened this issue · 6 comments
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
it works for me too.
What is the expected behavior? Or what is missing in my code?
Thank you very much.
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
it works for me too.
Actually, the following should be the real cause:
leaflet-elevation/src/control.js
Lines 912 to 913 in ea15556
Your example works as expected.
Probably not implemented on canvas layers:
where CSS rules must be transposed into JS code, eg: L.Control.Elevation::_fixCanvasPaths()
👋 Raruto
Hi Raruto,
after setting map.options.preferCanvas = true; it works now.
Thank you very much.
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
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));`
@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
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.
Hi Raruto,
I changed this:
leaflet-elevation/src/control.js
Line 913 in bd9316b
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.