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

[hupe13]

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:

leaflet-elevation/src/utils.js

Lines 4 to 12 in bd9316b

	export const Colors = {
	'lightblue': { area: '#3366CC', alpha: 0.45, stroke: '#3366CC' },
	'magenta' : { area: '#FF005E' },
	'yellow' : { area: '#FF0' },
	'purple' : { area: '#732C7B' },
	'steelblue': { area: '#4682B4' },
	'red' : { area: '#F00' },
	'lime' : { area: '#9CC222', line: '#566B13' }
	};

leaflet-elevation/src/control.js

Line 205 in bd9316b

L.extend(_.Colors, opts.colors || {});

How should I do that?

Thank you very much.

[hupe13]

Partially solved. An option in elevationControl like:

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

But stroke-width is not correct yet.

[Raruto]

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):

leaflet-elevation/src/control.js

Lines 519 to 554 in bd9316b

	/**
	* Add some basic colors to leaflet canvas renderer (preferCanvas: true).
	*/
	_fixCanvasPaths() {
	let oldProto = L.Canvas.prototype._fillStroke;
	let control = this;
	let theme = this.options.theme.split(' ')[0].replace('-theme', '');
	let color = _.Colors[theme] || {};
	L.Canvas.include({
	_fillStroke(ctx, layer) {
	if (control._layers.hasLayer(layer)) {
	let options = layer.options;
	options.color = color.line || color.area || theme;
	options.stroke = !!options.color;
	oldProto.call(this, ctx, layer);
	if (options.stroke && options.weight !== 0) {
	let oldVal = ctx.globalCompositeOperation || 'source-over';
	ctx.globalCompositeOperation = 'destination-over'
	ctx.strokeStyle = color.outline || '#FFF';
	ctx.lineWidth = options.weight * 1.75;
	ctx.stroke();
	ctx.globalCompositeOperation = oldVal;
	}
	} else {
	oldProto.call(this, ctx, layer);
	}
	}
	});
	},

[hupe13]

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]

But stroke-width is not correct yet.

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

leaflet-elevation/src/control.js

Line 543 in bd9316b

ctx.strokeStyle = color.outline || '#FFF';

For more info:

• https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle