@raruto/leaflet-elevation 1.7.4 → 1.8.0

package/src/control.js

@@ -17,24 +17,21 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__TOGEOJSON:   'https://unpkg.com/@tmcw/togeojson@4.3.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',
-	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.7.3/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.7.5/libs/leaflet-distance-marker.min.js',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
 	 */
 	addData: function(d, layer) {
-		if (typeof layer === "undefined" && d.on) {
-			layer = d;
-		}
-		Elevation._d3LazyLoader = _.lazyLoader(
-			this.__D3,
-			typeof d3 !== 'object' || !this.options.lazyLoadJS,
-			Elevation._d3LazyLoader
-		).then(() => {
-			this._addData(d);
-			this._addLayer(layer);
-			this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
-		});
+		this.lazyLoad(this.__D3)
+			.then(() => {
+				if (typeof layer === "undefined" && d.on) {
+					layer = d;
+				}
+				this._addData(d);
+				this._addLayer(layer);
+				this._fireEvt("eledata_added", { data: d, layer: layer, track_info: this.track_info });
+			});
 	},
 
 	/**
@@ -107,20 +104,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this._chart._brushEnabled = true;
 	},
 
-	/**
-	 * Alias for enableBrush
-	 */
-	enableDragging: function() {
-		this.enableBrushing();
-	},
-
-	/**
-	 * Alias for disableBrush
-	 */
-	disableDragging: function() {
-		this.disableBrushing();
-	},
-
 	/**
 	 * Disable chart zooming.
 	 */
@@ -153,7 +136,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Get default zoom level when "followMarker" is true.
 	 */
 	getZFollow: function() {
-		return this._zFollow;
+		return this.options.zFollow;
 	},
 
 	/**
@@ -172,60 +155,32 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		this._markers        = L.featureGroup();
 		this._markedSegments = L.polyline([]);
 		this._chartEnabled   = true,
-
 		this.track_info      = {};
-
 		this.options         = _.deepMerge({}, this.options, options);
 
-		this._zFollow        = this.options.zFollow;
-
-		if (this.options.followMarker) this._setMapView = L.Util.throttle(this._setMapView, 300, this);
-		if (this.options.placeholder)  this.options.loadData.lazy = this.options.loadData.defer = true;
-
-		if (this.options.legend)       this.options.margins.bottom += 30;
-
-		if (this.options.theme)        this.options.polylineSegments.className += ' ' + this.options.theme;
+		if (this.options.followMarker)      this._setMapView = L.Util.throttle(this._setMapView, 300, this);
+		if (this.options.legend)            this.options.margins.bottom += 30;
+		if (this.options.theme)             this.options.polylineSegments.className += ' ' + this.options.theme;
+		if (this.options.wptIcons === true) this.options.wptIcons = Options.wptIcons;
 
 		this._markedSegments.setStyle(this.options.polylineSegments);
 
-		// this._resizeChart   = _.debounce(this._resizeChart,   300, this);
-		// this._resizeChart = L.Util.throttle(this._resizeChart, 300, this);
-
-		// if (L.Browser.mobile) {
-		// 	this._updateChart   = _.debounce(this._updateChart,   300, this);
-		// 	this._updateSummary = _.debounce(this._updateSummary, 300, this);
-		// }
-
-		if (this.options.wptIcons === true) this.options.wptIcons = Options.wptIcons;
-
 		// Leaflet canvas renderer colors
 		L.extend(D3.Colors, this.options.colors || {});
 	},
 
 	/**
-	 * Alias for loadData
+	 * Javascript scripts downloader (lazy loader)
 	 */
