Added new Option to disable gradients for single segments

README.md

@@ -77,6 +77,7 @@ You can use the following options to style the hotline:
 - **palette** - The config for the palette gradient in the form of `{ <stop>: '<color>' }`. `{ 0.0: 'green', 0.5: 'yellow', 1.0: 'red' }` per default. Stop values should be between `0` and `1`.
 - **min** - The smallest z value expected in the `data` array. This maps to the `0` stop value. Any z values smaller than this will be considered as `min` when choosing the color to use.
 - **max** - The largest z value expected in the `data` array. This maps to the `1` stop value. Any z values greater than this will be considered as `max` when choosing the color to use.
+- **discreteStrokes** - If true use the endpoint color for each line segement instead of a gradient
 
 
 ## Building
@@ -96,4 +97,4 @@ You can use the following options to style the hotline:
 ## Credits
 
 * [@mourner](https://github.com/mourner) for [Leaflet](https://github.com/Leaflet/Leaflet/) and [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat/)
-* [@orrc](https://github.com/orrc) for the name
+* [@orrc](https://github.com/orrc) for the name

src/leaflet.hotline.js

@@ -53,6 +53,7 @@
 		this._weight = 5;
 		this._outlineWidth = 1;
 		this._outlineColor = 'black';
+		this._discreteStrokes = false;
 
 		this._min = 0;
 		this._max = 1;
@@ -108,6 +109,15 @@
 			return this;
 		},
 
+		/**
+		 * Sets the color of the outline around the path.
+		 * @param {string} outlineColor - A CSS color value.
+		 */
+		discreteStrokes: function (discreteStrokes) {
+			this._discreteStrokes = discreteStrokes;
+			return this;
+		},
+
 		/**
 		 * Sets the palette gradient.
 		 * @param {Object.<number, string>} palette  - Gradient definition.
@@ -247,15 +257,19 @@
 				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(',') + ')');
+					if(!this._discreteStrokes) {
+					    // Create a gradient for each segment, pick start end end colors from palette gradient
+					    gradientStartRGB = this.getRGBForValue(pointStart.z);
+					    gradient = ctx.createLinearGradient(pointStart.x, pointStart.y, pointEnd.x, pointEnd.y);
+					    gradient.addColorStop(0, 'rgb(' + gradientStartRGB.join(',') + ')');
+					    gradient.addColorStop(1, 'rgb(' + gradientEndRGB.join(',') + ')');
+					    ctx.strokeStyle = gradient;
+					} else {
+					    ctx.strokeStyle = 'rgb('+ gradientEndRGB.join(',') + ')';
+					}
 
-					ctx.strokeStyle = gradient;
 					ctx.beginPath();
 					ctx.moveTo(pointStart.x, pointStart.y);
 					ctx.lineTo(pointEnd.x, pointEnd.y);
@@ -308,6 +322,9 @@
 			if (layer.options.outlineColor != null) {
 				this._hotline.outlineColor(layer.options.outlineColor);
 			}
+			if (layer.options.discreteStrokes != null) {
+				this._hotline.discreteStrokes(layer.options.discreteStrokes);
+			}
 			if (layer.options.palette) {
 				this._hotline.palette(layer.options.palette);
 			}
@@ -377,7 +394,8 @@
 			},
 			weight: 5,
 			outlineColor: 'black',
-			outlineWidth: 1
+			outlineWidth: 1,
+			discreteStrokes: false
 		},
 
 		getRGBForValue: function (value) {