@raruto/leaflet-elevation 2.0.5 → 2.0.6

package/libs/leaflet-hotline.js

@@ -0,0 +1,457 @@
+/*
+(c) 2017, iosphere GmbH
+Leaflet.hotline, a Leaflet plugin for drawing gradients along polylines.
+https://github.com/iosphere/Leaflet.hotline/
+*/
+
+(function (root, plugin) {
+    /**
+     * UMD wrapper.
+     * When used directly in the Browser it expects Leaflet to be globally
+     * available as `L`. The plugin then adds itself to Leaflet.
+     * When used as a CommonJS module (e.g. with browserify) only the plugin
+     * factory gets exported, so one hast to call the factory manually and pass
+     * Leaflet as the only parameter.
+     * @see {@link https://github.com/umdjs/umd}
+     */
+    if (typeof define === 'function' && define.amd) {
+        define(['leaflet'], plugin);
+    } else if (typeof exports === 'object') {
+        module.exports = plugin;
+    } else {
+        plugin(root.L);
+    }
+}(window, function (L) {
+    // Plugin is already added to Leaflet
+    if (L.Hotline) {
+        return L;
+    }
+
+    /**
+     * Core renderer.
+     * @constructor
+     * @param {HTMLElement | string} canvas - <canvas> element or its id
+     * to initialize the instance on.
+     */
+    var Hotline = function (canvas) {
+        if (!(this instanceof Hotline)) { return new Hotline(canvas); }
+
+        var defaultPalette = {
+            0.0: 'green',
+            0.5: 'yellow',
+            1.0: 'red'
+        };
+
+        this._canvas = canvas = typeof canvas === 'string'
+            ? document.getElementById(canvas)
+            : canvas;
+
+        this._ctx = canvas.getContext('2d');
+        this._width = canvas.width;
+        this._height = canvas.height;
+
+        this._weight = 5;
+        this._outlineWidth = 1;
+        this._outlineColor = 'black';
+
+        this._min = 0;
+        this._max = 1;
+
+        this._data = [];
+
+        this.palette(defaultPalette);
+    };
+
+    Hotline.prototype = {
+        /**
+         * Sets the width of the canvas. Used when clearing the canvas.
+         * @param {number} width - Width of the canvas.
+         */
+        width: function (width) {
+            this._width = width;
+            return this;
+        },
+
+        /**
+         * Sets the height of the canvas. Used when clearing the canvas.
+         * @param {number} height - Height of the canvas.
+         */
+        height: function (height) {
+            this._height = height;
+            return this;
+        },
+
+        /**
+         * Sets the weight of the path.
+         * @param {number} weight - Weight of the path in px.
+         */
+        weight: function (weight) {
+            this._weight = weight;
+            return this;
+        },
+
+        /**
+         * Sets the width of the outline around the path.
+         * @param {number} outlineWidth - Width of the outline in px.
+         */
+        outlineWidth: function (outlineWidth) {
+            this._outlineWidth = outlineWidth;
+            return this;
+        },
+
+        /**
+         * Sets the color of the outline around the path.
+         * @param {string} outlineColor - A CSS color value.
+         */
+        outlineColor: function (outlineColor) {
+            this._outlineColor = outlineColor;
+            return this;
+        },
+
+        /**
+         * Sets the palette gradient.
+         * @param {Object.<number, string>} palette  - Gradient definition.
+         * e.g. { 0.0: 'white', 1.0: 'black' }
+         */
+        palette: function (palette) {
+            var canvas = document.createElement('canvas'),
+                ctx = canvas.getContext('2d'),
+                gradient = ctx.createLinearGradient(0, 0, 0, 256);
+
+            canvas.width = 1;
+            canvas.height = 256;
+
+            for (var i in palette) {
+                gradient.addColorStop(i, palette[i]);
+            }
+
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, 1, 256);
+
+            this._palette = ctx.getImageData(0, 0, 1, 256).data;
+
+            return this;
+        },
+
+        /**
+         * Sets the value used at the start of the palette gradient.
+         * @param {number} min
+         */
+        min: function (min) {
+            this._min = min;
+            return this;
+        },
+
+        /**
+         * Sets the value used at the end of the palette gradient.
+         * @param {number} max
+         */
+        max: function (max) {
+            this._max = max;
+            return this;
+        },
+
+        /**
+         * A path to rander as a hotline.
+         * @typedef Array.<{x:number, y:number, z:number}> Path - Array of x, y and z coordinates.
+         */
+
+        /**
+         * Sets the data that gets drawn on the canvas.
+         * @param {(Path|Path[])} data - A single path or an array of paths.
+         */
+        data: function (data) {
+            this._data = data;
+            return this;
+        },
+
+        /**
+         * Adds a path to the list of paths.
+         * @param {Path} path
+         */
+        add: function (path) {
+            this._data.push(path);
+            return this;
+        },
+
+        /**
+         * Draws the currently set paths.
+         */
+        draw: function () {
+            var ctx = this._ctx;
+
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.lineCap = 'round';
+
+            this._drawOutline(ctx);
+            this._drawHotline(ctx);
+
+            return this;
+        },
+
+        /**
+         * Gets the RGB values of a given z value of the current palette.
+         * @param {number} value - Value to get the color for, should be between min and max.
+         * @returns {Array.<number>} The RGB values as an array [r, g, b]
+         */
+        getRGBForValue: function (value) {
+            var valueRelative = Math.min(Math.max((value - this._min) / (this._max - this._min), 0), 0.999);
+            var paletteIndex = Math.floor(valueRelative * 256) * 4;
+
+            return [
+                this._palette[paletteIndex],
+                this._palette[paletteIndex + 1],
+                this._palette[paletteIndex + 2]
+            ];
+        },
+
+        /**
+         * Draws the outline of the graphs.
+         * @private
+         */
+        _drawOutline: function (ctx) {
+            var i, j, dataLength, path, pathLength, pointStart, pointEnd;
+
+            if (this._outlineWidth) {
+                for (i = 0, dataLength = this._data.length; i < dataLength; i++) {
+                    path = this._data[i];
+                    ctx.lineWidth = this._weight + 2 * this._outlineWidth;
+
+                    for (j = 1, pathLength = path.length; j < pathLength; j++) {
+                        pointStart = path[j - 1];
+                        pointEnd = path[j];
+
+                        ctx.strokeStyle = this._outlineColor;
+                        ctx.beginPath();
+                        ctx.moveTo(pointStart.x, pointStart.y);
+                        ctx.lineTo(pointEnd.x, pointEnd.y);
+                        ctx.stroke();
+                    }
+                }
+            }
+        },
+
+        /**
+         * Draws the color encoded hotline of the graphs.
+         * @private
+         */
+        _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();
+                }
+            }
+        }
+    };
+
+
+    var Renderer = L.Canvas.extend({
+        _initContainer: function () {
+            L.Canvas.prototype._initContainer.call(this);
+            this._hotline = new Hotline(this._container);
+        },
+
+        _update: function () {
+            L.Canvas.prototype._update.call(this);
+            this._hotline.width(this._container.width);
+            this._hotline.height(this._container.height);
+        },
+
+        _updatePoly: function (layer) {
+            if (!this._drawing) { return; }
+
+            var parts = layer._parts;
+
+            if (!parts.length) { return; }
+
+            this._updateOptions(layer);
+
+            this._hotline
+                .data(parts)
+                .draw();
+        },
+
+        _updateOptions: function (layer) {
+            if (layer.options.min != null) {
+                this._hotline.min(layer.options.min);
+            }
+            if (layer.options.max != null) {
+                this._hotline.max(layer.options.max);
+            }
+            if (layer.options.weight != null) {
+                this._hotline.weight(layer.options.weight);
+            }
+            if (layer.options.outlineWidth != null) {
+                this._hotline.outlineWidth(layer.options.outlineWidth);
+            }
+            if (layer.options.outlineColor != null) {
+                this._hotline.outlineColor(layer.options.outlineColor);
+            }
+            if (layer.options.palette) {
+                this._hotline.palette(layer.options.palette);
+            }
+        }
+    });
+
+    var renderer = function (options) {
+        return L.Browser.canvas ? new Renderer(options) : null;
+    };
+
+
+    var Util = {
+        /**
+         * This is just a copy of the original Leaflet version that support a third z coordinate.
+         * @see {@link http://leafletjs.com/reference.html#lineutil-clipsegment|Leaflet}
+         */
+        clipSegment: function (a, b, bounds, useLastCode, round) {
+            var codeA = useLastCode ? this._lastCode : L.LineUtil._getBitCode(a, bounds),
+                codeB = L.LineUtil._getBitCode(b, bounds),
+                codeOut, p, newCode;
+
+            // save 2nd code to avoid calculating it on the next segment
+            this._lastCode = codeB;
+
+            while (true) {
+                // if a,b is inside the clip window (trivial accept)
+                if (!(codeA | codeB)) {
+                    return [a, b];
+                    // if a,b is outside the clip window (trivial reject)
+                } else if (codeA & codeB) {
+                    return false;
+                    // other cases
+                } else {
+                    codeOut = codeA || codeB;
+                    p = L.LineUtil._getEdgeIntersection(a, b, codeOut, bounds, round);
+                    newCode = L.LineUtil._getBitCode(p, bounds);
+
+                    if (codeOut === codeA) {
+                        p.z = a.z;
+                        a = p;
+                        codeA = newCode;
+                    } else {
+                        p.z = b.z;
+                        b = p;
+                        codeB = newCode;
+                    }
+                }
+            }
+        }
+    };
+
+
+    L.Hotline = L.Polyline.extend({
+        statics: {
+            Renderer: Renderer,
+            renderer: renderer
+        },
+
+        options: {
+            renderer: renderer(),
+            min: 0,
+            max: 1,
+            palette: {
+                0.0: 'green',
+                0.5: 'yellow',
+                1.0: 'red'
+            },
+            weight: 5,
+            outlineColor: 'black',
+            outlineWidth: 1
+        },
+
+        getRGBForValue: function (value) {
+            return this._renderer._hotline.getRGBForValue(value);
+        },
+
+        /**
+         * Just like the Leaflet version, but with support for a z coordinate.
+         */
+        _projectLatlngs: function (latlngs, result, projectedBounds) {
+            var flat = latlngs[0] instanceof L.LatLng,
+                len = latlngs.length,
+                i, ring;
+
+            if (flat) {
+                ring = [];
+                for (i = 0; i < len; i++) {
+                    ring[i] = this._map.latLngToLayerPoint(latlngs[i]);
+                    // Add the altitude of the latLng as the z coordinate to the point
+                    ring[i].z = latlngs[i].alt;
+                    projectedBounds.extend(ring[i]);
+                }
+                result.push(ring);
+            } else {
+                for (i = 0; i < len; i++) {
+                    this._projectLatlngs(latlngs[i], result, projectedBounds);
+                }
+            }
+        },
+
+        /**
+         * Just like the Leaflet version, but uses `Util.clipSegment()`.
+         */
+        _clipPoints: function () {
+            if (this.options.noClip) {
+                this._parts = this._rings;
+                return;
+            }
+
+            this._parts = [];
+
+            var parts = this._parts,
+                bounds = this._renderer._bounds,
+                i, j, k, len, len2, segment, points;
+
+            for (i = 0, k = 0, len = this._rings.length; i < len; i++) {
+                points = this._rings[i];
+
+                for (j = 0, len2 = points.length; j < len2 - 1; j++) {
+                    segment = Util.clipSegment(points[j], points[j + 1], bounds, j, true);
+
+                    if (!segment) { continue; }
+
+                    parts[k] = parts[k] || [];
+                    parts[k].push(segment[0]);
+
+                    // if segment goes out of screen, or it's the last one, it's the end of the line part
+                    if ((segment[1] !== points[j + 1]) || (j === len2 - 2)) {
+                        parts[k].push(segment[1]);
+                        k++;
+                    }
+                }
+            }
+        },
+
+        _clickTolerance: function () {
+            return this.options.weight / 2 + this.options.outlineWidth + (L.Browser.touch ? 10 : 0);
+        }
+    });
+
+    L.hotline = function (latlngs, options) {
+        return new L.Hotline(latlngs, options);
+    };
+
+
+    return L;
+}));