-	load: function(data, opts) {
-		this.loadData(data, opts);
-	},
-
-	/**
-	 * Alias for addTo
-	 */
-	loadChart: function(map) {
-		this.addTo(map);
+	lazyLoad: function(src) {
+		return _.lazyLoad(src, this);
 	},
 
 	/**
 	 * Load elevation data (GPX, GeoJSON or KML).
 	 */
-	loadData: function(data, opts) {
-		opts = L.extend({}, this.options.loadData, opts);
-		if (opts.defer) {
-			this.loadDefer(data, opts);
-		} else if (opts.lazy) {
-			this.loadLazy(data, opts);
-		} else if (_.isXMLDoc(data)) {
+	load: function(data) {
+		if (_.isXMLDoc(data)) {
 			this.loadXML(data);
 		} else if (_.isJSONDoc(data)) {
 			this.loadGeoJSON(data);
@@ -234,15 +189,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		}
 	},
 
-	/**
-	 * Wait for document load before download data.
-	 */
-	loadDefer: function(data, opts) {
-		opts       = L.extend({}, this.options.loadData, opts);
-		opts.defer = false;
-		_.deferFunc(L.bind(this.loadData, this, data, opts));
-	},
-
 	/**
 	 * Load data from a remote url.
 	 */
@@ -251,7 +197,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 			.then((response) => response.text())
 			.then((data)     => {
 				this._downloadURL = url; // TODO: handle multiple urls?
-				this.loadData(data, { lazy: false, defer: false });
+				this.load(data);
 			})
 			.catch((err) => console.warn(err));
 	},
@@ -263,23 +209,12 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		_.GeoJSONLoader(data, this);
 	},
 
-	/**
-	 * Alias for loadXML
-	 */
-	loadGPX: function(data){
-		this.loadXML(data);
-	},
-
 	/**
 	 * Load raw XML data.
 	 */
 	loadXML: function(data) {
-		Elevation._togeojsonLazyLoader = _.lazyLoader(
-			this.__TOGEOJSON,
-			typeof toGeoJSON !== 'function' || !this.options.lazyLoadJS,
-			Elevation._togeojsonLazyLoader
-		).then(
-			() => {
+		this.lazyLoad(this.__TOGEOJSON)
+			.then(() => {
 				let xml     = (new DOMParser()).parseFromString(data, "text/xml");
 				let type    = xml.documentElement.tagName.toLowerCase(); // "kml" or "gpx"
 				if (!(type in toGeoJSON)) {
@@ -291,21 +226,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 				else if(this._downloadURL) { geojson.name = this._downloadURL.split('/').pop().split('#')[0].split('?')[0]; }
 
 				return this.loadGeoJSON(geojson, this);
-			}
-		);
-	},
-
-	/**
-	 * Wait for chart container visible before download data.
-	 */
-	loadLazy: function(data, opts) {
-		opts     = L.extend({}, this.options.loadData, opts);
-		let elem = opts.lazy.parentNode ? opts.lazy : this.placeholder;
-		_.waitHolder(elem)
-			.then(() => {
-				opts.lazy = false;
-				this.loadData(data, opts)
-				this.once('eledata_loaded', () => this.placeholder.parentNode.removeChild(elem));
 			});
 	},
 
@@ -321,40 +241,31 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		if (!this.options.detached) {
 			_.addClass(container, 'leaflet-control');
 		}
-
-		if (this.options.placeholder && !this._data.length) {
-			this.placeholder = _.create('img', 'elevation-placeholder', typeof this.options.placeholder === 'string' ? { src: this.options.placeholder, alt: '' } : this.options.placeholder);
-			_.insert(container, this.placeholder, 'afterbegin');
-		}
-
-		Elevation._d3LazyLoader = _.lazyLoader(
-			this.__D3,
-			typeof d3 !== 'object' || !this.options.lazyLoadJS,
-			Elevation._d3LazyLoader
-		).then(() => {
-			this._initButton(container);
-			this._initChart(container);
-			this._initSummary(container);
-			this._initMarker(map);
-			this._initLayer(map);
-
-			map
-				.on('zoom viewreset zoomanim',       this._hideMarker,    this)
-				.on('resize',                        this._resetView,     this)
-				.on('resize',                        this._resizeChart,   this)
-				.on('rotate',                        this._rotateMarker,  this)
-				.on('mousedown',                     this._resetDrag,     this);
-
-			_.on(map.getContainer(), 'mousewheel', this._resetDrag,     this);
-			_.on(map.getContainer(), 'touchstart', this._resetDrag,     this);
-
-			this
-				.on('eledata_added eledata_loaded',  this._updateChart,   this)
-				.on('eledata_added eledata_loaded',  this._updateSummary, this);
-
-			this._updateChart();
-			this._updateSummary();
-		});
+		this.lazyLoad(this.__D3)
+			.then(() => {
+				this._initButton(container);
+				this._initChart(container);
+				this._initSummary(container);
+				this._initMarker(map);
+				this._initLayer(map);
+
+				map
+					.on('zoom viewreset zoomanim',       this._hideMarker,    this)
+					.on('resize',                        this._resetView,     this)
+					.on('resize',                        this._resizeChart,   this)
+					.on('rotate',                        this._rotateMarker,  this)
+					.on('mousedown',                     this._resetDrag,     this);
+
+				_.on(map.getContainer(), 'mousewheel', this._resetDrag,     this);
+				_.on(map.getContainer(), 'touchstart', this._resetDrag,     this);
+
+				this
+					.on('eledata_added eledata_loaded',  this._updateChart,   this)
+					.on('eledata_added eledata_loaded',  this._updateSummary, this);
+
+				this._updateChart();
+				this._updateSummary();
+			});
 
 		return container;
 	},
@@ -391,7 +302,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Set default zoom level when "followMarker" is true.
 	 */
 	setZFollow: function(zoom) {
-		this._zFollow = zoom;
+		this.options.zFollow = zoom;
 	},
 
 	/**
@@ -450,7 +361,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 */
 	_addGPXData: function(coords) {
 		_.each(coords, point => {
-			this._addPoint(point.lat, point.lng, typeof point.alt !== "undefined" ? point.alt : point.meta.ele);
+			this._addPoint(point.lat, point.lng, point.alt ?? point.meta.ele);
 			this._fireEvt("elepoint_added", { point: point, index: this._data.length - 1 });
 		});
 		this._fireEvt("eletrack_added", { coords: coords, index: this._data.length - 1 });
@@ -561,17 +472,15 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		opts.xTicks = this._xTicks();
 		opts.yTicks = this._yTicks();
 
-		if (opts.responsive) {
-			if (opts.detached) {
-				let { offsetWidth, offsetHeight}             = this.eleDiv;
-				if (offsetWidth > 0)             opts.width  = offsetWidth;
-				if (offsetHeight > 20)           opts.height = offsetHeight - 20; // 20 = horizontal scrollbar size.
-			} else {
-				let { clientWidth }                          = this._map.getContainer();
-				opts._maxWidth                               = opts._maxWidth > opts.width ? opts._maxWidth : opts.width;
-				this._container.style.maxWidth               = opts._maxWidth + 'px';
-				if (opts._maxWidth > clientWidth) opts.width = clientWidth - 30;
-			}
+		if (opts.detached) {
+			let { offsetWidth, offsetHeight}             = this.eleDiv;
+			if (offsetWidth > 0)             opts.width  = offsetWidth;
+			if (offsetHeight > 20)           opts.height = offsetHeight - 20; // 20 = horizontal scrollbar size.
+		} else {
+			let { clientWidth }                          = this._map.getContainer();
+			opts._maxWidth                               = opts._maxWidth > opts.width ? opts._maxWidth : opts.width;
+			this._container.style.maxWidth               = opts._maxWidth + 'px';
+			if (opts._maxWidth > clientWidth) opts.width = clientWidth - 30;
 		}
 
 		let chart = this._chart = new Chart(opts, this);
@@ -636,8 +545,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 
 		if (!this.options.detached) {
 			L.DomEvent
-				.disableClickPropagation(container);
-			//.disableScrollPropagation(container);
+				.disableClickPropagation(container)
+				.disableScrollPropagation(container);
 		}
 
 		if (L.Browser.mobile) {
@@ -790,14 +699,14 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	/**
 	 * Add chart or marker tooltip info
 	 */
-	_registerFocusLabel: function(props) {
+	 _registerTooltip: function(props) {
 		if (props.chart) {
 			let label = L.extend({}, props, { value: props.chart });
-			this.on("elechart_init",   () => this._chart._registerFocusLabel(label));
+			this.on("elechart_init",   () => this._chart._registerTooltip(label));
 		}
 		if (props.marker) {
 			let label = L.extend({}, props, { value: props.marker });
-			this.on("elechart_marker", () => this._marker._registerFocusLabel(label));
+			this.on("elechart_marker", () => this._marker._registerTooltip(label));
 		}
 	},
 
@@ -832,28 +741,30 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Hacky way for handling chart resize. Deletes it and redraw chart.
 	 */
 	_resizeChart: function() {
+		if(!this._container) return;
+
 		// prevent displaying chart on resize if hidden
 		if (_.style(this._container, "display") == "none") return;
 
 		let opts = this.options;
 
-		if (opts.responsive) {
-			let newWidth;
-			if (opts.detached) {
-				newWidth = (this.eleDiv || this._container).offsetWidth;
-			} else {
-				let { clientWidth } = this._map.getContainer();
-				newWidth = opts._maxWidth > clientWidth ? clientWidth - 30 : opts._maxWidth;
-			}
-			if (newWidth) {
-				let chart  = this._chart;
-				opts.width = newWidth;
-				if (chart && chart._chart) {
-					chart._chart._resize(opts);
-					opts.xTicks = this._xTicks();
-					opts.yTicks = this._yTicks();
-					this._updateChart();
-				}
+		let newWidth;
+
+		if (opts.detached) {
+			newWidth = (this.eleDiv || this._container).offsetWidth;
+		} else {
+			let { clientWidth } = this._map.getContainer();
+			newWidth = opts._maxWidth > clientWidth ? clientWidth - 30 : opts._maxWidth;
+		}
+		
+		if (newWidth) {
+			let chart  = this._chart;
+			opts.width = newWidth;
+			if (chart && chart._chart) {
+				chart._chart._resize(opts);
+				opts.xTicks = this._xTicks();
+				opts.yTicks = this._yTicks();
+				this._updateChart();
 			}
 		}
 
@@ -883,9 +794,9 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	_setMapView: function(item) {
 		if (!this.options.followMarker || !this._map) return;
 		let zoom = this._map.getZoom();
-		if ("number" === typeof this._zFollow) {
-			if (zoom < this._zFollow) zoom = this._zFollow;
-			this._map.setView(item.latlng, zoom, { animate: true, duration: 0.25 });
+		let z    = this.options.zFollow;
+		if (typeof z === "number") {
+			this._map.setView(item.latlng, (zoom < z ? z : zoom), { animate: true, duration: 0.25 });
 		} else if (!this._map.getBounds().contains(item.latlng)) {
 			this._map.setView(item.latlng, zoom, { animate: true, duration: 0.25 });
 		}
@@ -920,7 +831,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Calculates [x, y] domain and then update chart.
 	 */
 	_updateChart: function() {
-		if (/*!this._data.length ||*/ !this._container) return;
+		if (/*!this._data.length ||*/ !this._chart || !this._container) return;
 
 		this._fireEvt("elechart_axis");
 		this._fireEvt("elechart_area");
@@ -937,21 +848,23 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Update the position/height indicator marker drawn onto the map
 	 */
 	_updateMarker: function(item) {
-		if (!this._marker) return;
-		this._marker.update({
-			map         : this._map,
-			item        : item,
-			maxElevation: this.track_info.elevation_max || 0,
-			options     : this.options
-		});
+		if (this._marker) {
+			this._marker.update({
+				map         : this._map,
+				item        : item,
+				maxElevation: this.track_info.elevation_max || 0,
+				options     : this.options
+			});
+		}
 	},
 
 	/**
 	 * Fix marker rotation on rotated maps
 	 */
 	_rotateMarker: function() {
-		if (!this._marker) return;
-		this._marker.update();
+		if (this._marker) {
+			this._marker.update();
+		}
 	},
 
 	/**
@@ -1015,6 +928,13 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
  */
 Elevation.addInitHook(function() {
 
+	// Alias deprecated functions
+	this.enableDragging  = this.enableBrush;
+	this.disableDragging = this.disableBrush;
+	this.loadChart       = this.addTo;
+	this.loadData        = this.load;
+	this.loadGPX         = this.loadXML;
+
 	this.on('waypoint_added', function(e) {
 		let p = e.point,
 			pop = p._popup;
@@ -1051,45 +971,31 @@ Elevation.addInitHook(function() {
 		} else {
 
 			// leaflet-geometryutil
-			Elevation._geomutilLazyLoader = _.lazyLoader(
-				this.__LGEOMUTIL,
-				typeof L.GeometryUtil !== 'function' || !this.options.lazyLoadJS,
-				Elevation._geomutilLazyLoader
-			).then(
-				() => {
+			this.lazyLoad(this.__LGEOMUTIL)
+				.then(() => {
 
 					// leaflet-almostover
 					if (this.options.almostOver) {
-						Elevation._almostoverLazyLoader = _.lazyLoader(
-							this.__LALMOSTOVER,
-							typeof L.Handler.AlmostOver  !== 'function' || !this.options.lazyLoadJS,
-							Elevation._almostoverLazyLoader
-						).then(
-							() => {
-								map.addHandler('almostOver',L.Handler.AlmostOver)
+						this.lazyLoad(this.__LALMOSTOVER)
+							.then(() => {
+								map.addHandler('almostOver', L.Handler.AlmostOver)
 								if (L.GeometryUtil && map.almostOver && map.almostOver.enabled()) {
 									map.almostOver.addLayer(layer);
 									map
 										.on('almost:move', (e) => this._mousemoveLayerHandler(e))
 										.on('almost:out',  (e) => this._mouseoutHandler(e));
 								}
-							}
-						);
+							});
 					}
 
 					// leaflet-distance-markers
 					if (this.options.distanceMarkers) {
-						Elevation._distanceMarkersLazyLoader = _.lazyLoader(
-							this.__LDISTANCEM,
-							typeof L.DistanceMarkers  !== 'function' || !this.options.lazyLoadJS,
-							Elevation._distanceMarkersLazyLoader
-						).then(() => this.options.polyline && layer.addTo(map));
+						this.lazyLoad(this.__LDISTANCEM)
+							.then(() => this.options.polyline && layer.addTo(map));
 					} else {
 						if (this.options.polyline) layer.addTo(map);
 					}
-				}
-
-			);
+				});
 		}
 	});
 
@@ -1112,7 +1018,7 @@ Elevation.addInitHook(function() {
 				if (options.stroke && options.weight !== 0) {
 					let oldVal                   = ctx.globalCompositeOperation || 'source-over';
 					ctx.globalCompositeOperation = 'destination-over'
-					ctx.strokeStyle              = '#FFF';
+					ctx.strokeStyle              = color.outline || '#FFF';
 					ctx.lineWidth                = options.weight * 1.75;
 					ctx.stroke();
 					ctx.globalCompositeOperation = oldVal;

package/src/distance.js

@@ -8,12 +8,12 @@ Elevation.addInitHook(function() {
 	let opts     = this.options;
 	let distance = {};
 
-	if (this.options.imperial) {
-		this._distanceFactor = this.__mileFactor;
-		this._xLabel         = "mi";
+	if (opts.imperial) {
+		opts.distanceFactor = this.__mileFactor;
+		distance.label      = "mi";
 	} else {
-		this._distanceFactor = opts.distanceFactor;
-		this._xLabel         = opts.xLabel;
+		opts.distanceFactor = opts.distanceFactor || 1;
+		distance.label      = opts.xLabel;
 	}
 
 	this.on("eledata_updated", function(e) {
@@ -26,13 +26,13 @@ Elevation.addInitHook(function() {
 		let curr = data[i].latlng;
 		let prev = i > 0 ? data[i - 1].latlng : curr;
 
-		let delta = curr.distanceTo(prev) * this._distanceFactor;
+		let delta = curr.distanceTo(prev) * opts.distanceFactor;
 
 		dist += Math.round(delta / 1000 * 100000) / 100000; // handles floating points calc
 
-		data[i].dist = dist;
-
 		track.distance = dist;
+
+		data[i].dist = dist;
 	});
 
 	this.on("elechart_axis", function() {
@@ -49,13 +49,10 @@ Elevation.addInitHook(function() {
 
 		this.on("elechart_axis", function() {
 
-			distance.x     = this._chart._x;
-			distance.label = this._chart._xLabel;
-
 			this._chart._registerAxisScale({
 				axis    : "x",
 				position: "bottom",
-				scale   : distance.x,
+				scale   : this._chart._x,
 				label   : distance.label,
 				labelY  : 25,
 				labelX  : () => this._width() + 6,
@@ -66,10 +63,15 @@ Elevation.addInitHook(function() {
 
 	}
 
+	this._registerTooltip({
+		name: 'x',
+		chart: (item) => L._("x: ") + d3.format("." + opts.decimalsX + "f")(item[opts.xAttr]) + " " + distance.label,
+	});
+
 	this._registerSummary({
 		"totlen"  : {
 			label: "Total Length: ",
-			value: (track) => (track.distance || 0).toFixed(2) + ' ' + this._xLabel
+			value: (track) => (track.distance || 0).toFixed(2) + ' ' + distance.label
 		}
 	});
 

package/src/index.js

@@ -39,8 +39,8 @@ import * as _ from './utils';
 import * as D3 from './components';
 import { Chart } from './chart';
 import { Elevation } from './control';
-import './distance';
 import './altitude';
+import './distance';
 import './time';
 import './slope';
 import './speed';
@@ -50,4 +50,15 @@ Elevation.Utils = _;
 Elevation.Components = D3;
 Elevation.Chart = Chart;
 
+/* Temporary fix for empty values evaluated as false (leaflet-i18n v0.3.1) */
+(function(){
+	let proto = L.i18n.bind({});
+	L.i18n = L._ = (string, data) => {
+		if (L.locale && L.locales[L.locale] && L.locales[L.locale][string] == "") {
+			L.locales[L.locale][string] = "\u200B";
+		}
+		return proto.call(null, string, data);
+	};
+})();
+
 L.control.elevation = (options) => new Elevation(options);