@raruto/leaflet-elevation 1.9.4 → 2.0.0

package/src/index.css

@@ -28,7 +28,7 @@
 }
 
 .elevation-control.elevation .background {
-  background-color: rgba(70, 130, 180, 0.2);
+  background-color: var(--ele-bg, rgba(70, 130, 180, 0.2));
   border-radius: 5px;
   overflow: visible;
   display: block;
@@ -36,15 +36,20 @@
   user-select: none;
 }
 
+.elevation-control.elevation .axis .tick,
+.elevation-control.elevation .axis .domain {
+  pointer-events: none;
+}
+
 .elevation-control.elevation .axis line,
 .elevation-control.elevation .axis path {
-  stroke: #2D1130;
+  stroke: var(--ele-axis, #2D1130);
   stroke-width: 1;
   fill: none;
 }
 
 .elevation-control.elevation .grid .tick line {
-  stroke: #EEE;
+  stroke: var(--ele-grid, #EEE);
   stroke-width: 1px;
   shape-rendering: crispEdges;
 }
@@ -68,14 +73,14 @@
 }
 
 .elevation-control.elevation .area {
-  fill: #4682B4;
-  stroke: #000;
+  fill: var(--ele-area, #4682B4);
+  stroke: var(--ele-stroke, #000);
   stroke-width: 1.2;
   paint-order: stroke fill;
 }
 
 .elevation-detached .elevation-control.elevation .area {
-  fill-opacity: 0.8;
+  fill-opacity: var(--ele-alpha, 0.8);
 }
 
 .elevation-control.elevation .horizontal-drag-line {
@@ -104,7 +109,7 @@
 }
 
 .elevation-control.elevation .mouse-focus-line {
-  stroke: #0D1821;
+  stroke: #000;
   stroke-width: 1;
   pointer-events: none;
 }
@@ -128,7 +133,7 @@
 }
 
 .elevation-control.elevation .brush .selection {
-  fill: rgba(23, 74, 117, 0.4);
+  fill: var(--ele-brush, rgba(23, 74, 117, 0.4));
   stroke: none;
   fill-opacity: unset;
 }
@@ -207,7 +212,7 @@
 }
 
 .elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation.svg) no-repeat center center;
