@raruto/leaflet-elevation 1.7.4 → 1.8.0

package/src/marker.js

@@ -7,39 +7,28 @@ export var Marker = L.Class.extend({
 	initialize: function(options) {
 		this.options = options;
 
-		if (this.options.imperial) {
-			this._xLabel = "mi";
-			this._yLabel = "ft";
-		} else {
-			this._xLabel = this.options.xLabel;
-			this._yLabel = this.options.yLabel;
+		switch(this.options.marker) {
+			case 'elevation-line':
+				// this._container = d3.create("g").attr("class", "height-focus-group");
+				this._container = d3.select(map.getPane('elevationPane')).select("svg > g")
+					.attr("class", "height-focus-group");
+			break;
+			case 'position-marker':
+				// this._marker   = L.circleMarker([0, 0], { pane: 'overlayPane', radius: 6, fillColor: '#fff', fillOpacity:1, color: '#000', weight:1, interactive: false });
+				this._marker      = L.marker([0, 0], { icon: this.options.markerIcon, zIndexOffset: 1000000, interactive: false });
+			break;
 		}
 
-		if (this.options.marker == 'elevation-line') {
-			// this._container = d3.create("g").attr("class", "height-focus-group");
-			this._focusline   = d3.create('svg:line');
-			this._focusmarker = d3.create("svg:circle");
-			this._focuslabel  = d3.create("svg:text");
-		} else if (this.options.marker == 'position-marker') {
-			// this._marker   = L.circleMarker([0, 0], { pane: 'overlayPane', radius: 6, fillColor: '#fff', fillOpacity:1, color: '#000', weight:1, interactive: false });
-			this._marker      = L.marker([0, 0], { icon: this.options.markerIcon, zIndexOffset: 1000000, interactive: false });
-		}
-
-		this._focuslabels = {};
+		this._labels = {};
 
 		return this;
 	},
 
 	addTo: function(map) {
 		this._map = map;
-		if (this.options.marker == 'elevation-line') {
-			let g = this._container = d3.select(map.getPane('elevationPane')).select("svg > g")
-				.attr("class", "height-focus-group");
-			g.append(() => this._focusline.node());
-			g.append(() => this._focusmarker.node());
-			g.append(() => this._focuslabel.node());
-		} else if (this.options.marker == 'position-marker') {
-			this._marker.addTo(map, { pane: 'overlayPane' });
+		switch(this.options.marker) {
+			case 'elevation-line':  this._container.call(D3.PositionMarker({}));      break;
+			case 'position-marker': this._marker.addTo(map, { pane: 'overlayPane' }); break;
 		}
 		return this;
 	},
@@ -56,75 +45,27 @@ export var Marker = L.Class.extend({
 		if (props.options) this.options = props.options;
 		if (!this._map) this.addTo(props.map);
 
-		let opts = this.options;
-		let map = this._map;
-
 		this._latlng = props.item.latlng;
 
-		let pos = map.latLngToLayerPoint(this._latlng);
-
-		if (map._rotate) {
-			pos = map.rotatedPointToMapPanePoint(pos);
-		}
-
-		let point = L.extend({}, props.item, pos);
-
-		if (this.options.marker == 'elevation-line') {
-
-			let normalizedAlt = this._height() / props.maxElevation * point.z;
-			let normalizedY   = point.y - normalizedAlt;
-
-			this._container.classed("leaflet-hidden", false);
-
-			this._focusmarker
-				.call(
-					D3.HeightFocusMarker({
-						theme : opts.theme,
-						xCoord: point.x,
-						yCoord: point.y,
-					}));
-
-			this._focusline
-				.call(
-					D3.HeightFocusLine({
-						theme : opts.theme,
-						xCoord: point.x,
-						yCoord: point.y,
-						length: normalizedY
-					})
-				);
-			this._focuslabel
-				.call(
-					D3.HeightFocusLabel({
-						theme : opts.theme,
-						xCoord: point.x,
-						yCoord: normalizedY,
-						label : d3.format("." + opts.decimalsY + "f")(point[opts.yAttr]) + " " + this._yLabel
-					})
-				);
-
-			let labels = this._focuslabels;
-			let tooltip = this._focuslabel;
-			let label;
-
-			for (var i in labels) {
-				label = tooltip.select(".height-focus-" + labels[i].name);
-
-				if (!label.size()) {
-					label   = tooltip.append("svg:tspan")
-						.attr("class", "height-focus-" + labels[i].name)
-						.attr("dy", "1.5em");
-				}
-
-				label.text(typeof labels[i].value !== "function" ? labels[i].value : labels[i].value(props.item) );
-
-				this._focuslabel.select('.height-focus-y')
-					.attr("dy", "-1.5em");
-			}
-
-		} else if (this.options.marker == 'position-marker') {
-			_.removeClass(this._marker.getElement(), 'leaflet-hidden');
-			this._marker.setLatLng(this._latlng);
+		switch(this.options.marker) {
+			case 'elevation-line':
+				let point   = this._map.latLngToLayerPoint(this._latlng);
+				point = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
+		
+				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
+					labels: this._labels,
+					item: point
+				}));
+			break;
+			case 'position-marker':
+				_.removeClass(this._marker.getElement(), 'leaflet-hidden');
+				this._marker.setLatLng(this._latlng);
+			break;
 		}
 	},
 
@@ -133,10 +74,9 @@ export var Marker = L.Class.extend({
 	 */
 	remove: function() {
 		this._props = null;
-		if (this.options.marker == 'elevation-line') {
-			if (this._container) this._container.classed("leaflet-hidden", true);
-		} else if (this.options.marker == 'position-marker') {
-			_.addClass(this._marker.getElement(), 'leaflet-hidden');
+		switch(this.options.marker) {
+			case 'elevation-line':  this._container && this._container.classed("leaflet-hidden", true); break;
+			case 'position-marker': _.addClass(this._marker.getElement(), 'leaflet-hidden');            break;
 		}
 	},
 
@@ -152,8 +92,8 @@ export var Marker = L.Class.extend({
 		return opts.height - opts.margins.top - opts.margins.bottom;
 	},
 
-	_registerFocusLabel: function(props) {
-		this._focuslabels[props.name] = props;
+	_registerTooltip: function(props) {
+		this._labels[props.name] = props;
 	}
 
 });

package/src/options.js

@@ -9,7 +9,6 @@ export var Options = {
 	collapsed: false,
 	detached: true,
 	distance: true,
-	distanceFactor: 1,
 	distanceMarkers: false,
 	decimalsX: 2,
 	decimalsY: 0,
@@ -19,15 +18,10 @@ export var Options = {
 	followMarker: true,
 	forceAxisBounds: false,
 	height: 200,
-	heightFactor: 1,
 	imperial: false,
 	interpolation: "curveLinear",
 	lazyLoadJS: true,
 	legend: true,
-	loadData: {
-		defer: false,
-		lazy: false,
-	},
 	margins: {
 		top: 30,
 		right: 30,
@@ -41,7 +35,6 @@ export var Options = {
 		iconSize: [32, 32],
 		iconAnchor: [16, 16],
 	}),
-	placeholder: false,
 	position: "topright",
 	polyline: {
 		className: 'elevation-polyline',
@@ -60,7 +53,6 @@ export var Options = {
 	ruler: true,
 	skipNullZCoords: false,
 	theme: "lightblue-theme",
-	responsive: true,
 	summary: 'inline',
 	slope: false,
 	speed: false,
@@ -68,6 +60,7 @@ export var Options = {
 	time: false,
 	timeFactor: 3600,
 	timeFormat: false,
+	timestamps: false,
 	sDeltaMax: undefined,
 	sInterpolation: "curveStepAfter",
 	sRange: undefined,

package/src/slope.js

@@ -74,39 +74,30 @@ Elevation.addInitHook(function() {
 		}
 
 		// Range of acceptable slope values.
-		if (this.options.sRange) {
-			let range = this.options.sRange;
-			if (slope < range[0])      slope = range[0];
-			else if (slope > range[1]) slope = range[1];
-		}
-
-		slope = L.Util.formatNum(slope, 2);
-
-		if (slope > sMax) sMax = slope;
-		if (slope < sMin) sMin = slope;
-
-		data[i].slope   = slope;
+		slope = _.clamp(slope, this.options.sRange);
 
 		track.ascent    = tAsc;
 		track.descent   = tDes;
-		track.slope_max = sMax;
-		track.slope_min = sMin;
+		track.slope_max = slope > sMax ? slope : sMax;
+		track.slope_min = slope < sMin ? slope : sMin;
+
+		data[i].slope   = L.Util.formatNum(slope, 2);
 	});
 
-	this._registerFocusLabel({
+	this._registerTooltip({
 		name: 'slope',
-		chart: (item) => item.slope + slope.label,
+		chart: (item) => L._("m: ") + item.slope + slope.label,
 		marker: (item) => Math.round(item.slope) + slope.label
 	});
 
 	this._registerSummary({
 		"ascent"  : {
 			label: "Total Ascent: ",
-			value: (track) => Math.round(track.ascent || 0) + '&nbsp;' + this._yLabel
+			value: (track) => Math.round(track.ascent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm')
 		},
 		"descent"  : {
 			label: "Total Descent: ",
-			value: (track) => Math.round(track.descent || 0) + '&nbsp;' + this._yLabel
+			value: (track) => Math.round(track.descent || 0) + '&nbsp;' + (this.options.imperial ? 'ft' : 'm')
 		},
 		"minslope": {
 			label: "Min Slope: ",

package/src/speed.js

@@ -10,8 +10,8 @@ Elevation.addInitHook(function() {
 	let opts = this.options;
 	let speed = {};
 
-	speed.label          = opts.speedLabel  || L._(this.options.imperial ? 'mph' : 'km/h');
-	this._speedFactor    = opts.speedFactor || 1;
+	speed.label      = opts.speedLabel  || L._(opts.imperial ? 'mph' : 'km/h');
+	opts.speedFactor = opts.speedFactor || 1;
 
 	if (this.options.speed && this.options.speed != "summary") {
 
@@ -60,7 +60,7 @@ Elevation.addInitHook(function() {
 
 		if (deltaT > 0) {
 			let delta = (data[i].dist - data[i > 0 ? i - 1 : i].dist) * 1000;
-			speed = Math.abs((delta / deltaT) * this._timeFactor) * this._speedFactor;
+			speed = Math.abs((delta / deltaT) * opts.timeFactor) * opts.speedFactor;
 		}
 
 		// Try to smooth "crazy" speed values.
@@ -73,31 +73,21 @@ Elevation.addInitHook(function() {
 		}
 
 		// Range of acceptable speed values.
-		if (this.options.speedRange) {
-			let range = this.options.speedRange;
-			if (speed < range[0])      speed = range[0];
-			else if (speed > range[1]) speed = range[1];
-		}
-
-		speed = L.Util.formatNum(speed, 2);
-
-		sMax = speed > sMax ? speed : sMax;
-		sMin = speed < sMin ? speed : sMin;
-		sAvg = (speed + sAvg) / 2.0;
+		speed = _.clamp(speed, this.options.speedRange);
 
-		data[i].speed = speed;
+		track.speed_max = speed > sMax ? speed : sMax;
+		track.speed_min = speed < sMin ? speed : sMin;
+		track.speed_avg = (speed + sAvg) / 2.0;
 
-		track.speed_max = sMax;
-		track.speed_min = sMin;
-		track.speed_avg = sAvg;
+		data[i].speed = L.Util.formatNum(speed, 2);
 	});
 
 	if (this.options.speed) {
 
-		this._registerFocusLabel({
+		this._registerTooltip({
 			name: 'speed',
-			chart: (item) => item.speed + " " + speed.label,
-			marker: (item) => Math.round(item.speed) + " " + speed.label
+			chart: (item) => L._('v: ') + item.speed + " " + speed.label,
+			marker: (item) => Math.round(item.speed) + " " + speed.label,
 		});
 
 		this._registerSummary({

package/src/time.js

@@ -8,8 +8,8 @@ Elevation.addInitHook(function() {
 	let opts = this.options;
 	let time = {};
 
-	time.label       = opts.timeLabel  || 't';
-	this._timeFactor = opts.timeFactor;
+	time.label      = opts.timeLabel  || 't';
+	opts.timeFactor = opts.timeFactor || 3600;
 
 	/**
 	 * Common AVG speeds:
@@ -75,7 +75,7 @@ Elevation.addInitHook(function() {
 			e.point.meta.time = new Date(
 				(
 					i > 0
-						? data[i - 1].time.getTime() + ((( delta / speed) * this._timeFactor) * 1000)
+						? data[i - 1].time.getTime() + ((( delta / speed) * opts.timeFactor) * 1000)
 						: Date.now()
 				)
 			);
@@ -94,26 +94,31 @@ Elevation.addInitHook(function() {
 		let deltaT   = Math.abs(currT - prevT);
 		let duration = (this.track_info.time || 0) + deltaT;
 
+		this.track_info.time = duration;
+
 		data[i].time         = time;
 		data[i].duration     = duration;
-
-		this.track_info.time = duration;
 	});
 
-	if (this.options.time) {
 
-		this._registerFocusLabel({
-			name: 'time',
-			chart: (item) => this.options.timeFormat(item.time)
+	if (this.options.timestamps) {
+		this._registerTooltip({
+			name: 'date',
+			chart: (item) => L._("t: ") + this.options.timeFormat(item.time)
 		});
+	}
 
+	if (this.options.time) {
+		this._registerTooltip({
+			name: 'time',
+			chart: (item) => L._("T: ") + _.formatTime(item.duration || 0)
+		});
 		this._registerSummary({
 			"tottime"  : {
 				label: "Total Time: ",
 				value: (track) => _.formatTime(track.time || 0)
 			}
 		});
-
 	}
 
 });