package/libs/leaflet-hotline.min.js

@@ -0,0 +1 @@
+!function(root,plugin){"function"==typeof define&&define.amd?define(["leaflet"],plugin):"object"==typeof exports?module.exports=plugin:plugin(root.L)}(window,(function(L){if(L.Hotline)return L;var Hotline=function(canvas){if(!(this instanceof Hotline))return new Hotline(canvas);var defaultPalette={0:"green",.5:"yellow",1:"red"};this._canvas=canvas="string"==typeof canvas?document.getElementById(canvas):canvas,this._ctx=canvas.getContext("2d"),this._width=canvas.width,this._height=canvas.height,this._weight=5,this._outlineWidth=1,this._outlineColor="black",this._min=0,this._max=1,this._data=[],this.palette(defaultPalette)};Hotline.prototype={width:function(width){return this._width=width,this},height:function(height){return this._height=height,this},weight:function(weight){return this._weight=weight,this},outlineWidth:function(outlineWidth){return this._outlineWidth=outlineWidth,this},outlineColor:function(outlineColor){return this._outlineColor=outlineColor,this},palette:function(palette){var canvas=document.createElement("canvas"),ctx=canvas.getContext("2d"),gradient=ctx.createLinearGradient(0,0,0,256);for(var i in canvas.width=1,canvas.height=256,palette)gradient.addColorStop(i,palette[i]);return ctx.fillStyle=gradient,ctx.fillRect(0,0,1,256),this._palette=ctx.getImageData(0,0,1,256).data,this},min:function(min){return this._min=min,this},max:function(max){return this._max=max,this},data:function(data){return this._data=data,this},add:function(path){return this._data.push(path),this},draw:function(){var ctx=this._ctx;return ctx.globalCompositeOperation="source-over",ctx.lineCap="round",this._drawOutline(ctx),this._drawHotline(ctx),this},getRGBForValue:function(value){var valueRelative=Math.min(Math.max((value-this._min)/(this._max-this._min),0),.999),paletteIndex=4*Math.floor(256*valueRelative);return[this._palette[paletteIndex],this._palette[paletteIndex+1],this._palette[paletteIndex+2]]},_drawOutline:function(ctx){var i,j,dataLength,path,pathLength,pointStart,pointEnd;if(this._outlineWidth)for(i=0,dataLength=this._data.length;i<dataLength;i++)for(path=this._data[i],ctx.lineWidth=this._weight+2*this._outlineWidth,j=1,pathLength=path.length;j<pathLength;j++)pointStart=path[j-1],pointEnd=path[j],ctx.strokeStyle=this._outlineColor,ctx.beginPath(),ctx.moveTo(pointStart.x,pointStart.y),ctx.lineTo(pointEnd.x,pointEnd.y),ctx.stroke()},_drawHotline:function(ctx){var i,j,dataLength,path,pathLength,pointStart,pointEnd,gradient,gradientStartRGB,gradientEndRGB;for(ctx.lineWidth=this._weight,i=0,dataLength=this._data.length;i<dataLength;i++)for(j=1,pathLength=(path=this._data[i]).length;j<pathLength;j++)pointStart=path[j-1],pointEnd=path[j],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()}};var Renderer=L.Canvas.extend({_initContainer:function(){L.Canvas.prototype._initContainer.call(this),this._hotline=new Hotline(this._container)},_update:function(){L.Canvas.prototype._update.call(this),this._hotline.width(this._container.width),this._hotline.height(this._container.height)},_updatePoly:function(layer){if(this._drawing){var parts=layer._parts;parts.length&&(this._updateOptions(layer),this._hotline.data(parts).draw())}},_updateOptions:function(layer){null!=layer.options.min&&this._hotline.min(layer.options.min),null!=layer.options.max&&this._hotline.max(layer.options.max),null!=layer.options.weight&&this._hotline.weight(layer.options.weight),null!=layer.options.outlineWidth&&this._hotline.outlineWidth(layer.options.outlineWidth),null!=layer.options.outlineColor&&this._hotline.outlineColor(layer.options.outlineColor),layer.options.palette&&this._hotline.palette(layer.options.palette)}}),renderer=function(options){return L.Browser.canvas?new Renderer(options):null},Util={clipSegment:function(a,b,bounds,useLastCode,round){var codeA=useLastCode?this._lastCode:L.LineUtil._getBitCode(a,bounds),codeB=L.LineUtil._getBitCode(b,bounds),codeOut,p,newCode;for(this._lastCode=codeB;;){if(!(codeA|codeB))return[a,b];if(codeA&codeB)return!1;codeOut=codeA||codeB,p=L.LineUtil._getEdgeIntersection(a,b,codeOut,bounds,round),newCode=L.LineUtil._getBitCode(p,bounds),codeOut===codeA?(p.z=a.z,a=p,codeA=newCode):(p.z=b.z,b=p,codeB=newCode)}}};return L.Hotline=L.Polyline.extend({statics:{Renderer:Renderer,renderer:renderer},options:{renderer:renderer(),min:0,max:1,palette:{0:"green",.5:"yellow",1:"red"},weight:5,outlineColor:"black",outlineWidth:1},getRGBForValue:function(value){return this._renderer._hotline.getRGBForValue(value)},_projectLatlngs:function(latlngs,result,projectedBounds){var flat=latlngs[0]instanceof L.LatLng,len=latlngs.length,i,ring;if(flat){for(ring=[],i=0;i<len;i++)ring[i]=this._map.latLngToLayerPoint(latlngs[i]),ring[i].z=latlngs[i].alt,projectedBounds.extend(ring[i]);result.push(ring)}else for(i=0;i<len;i++)this._projectLatlngs(latlngs[i],result,projectedBounds)},_clipPoints:function(){if(this.options.noClip)this._parts=this._rings;else{this._parts=[];var parts=this._parts,bounds=this._renderer._bounds,i,j,k,len,len2,segment,points;for(i=0,k=0,len=this._rings.length;i<len;i++)for(j=0,len2=(points=this._rings[i]).length;j<len2-1;j++)(segment=Util.clipSegment(points[j],points[j+1],bounds,j,!0))&&(parts[k]=parts[k]||[],parts[k].push(segment[0]),segment[1]===points[j+1]&&j!==len2-2||(parts[k].push(segment[1]),k++))}},_clickTolerance:function(){return this.options.weight/2+this.options.outlineWidth+(L.Browser.touch?10:0)}}),L.hotline=function(latlngs,options){return new L.Hotline(latlngs,options)},L}));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "2.0.5",
+	"version": "2.0.6",
 	"description": "A Leaflet plugin that allows to add elevation profiles using d3js",
 	"main": "dist/leaflet-elevation.min.js",
 	"module": "src/index.js",