+  background: var(--ele-icon, url(../images/elevation-lime.svg)) no-repeat center center;
 }
 
 .elevation-control.elevation.elevation-expanded .elevation-toggle-icon.close-button {
@@ -241,7 +246,7 @@
 .leaflet-elevation-pane .height-focus,
 .leaflet-overlay-pane .height-focus {
   stroke: #000;
-  fill: #FFF;
+  fill: var(--ele-area, #FFF);
 }
 
 .leaflet-elevation-pane .height-focus.line,
@@ -260,193 +265,78 @@
   stroke-width: 2px;
 }
 
-.elevation-waypoint-icon:before {
-  background: url(../images/elevation-pushpin.svg) no-repeat center center / contain;
+.elevation-waypoint-icon:before,
+.elevation-position-icon:before {
   content: "";
   width: 100%;
   height: 100%;
   display: inline-block;
 }
 
+.elevation-waypoint-icon:before {
+  background: url(../images/elevation-pushpin.svg) no-repeat center center / contain;
+}
+
 .elevation-position-icon:before {
   background: url(../images/elevation-position.svg) no-repeat center center / contain;
-  content: "";
-  width: 100%;
-  height: 100%;
-  display: inline-block;
 }
 
 .elevation-polyline {
+  stroke: var(--ele-poly, var(--ele-area, #000));
   filter: drop-shadow(1px 1px 0 #FFF) drop-shadow(-1px -1px 0 #FFF) drop-shadow(1px -1px 0 #FFF) drop-shadow(-1px 1px 0 #FFF);
 }
 
-.elevation-placeholder {
-  margin: auto;
-  height: auto;
-  width: 100%;
-}
-
-.elevation-placeholder~* {
-  display: none !important;
-}
-
 /* LIME THEME //////////////////////////////////////////////// */
-.lime-theme.elevation-control.elevation .background {
-  background-color: rgba(156, 194, 34, 0.2);
-}
-
-.lime-theme.elevation-control.elevation .axis line,
-.lime-theme.elevation-control.elevation .axis path {
-  stroke: #566B13;
-}
-
-.lime-theme.elevation-control.elevation .grid .tick line {
-  stroke: #CCC;
-}
-
-.lime-theme.elevation-control.elevation .brush .selection {
-  fill: rgba(99, 126, 11, 0.4);
-}
-
-.lime-theme.elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation-lime.svg) no-repeat center center;
-}
-
-.lime-theme.elevation-control.elevation .area {
-  fill: #9CC222;
-}
-
-.lime-theme.elevation-control.elevation .mouse-focus-line {
-  stroke: #101404;
-}
-
-.lime-theme.height-focus {
-  stroke: #000;
-  fill: #9CC222;
-}
-
-.lime-theme.elevation-polyline {
-  stroke: #566B13;
+.lime-theme {
+  --ele-bg: rgba(156, 194, 34, 0.2);
+  --ele-axis: #566B13;
+  --ele-area: #9CC222;
+  --ele-grid: #CCC;
+  --ele-brush: rgba(99, 126, 11, 0.4);
+  --ele-icon: url(../images/elevation-lime.svg);
+  --ele-poly: #566B13;
 }
 
 /* STEELBLUE THEME //////////////////////////////////////////////// */
-.steelblue-theme.elevation-control.elevation .background {
-  background-color: rgba(70, 130, 180, 0.2);
-}
-
-.steelblue-theme.elevation-control.elevation .axis line,
-.steelblue-theme.elevation-control.elevation .axis path {
-  stroke: #0D1821;
-}
-
-.steelblue-theme.elevation-control.elevation .brush .selection {
-  fill: rgba(23, 74, 117, 0.4);
-}
-
-.steelblue-theme.elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation-steelblue.svg) no-repeat center center;
-}
-
-.steelblue-theme.elevation-control.elevation .area {
-  fill: #4682B4;
-}
-
-.steelblue-theme.elevation-control.elevation .mouse-focus-line {
-  stroke: #0D1821;
-}
-
-.steelblue-theme.height-focus {
-  stroke: #000;
-  fill: #4682B4;
-}
-
-.steelblue-theme.elevation-polyline {
-  stroke: #4682B4;
+.steelblue-theme {
+  --ele-axis: #0D1821;
+  --ele-area: #4682B4;
+  --ele-brush: rgba(23, 74, 117, 0.4);
+  --ele-icon: url(../images/elevation-steelblue.svg);
 }
 
 /* PURPLE THEME //////////////////////////////////////////////// */
-.purple-theme.elevation-control.elevation .background {
-  background-color: rgba(115, 44, 123, 0.2);
-}
-
-.purple-theme.elevation-control.elevation .axis line,
-.purple-theme.elevation-control.elevation .axis path {
-  stroke: #2D1130;
-}
-
-.purple-theme.elevation-control.elevation .brush .selection {
-  fill: rgba(74, 14, 80, 0.4);
-}
-
-.purple-theme.elevation-control.elevation .elevation-toggle-icon {
-  background: url(../images/elevation-purple.svg) no-repeat center center;
-}
-
-.purple-theme.elevation-control.elevation .area {
-  fill: #732C7B;
-}
-
-.purple-theme.elevation-control.elevation .mouse-focus-line {
-  stroke: #000;
-}
-
-.purple-theme.height-focus {
-  stroke: #000;
-  fill: #732C7B;
-}
-
-.purple-theme.elevation-polyline {
-  stroke: #732C7B;
+.purple-theme {
+  --ele-bg: rgba(115, 44, 123, 0.2);
+  --ele-area: #732C7B;
+  --ele-brush: rgba(74, 14, 80, 0.4);
+  --ele-icon: url(../images/elevation-purple.svg);
 }
 
 /* YELLOW THEME //////////////////////////////////////////////// */
-.yellow-theme.elevation-control.elevation .area {
-  fill: #FF0;
-}
-
-.yellow-theme.elevation-polyline {
-  stroke: #FF0;
+.yellow-theme {
+  --ele-area: #FF0;
 }
 
 /* RED THEME //////////////////////////////////////////////// */
-.red-theme.elevation-control.elevation .area {
-  fill: #F00;
-}
-
-.red-theme.elevation-polyline {
-  stroke: #F00;
+.red-theme {
+  --ele-area: #F00;
 }
 
 /* MAGENTA THEME //////////////////////////////////////////////// */
-.magenta-theme.elevation-control.elevation .background {
-  background-color: rgba(255, 255, 255, 0.47);
-}
-
-.magenta-theme.elevation-control.elevation .area {
-  fill: #FF005E;
-}
-
-.magenta-theme.elevation-polyline {
-  stroke: #FF005E;
+.magenta-theme {
+  --ele-bg: rgba(255, 255, 255, 0.47);
+  --ele-area: #FF005E;
 }
 
 /* LIGHTBLUE THEME //////////////////////////////////////////////// */
-.lightblue-theme.elevation-control.elevation .area {
-  fill: #3366CC;
-  stroke: #000;
+.lightblue-theme {
+  --ele-area: #3366CC;
+  --ele-alpha: 0.45;
+  --ele-stroke: #4682B4;
 }
 
 .elevation-detached .lightblue-theme.elevation-control.elevation .area {
-  fill-opacity: 0.45;
-  stroke: #3366CC;
-}
-
-.lightblue-theme.height-focus {
-  stroke: #000;
-  fill: #FFFFFF;
-}
-
-.lightblue-theme.elevation-polyline {
   stroke: #3366CC;
 }
 

package/src/index.js

@@ -36,19 +36,9 @@
 
 import 'leaflet-i18n';
 import * as _ from './utils';
-import * as D3 from './components';
-import { Chart } from './chart';
 import { Elevation } from './control';
-import './altitude';
-import './distance';
-import './time';
-import './slope';
-import './speed';
-import './acceleration';
 
 Elevation.Utils = _;
-Elevation.Components = D3;
-Elevation.Chart = Chart;
 
 /* Temporary fix for empty values evaluated as false (leaflet-i18n v0.3.1) */
 (function(){
@@ -61,18 +51,4 @@ Elevation.Chart = Chart;
 	};
 })();
 
-// Alias deprecated functions
- Elevation.addInitHook(function() {
-	this.enableDragging      = this.enableBrush;
-	this.disableDragging     = this.disableBrush;
-	this.loadChart           = this.addTo;
-	this.loadData            = this.load;
-	this.loadGPX             = this.load;
-	this.loadGeoJSON         = this.load;
-	this.loadXML             = this.load;
-	this.loadFile            = this.load;
-	this._addGPXData         = this._addGeoJSONData;
-	this._registerFocusLabel = this._registerTooltip;
-});
-
 L.control.elevation = (options) => new Elevation(options);

package/src/marker.js

@@ -1,11 +1,12 @@
-import 'leaflet-i18n';
-import * as _  from './utils';
-import * as D3 from './components';
+import * as D3 from './components.js';
+
+const _ = L.Control.Elevation.Utils;
 
 export var Marker = L.Class.extend({
 
-	initialize: function(options) {
+	initialize: function(options, control) {
 		this.options = options;
+		this.control = control
 
 		switch(this.options.marker) {
 			case 'elevation-line':
@@ -51,14 +52,18 @@ export var Marker = L.Class.extend({
 					let point = this._map.latLngToLayerPoint(this._latlng);
 					point     = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
 
+					let yMax = (this.control._height() / props.yCoordMax * point[this.options.yAttr]);
+
+					if(!isFinite(yMax) || isNaN(yMax)) yMax = 0;
+
 					this._container.classed("leaflet-hidden", false);
 					this._container.call(D3.PositionMarker({
 						theme : this.options.theme,
 						xCoord: point.x,
 						yCoord: point.y,
-						length: point.y - (this._height() / props.maxElevation * point.z), // normalized Y
+						length: point.y - yMax, // normalized Y
 						labels: this._labels,
-						item: point
+						item: point,
 					}));
 				}
 			break;
@@ -84,14 +89,6 @@ export var Marker = L.Class.extend({
 		return this._latlng;
 	},
 
-	/**
-	 * Calculates chart height.
-	 */
-	_height: function() {
-		let opts = this.options;
-		return opts.height - opts.margins.top - opts.margins.bottom;
-	},
-
 	_registerTooltip: function(props) {
 		this._labels[props.name] = props;
 	}

package/src/options.js

@@ -9,29 +9,14 @@ export var Options = {
 	collapsed: false,
 	detached: true,
 	distance: true,
-	distanceMarkers: {
-		lazy: true,
-		distance: true,
-		arrow: false
-	},
-	decimalsX: 2,
-	decimalsY: 0,
+	distanceMarkers: { lazy: true, distance: true, direction: true },
 	dragging: !L.Browser.mobile,
 	downloadLink: 'link',
 	elevationDiv: "#elevation-div",
 	followMarker: true,
-	forceAxisBounds: false,
-	height: 200,
 	imperial: false,
-	interpolation: "curveLinear",
-	lazyLoadJS: true,
 	legend: true,
-	margins: {
-		top: 30,
-		right: 30,
-		bottom: 30,
-		left: 40
-	},
+	handlers: [],
 	marker: 'elevation-line',
 	markerIcon: L.divIcon({
 		className: 'elevation-position-marker',
@@ -55,20 +40,15 @@ export var Options = {
 	preferCanvas: false,
 	reverseCoords: false,
 	ruler: true,
-	skipNullZCoords: false,
 	theme: "lightblue-theme",
 	summary: 'inline',
 	slope: false,
 	speed: false,
-	sLimit: undefined,
 	time: false,
 	timeFactor: 3600,
-	timeFormat: false,
 	timestamps: false,
-	sDeltaMax: undefined,
-	sInterpolation: "curveStepAfter",
-	sRange: undefined,
-	width: 600,
+	trkStart: L.circleMarker([0,0], { className: 'start-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#00d800', fillOpacity: 1, interactive: false }),
+	trkEnd: L.circleMarker([0,0], { className: 'end-marker', radius: 6, weight: 2, color: '#fff', fillColor: '#ff0606', fillOpacity: 1, interactive: false }),
 	waypoints: true,
 	wptIcons: {
 		'': L.divIcon({
@@ -81,12 +61,24 @@ export var Options = {
 	wptLabels: true,
 	xAttr: "dist",
 	xLabel: "km",
-	xTicks: undefined,
 	yAttr: "z",
-	yAxisMax: undefined,
-	yAxisMin: undefined,
 	yLabel: "m",
-	yTicks: undefined,
 	zFollow: false,
 	zooming: !L.Browser.Mobile,
+
+	// Quite uncommon and undocumented options (quite useless)
+	decimalsX: 2,
+	decimalsY: 0,
+	forceAxisBounds: false,
+	interpolation: "curveLinear",
+	skipNullZCoords: false,
+	yAxisMax: undefined,
+	yAxisMin: undefined,
+
+	// Probably no longer functional as expected (internally overwritten)
+	margins: { top: 30, right: 30, bottom: 30, left: 40 },
+	height: 200,
+	width: 600,
+	xTicks: undefined,
+	yTicks: undefined,
 };

package/src/summary.js

@@ -1,11 +1,10 @@
-import 'leaflet-i18n';
-import * as _ from './utils';
-import * as D3 from './components';
+const _ = L.Control.Elevation.Utils;
 
 export var Summary = L.Class.extend({
 	initialize: function(opts, control) {
 		this.options = opts;
 		this.control = control;
+		this.labels = {};
 
 		let summary = this._container = _.create("div", "elevation-summary " + (opts.summary ? opts.summary + "-summary" : ''));
 		_.style(summary, 'max-width', opts.width ? opts.width + 'px' : '');
@@ -24,9 +23,20 @@ export var Summary = L.Class.extend({
 		return this;
 	},
 
+	update: function() {
+		Object
+		.keys(this.labels)
+		.sort((a, b) => this.labels[a].order - this.labels[b].order) // TODO: any performance issues?
+		.forEach((i)=> {
+			let value = typeof this.labels[i].value !== "function" ? this.labels[i].value : this.labels[i].value(this.control.track_info, this.labels[i].unit || '');
+			this.append(i /*+ " order-" + this.labels[i].order*/, L._(this.labels[i].label), value, this.labels[i].order);
+		});
+	},
+
 	_registerSummary: function(data) {
 		for (let i in data) {
-			this.append(i, L._(data[i].label), typeof data[i].value !== "function" ? data[i].value : data[i].value(this.control.track_info));
+			data[i].order = data[i].order ?? 1000;
+			this.labels[i] = data[i];
 		}
 	}