Add new handler: src/handlers/lineargradient.js

[Raruto]

Preview

Add support for graduated chart profiles colors:

Sample usage:

L.control.Elevation({
  altitude: true,
  distance: true,
  handlers: [ 'Altitude', 'Distance', 'LinearGradient', ],
  linearGradient: {
    attr: 'z',
    path: 'altitude',
    range: { 0.0: '#008800', 0.5: '#ffff00', 1.0: '#ff0000' },
    min: 'elevation_min',
    max: 'elevation_max',
  },
})

Further information:

• Make use of <linearGradient> 👉 when preferCanvas: false
• Make use of CanvasGradient 👉 when preferCanvas: true

Closes: #251
Partially handles: #232

[Raruto]

@hupe13 do you confirm that this is the patch you proposed in here? 👉 #232

[Raruto]

@jtpio it's definitely not perfect (performances ?), but please let me know if you already see any room for improvement.

[hupe13]

do you confirm that this is the patch you proposed in here? 👉 #232

Yes it works right now on Chrome and Safari.

But this problem still exists on Safari:

This is your /examples/leaflet-elevation.html. I set preferCanvas: true,.

[jtpio]

@jtpio it's definitely not perfect (performances ?), but please let me know if you already see any room for improvement.

Thanks @Raruto this is looking pretty good already!

Just a minor note on the screenshot posted above. It looks like the red color should probably be associated with the steeper sections of the elevation graph?

[Raruto]

@jtpio ref: #257 (comment)

I tried to write an algorithm as similar as possible to the one used to generate the hotline colors:

leaflet-elevation/libs/leaflet-hotline.js

Lines 238 to 266 in e0c68cb

	_drawHotline: function (ctx) {
	var i, j, dataLength, path, pathLength, pointStart, pointEnd,
	gradient, gradientStartRGB, gradientEndRGB;
	ctx.lineWidth = this._weight;
	for (i = 0, dataLength = this._data.length; i < dataLength; i++) {
	path = this._data[i];
	for (j = 1, pathLength = path.length; j < pathLength; j++) {
	pointStart = path[j - 1];
	pointEnd = path[j];
	// Create a gradient for each segment, pick start end end colors from palette gradient
	gradient = ctx.createLinearGradient(pointStart.x, pointStart.y, pointEnd.x, pointEnd.y);
	gradientStartRGB = this.getRGBForValue(pointStart.z);
	gradientEndRGB = this.getRGBForValue(pointEnd.z);
	gradient.addColorStop(0, 'rgb(' + gradientStartRGB.join(',') + ')');
	gradient.addColorStop(1, 'rgb(' + gradientEndRGB.join(',') + ')');
	ctx.strokeStyle = gradient;
	ctx.beginPath();
	ctx.moveTo(pointStart.x, pointStart.y);
	ctx.lineTo(pointEnd.x, pointEnd.y);
	ctx.stroke();
	}
	}
	}
	};

but as you can see, I think that there is a shift in here: src/handlers/lineargradient.js.

By chance, are you able to take a look at how to fix it?

It took me quite a bit of work to get to this point (and right now I don't think I'll be using this code any time soon..)

[Raruto]

meanwhile I'm going to merging this, feel free to open a new pull request to improve or fix this

[Raruto]

Feature released in v2.5.0

[jtpio]

Nice thanks @Raruto!