package/src/control.js

@@ -13,6 +13,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__TOGEOJSON:     'https://unpkg.com/@tmcw/togeojson@4.6.0/dist/togeojson.umd.js',
 	__LGEOMUTIL:     'https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js',
 	__LALMOSTOVER:   'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
+	__LHOTLINE:      '../libs/leaflet-hotline.min.js',
 	__LDISTANCEM:    '../libs/leaflet-distance-marker.min.js',
 	__LCHART:        '../src/components/chart.js',
 	__LMARKER:       '../src/components/marker.js',
@@ -415,6 +416,37 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		}
 	},
 
+	_initHotLine: function(map, layer) {
+		if (this.options.hotline) {
+			let prop = typeof this.options.hotline == 'string' ? this.options.hotline : 'elevation';
+			this.import(this.__LHOTLINE)
+				.then(() => {
+					this._hotline = L.featureGroup();
+					layer.setStyle({opacity: 0});
+					layer.eachLayer((trkseg) => {
+						if(trkseg.feature.geometry.type != "Point") {
+							let geo = L.geoJson(trkseg.toGeoJSON(), { coordsToLatLng: (coords) => L.latLng(coords[0], coords[1], coords[2])});
+							L.hotline(geo.toGeoJSON().features[0].geometry.coordinates, {
+								min: isFinite(this.track_info[prop + '_min']) ? this.track_info[prop + '_min'] : 0,
+								max: isFinite(this.track_info[prop + '_max']) ? this.track_info[prop + '_max'] : 1,
+								palette: {
+									0.0: '#008800',
+									0.5: '#ffff00',
+									1.0: '#ff0000'
+								},
+								weight: 5,
+								outlineColor: '#000000',
+								outlineWidth: 1
+							}).addTo(this._hotline);
+						}
+					});
+				if (map) {
+					this._hotline.addTo(map);
+				}
+			});
+		}
+	},
+
 	/**
 	 * Initialize "L.AlmostOver" and "L.DistanceMarkers"
 	 */
@@ -428,6 +460,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			control._circleMarkers.addTo(map);
 			map.once('layeradd', (e) => control.options.autofitBounds && control.fitBounds(layer.getBounds()));
 			if (!L.Browser.mobile) {
+				control._initHotLine(map, layer);
 				control._initAlmostOverHandler(map, layer);
 				control._initDistanceMarkers(map, layer);
 			} else if (control.options.polyline) {
@@ -444,6 +477,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 */
 	_collapse: function() {
 		_.replaceClass(this._container, 'elevation-expanded', 'elevation-collapsed');
+		if (this._map) this._map.invalidateSize();
 	},
 
 	/*
@@ -451,6 +485,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 */
 	_expand: function() {
 		_.replaceClass(this._container, 'elevation-collapsed', 'elevation-expanded');
+		if (this._map) this._map.invalidateSize();
 	},
 
 	/**

package/src/options.js

@@ -18,6 +18,7 @@ export var Options = {
 	imperial: false,
 	legend: true,
 	handlers: [],
+	hotline: 'elevation',
 	marker: 'elevation-line',
 	markerIcon: L.divIcon({
 		className: 'elevation-position-marker',