@raruto/leaflet-elevation 1.7.2 → 1.7.6

package/libs/leaflet-gpxgroup.js

@@ -100,11 +100,10 @@ L.control.layersLegend = function(baseLayers, overlays, options) {
   return new L.Control.LayersLegend(baseLayers, overlays, options);
 };
 
-L.GPX.include(L.Mixin.Selectable);
+L.GeoJSON.include(L.Mixin.Selectable);
 
 L.GpxGroup = L.Class.extend({
   options: {
-    async: true,
     highlight: {
       color: '#ff0',
       opacity: 1,
@@ -125,7 +124,6 @@ L.GpxGroup = L.Class.extend({
     elevation: true,
     elevation_options: {
       theme: 'yellow-theme',
-      // width: 500,
       detachedView: true,
       elevationDiv: '#elevation-div',
     },
@@ -133,14 +131,6 @@ L.GpxGroup = L.Class.extend({
     distanceMarkers_options: {
       lazy: true
     },
-    marker_options: {
-      startIconUrl: null,
-      endIconUrl: null,
-      shadowUrl: null,
-    },
-    gpx_options: {
-      parseElements: ["track", "route"],
-    }
   },
 
   initialize: function(tracks, options) {
@@ -190,10 +180,40 @@ L.GpxGroup = L.Class.extend({
   },
 
   addTrack: function(track) {
-    this._get(track, this._loadRoute.bind(this));
+    fetch(track).then(response => {
+      if (response.ok) {
+        response.text().then(doc => {
+          let geojson;
+          doc = doc.trim();
+
+          try {
+            let xml  = (new DOMParser()).parseFromString(doc, "text/xml");
+            let type = xml.documentElement.tagName.toLowerCase(); // "kml" or "gpx"
+            let name = xml.getElementsByTagName('name');
+            if (!(type in toGeoJSON)) {
+              type = xml.documentElement.tagName == "TrainingCenterDatabase" ? 'tcx' : 'gpx';
+            }
+            geojson = toGeoJSON[type](xml);
+            geojson.name = name.length > 0 ? Array.from(name).find(tag => tag.parentElement.tagName == "trk").textContent : '';
+          } catch (e) {
+            try {
+              geojson = JSON.parse(doc.toString());
+            } catch (e) {
+              console.warn("Error parsing track: " + track);
+            }
+          }
+          if (!geojson.name) {
+            geojson.name = track.split('/').pop().split('#')[0].split('?')[0];
+          }
+          this._loadRoute(geojson);
+        });
+      }
+    });
   },
 
   _loadRoute: function(data) {
+    if (!data) return;
+
     var colors = this._uniqueColors(this._tracks.length);
     var color = colors[this._count++];
 
@@ -204,24 +224,24 @@ L.GpxGroup = L.Class.extend({
       distanceMarkers: this.options.distanceMarkers_options,
     };
 
-    var route = new L.GPX(data, {
-      async: this.options.async,
-      marker_options: this.options.marker_options,
-      polyline_options: line_style,
-      gpx_options: this.options.gpx_options,
+    var route = L.geoJson(data, {
+      name: data.name || '',
+      style: (feature) => line_style,
+      distanceMarkers: line_style.distanceMarkers,
+      originalStyle: line_style,
+      filter: feature => feature.geometry.type != "Point",
     });
 
-    route.originalStyle = line_style;
-
-    route.on('addline', L.bind(this._onRouteAddLine, this, route));
-    route.on('loaded', L.bind(this._onRouteLoaded, this, route));
-
     route.addTo(this._layers);
     this._routes[route._leaflet_id] = route;
+
+    route.eachLayer((layer) => this._onRouteLayer(route, layer));
+    this._onRouteLoaded(route);
+
   },
 
-  _onRouteAddLine: function(route, e) {
-    var polyline = e.line;
+  _onRouteLayer: function(route, layer) {
+    var polyline = layer;
 
     route.on('selected', L.bind(this._onRouteSelected, this, route, polyline));
 
@@ -229,7 +249,7 @@ L.GpxGroup = L.Class.extend({
     polyline.on('mouseout', L.bind(this._onRouteMouseOut, this, route, polyline));
     polyline.on('click', L.bind(this._onRouteClick, this, route, polyline));
 
-    polyline.bindTooltip(route.get_name(), {
+    polyline.bindTooltip(route.options.name, {
       direction: 'auto',
       sticky: true,
     });
@@ -243,7 +263,7 @@ L.GpxGroup = L.Class.extend({
   },
 
   unhighlight: function(route, polyline) {
-    polyline.setStyle(route.originalStyle);
+    polyline.setStyle(route.options.originalStyle);
     if (this.options.distanceMarkers) {
       polyline.removeDistanceMarkers();
     }
@@ -285,7 +305,7 @@ L.GpxGroup = L.Class.extend({
 
   _onRouteLoaded: function(route) {
     if (this.options.legend) {
-      this._legend.addBaseLayer(route, '<svg id="legend_' + route._leaflet_id + '" width="25" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">' + '<line x1="0" x2="50" y1="5" y2="5" stroke="' + route.options.polyline_options.color + '" fill="transparent" stroke-width="5" /></svg>' + ' ' + route.get_name());
+      this._legend.addBaseLayer(route, '<svg id="legend_' + route._leaflet_id + '" width="25" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">' + '<line x1="0" x2="50" y1="5" y2="5" stroke="' + route.options.originalStyle.color + '" fill="transparent" stroke-width="5" /></svg>' + ' ' + route.options.name);
     }
     this.fire('route_loaded', {
       route: route,
@@ -318,7 +338,7 @@ L.GpxGroup = L.Class.extend({
       }
       route.getLayers().forEach(function(layer) {
         if (layer instanceof L.Polyline) {
-          elevation.addData(layer);
+          elevation.addData(layer, false);
           layer.bringToFront();
         }
       });
@@ -357,17 +377,6 @@ L.GpxGroup = L.Class.extend({
     }
   },
 
-  _get: function(url, callback) {
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", url);
-    xhr.onreadystatechange = function() {
-      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
-        callback(xhr.response);
-      }
-    };
-    xhr.send();
-  },
-
   _uniqueColors: function(count) {
     if (count === 0) return [];
     if (count === 1) return ['#0000ff'];

package/libs/leaflet-gpxgroup.min.js

@@ -1,16 +1,17 @@
 'use strict';L.Mixin.Selectable={includes:L.Mixin.Events,setSelected:function(s){var selected=!!s;if(this._selected!==selected){this._selected=selected;this.fire("selected")}},isSelected:function(){return!!this._selected}};
 L.Mixin.Selection={includes:L.Mixin.Events,getSelection:function(){return this._selected},setSelection:function(item){if(this._selected===item){if(item!==null){item.setSelected(!item.isSelected());if(!item.isSelected())this._selected=null}}else{if(this._selected)this._selected.setSelected(false);this._selected=item;if(this._selected)this._selected.setSelected(true)}this.fire("selection_changed")}};
 L.Control.LayersLegend=L.Control.Layers.extend({_onInputClick:function(){var inputs=this._layerControlInputs,input,layer;var addedLayers=[],removedLayers=[];this._handlingClick=true;for(var i=inputs.length-1;i>=0;i--){input=inputs[i];layer=this._getLayer(input.layerId).layer;if(input.checked)this._map.fireEvent("legend_selected",{layer:layer,input:input},true)}this._handlingClick=false;this._refocusOnMap()}});
-L.control.layersLegend=function(baseLayers,overlays,options){return new L.Control.LayersLegend(baseLayers,overlays,options)};L.GPX.include(L.Mixin.Selectable);
-L.GpxGroup=L.Class.extend({options:{async:true,highlight:{color:"#ff0",opacity:1},points:[],points_options:{icon:{iconUrl:"../images/elevation-poi.png",iconSize:[12,12]}},flyToBounds:true,legend:false,legend_options:{position:"topright",collapsed:false},elevation:true,elevation_options:{theme:"yellow-theme",detachedView:true,elevationDiv:"#elevation-div"},distanceMarkers:true,distanceMarkers_options:{lazy:true},marker_options:{startIconUrl:null,endIconUrl:null,shadowUrl:null}},initialize:function(tracks,
-options){L.Util.setOptions(this,options);this._count=0;this._loadedCount=0;this._tracks=tracks;this._routes={};this._layers=L.featureGroup();this._markers=L.featureGroup();this._elevation=L.control.elevation(this.options.elevation_options);this._legend=L.control.layersLegend(null,null,this.options.legend_options);var icon=L.icon(this.options.points_options.icon);this.options.points.forEach(function(poi){var marker=L.marker(poi.latlng,{icon:icon});marker.bindTooltip(poi.name,{direction:"auto"});marker.addTo(this._markers)},
-this);if(typeof L.DistanceMarkers==="undefined")this.options.distanceMarkers=false},getBounds:function(){return this._layers.getBounds()},addTo:function(map){this._layers.addTo(map);this._markers.addTo(map);this._map=map;this.on("selection_changed",this._onSelectionChanged,this);this._map.on("legend_selected",this._onLegendSelected,this);this._tracks.forEach(this.addTrack,this)},addTrack:function(track){this._get(track,this._loadRoute.bind(this))},_loadRoute:function(data){var colors=this._uniqueColors(this._tracks.length);
-var color=colors[this._count++];var line_style={color:color,opacity:.75,weight:5,distanceMarkers:this.options.distanceMarkers_options};var route=new L.GPX(data,{async:this.options.async,marker_options:this.options.marker_options,polyline_options:line_style});route.originalStyle=line_style;route.on("addline",L.bind(this._onRouteAddLine,this,route));route.on("loaded",L.bind(this._onRouteLoaded,this,route));route.addTo(this._layers);this._routes[route._leaflet_id]=route},_onRouteAddLine:function(route,
-e){var polyline=e.line;route.on("selected",L.bind(this._onRouteSelected,this,route,polyline));polyline.on("mouseover",L.bind(this._onRouteMouseOver,this,route,polyline));polyline.on("mouseout",L.bind(this._onRouteMouseOut,this,route,polyline));polyline.on("click",L.bind(this._onRouteClick,this,route,polyline));polyline.bindTooltip(route.get_name(),{direction:"auto",sticky:true})},highlight:function(route,polyline){polyline.setStyle(this.options.highlight);if(this.options.distanceMarkers)polyline.addDistanceMarkers()},
-unhighlight:function(route,polyline){polyline.setStyle(route.originalStyle);if(this.options.distanceMarkers)polyline.removeDistanceMarkers()},_onRouteMouseOver:function(route,polyline){if(!route.isSelected()){this.highlight(route,polyline);if(this.options.legend){this.setSelection(route);L.DomUtil.get("legend_"+route._leaflet_id).parentNode.previousSibling.click()}}this.fire("route_mouseover",{route:route,polyline:polyline})},_onRouteMouseOut:function(route,polyline){if(!route.isSelected())this.unhighlight(route,
-polyline);this.fire("route_mouseout",{route:route,polyline:polyline})},_onRouteClick:function(route,polyline){this.setSelection(route)},_onRouteSelected:function(route,polyline){if(!route.isSelected())this.unhighlight(route,polyline)},_onRouteLoaded:function(route){if(this.options.legend)this._legend.addBaseLayer(route,'<svg id="legend_'+route._leaflet_id+'" width="25" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">'+'<line x1="0" x2="50" y1="5" y2="5" stroke="'+route.options.polyline_options.color+
-'" fill="transparent" stroke-width="5" /></svg>'+" "+route.get_name());this.fire("route_loaded",{route:route});if(++this._loadedCount===this._tracks.length){this.fire("loaded");if(this.options.flyToBounds)this._map.flyToBounds(this.getBounds(),{duration:.25,easeLinearity:.25,noMoveStart:true});if(this.options.legend)this._legend.addTo(this._map)}},_onSelectionChanged:function(e){var elevation=this._elevation;var eleDiv=elevation.getContainer();var route=this.getSelection();elevation.clear();if(route&&
-route.isSelected()){if(!eleDiv)elevation.loadChart(this._map);route.getLayers().forEach(function(layer){if(layer instanceof L.Polyline){elevation.addData(layer);layer.bringToFront()}})}else if(eleDiv)elevation.remove()},_onLegendSelected:function(e){var layers=this._layers._layers;var route=e.layer;if(!route.isSelected()){this.setSelection(route);for(var i in route._layers)this.highlight(route,route._layers[i]);this._map.flyToBounds(e.layer.getBounds())}var parent=e.input.closest(".leaflet-control-layers-list");
-var offset=e.input.offsetTop-parent.offsetTop;parent.scroll({top:offset||0,behavior:"smooth"});for(var j in layers){var selected=layers[j].isSelected();var legend=L.DomUtil.get("legend_"+layers[j]._leaflet_id);legend.querySelector("line").style.stroke=selected?this.options.highlight.color:"";legend.parentNode.style.fontWeight=selected?"700":""}},_get:function(url,callback){var xhr=new XMLHttpRequest;xhr.open("GET",url);xhr.onreadystatechange=function(){if(xhr.readyState===XMLHttpRequest.DONE&&xhr.status===
-200)callback(xhr.response)};xhr.send()},_uniqueColors:function(count){if(count===0)return[];if(count===1)return["#0000ff"];var increment=1/count;var colors=[];for(var i=0;i<count;++i){var hue=i*increment;var rgb=this._hsvToRgb(hue,1,.7);var hex="#"+this._rgbToHex(rgb[0],rgb[1],rgb[2]);colors.push(hex)}return colors},_hsvToRgb:function(h,s,v){var r,g,b;var i=Math.floor(h*6);var f=h*6-i;var p=v*(1-s);var q=v*(1-f*s);var t=v*(1-(1-f)*s);switch(i%6){case 0:r=v;g=t;b=p;break;case 1:r=q;g=v;b=p;break;case 2:r=
-p;g=v;b=t;break;case 3:r=p;g=q;b=v;break;case 4:r=t;g=p;b=v;break;case 5:r=v;g=p;b=q;break}return[r*255,g*255,b*255]},_rgbToHex:function(r,g,b){return this._byteToHex(r)+this._byteToHex(g)+this._byteToHex(b)},_byteToHex:function(n){return(n>>4&15).toString(16)+(n&15).toString(16)},removeFrom:function(map){this._layers.removeFrom(map)}});L.GpxGroup.include(L.Mixin.Events);L.GpxGroup.include(L.Mixin.Selection);L.gpxGroup=function(tracks,options){return new L.GpxGroup(tracks,options)};
+L.control.layersLegend=function(baseLayers,overlays,options){return new L.Control.LayersLegend(baseLayers,overlays,options)};L.GeoJSON.include(L.Mixin.Selectable);
+L.GpxGroup=L.Class.extend({options:{highlight:{color:"#ff0",opacity:1},points:[],points_options:{icon:{iconUrl:"../images/elevation-poi.png",iconSize:[12,12]}},flyToBounds:true,legend:false,legend_options:{position:"topright",collapsed:false},elevation:true,elevation_options:{theme:"yellow-theme",detachedView:true,elevationDiv:"#elevation-div"},distanceMarkers:true,distanceMarkers_options:{lazy:true}},initialize:function(tracks,options){L.Util.setOptions(this,options);this._count=0;this._loadedCount=
+0;this._tracks=tracks;this._routes={};this._layers=L.featureGroup();this._markers=L.featureGroup();this._elevation=L.control.elevation(this.options.elevation_options);this._legend=L.control.layersLegend(null,null,this.options.legend_options);var icon=L.icon(this.options.points_options.icon);this.options.points.forEach(function(poi){var marker=L.marker(poi.latlng,{icon:icon});marker.bindTooltip(poi.name,{direction:"auto"});marker.addTo(this._markers)},this);if(typeof L.DistanceMarkers==="undefined")this.options.distanceMarkers=
+false},getBounds:function(){return this._layers.getBounds()},addTo:function(map){this._layers.addTo(map);this._markers.addTo(map);this._map=map;this.on("selection_changed",this._onSelectionChanged,this);this._map.on("legend_selected",this._onLegendSelected,this);this._tracks.forEach(this.addTrack,this)},addTrack:function(track){fetch(track).then((response)=>{if(response.ok)response.text().then((doc)=>{let geojson;doc=doc.trim();try{let xml=(new DOMParser).parseFromString(doc,"text/xml");let type=
+xml.documentElement.tagName.toLowerCase();let name=xml.getElementsByTagName("name");if(!(type in toGeoJSON))type=xml.documentElement.tagName=="TrainingCenterDatabase"?"tcx":"gpx";geojson=toGeoJSON[type](xml);geojson.name=name.length>0?Array.from(name).find((tag)=>tag.parentElement.tagName=="trk").textContent:""}catch(e){try{geojson=JSON.parse(doc.toString())}catch(e){console.warn("Error parsing track: "+track)}}if(!geojson.name)geojson.name=track.split("/").pop().split("#")[0].split("?")[0];this._loadRoute(geojson)})})},
+_loadRoute:function(data){if(!data)return;var colors=this._uniqueColors(this._tracks.length);var color=colors[this._count++];var line_style={color:color,opacity:.75,weight:5,distanceMarkers:this.options.distanceMarkers_options};var route=L.geoJson(data,{name:data.name||"",style:(feature)=>line_style,distanceMarkers:line_style.distanceMarkers,originalStyle:line_style,filter:(feature)=>feature.geometry.type!="Point"});route.addTo(this._layers);this._routes[route._leaflet_id]=route;route.eachLayer((layer)=>
+this._onRouteLayer(route,layer));this._onRouteLoaded(route)},_onRouteLayer:function(route,layer){var polyline=layer;route.on("selected",L.bind(this._onRouteSelected,this,route,polyline));polyline.on("mouseover",L.bind(this._onRouteMouseOver,this,route,polyline));polyline.on("mouseout",L.bind(this._onRouteMouseOut,this,route,polyline));polyline.on("click",L.bind(this._onRouteClick,this,route,polyline));polyline.bindTooltip(route.options.name,{direction:"auto",sticky:true})},highlight:function(route,
+polyline){polyline.setStyle(this.options.highlight);if(this.options.distanceMarkers)polyline.addDistanceMarkers()},unhighlight:function(route,polyline){polyline.setStyle(route.options.originalStyle);if(this.options.distanceMarkers)polyline.removeDistanceMarkers()},_onRouteMouseOver:function(route,polyline){if(!route.isSelected()){this.highlight(route,polyline);if(this.options.legend){this.setSelection(route);L.DomUtil.get("legend_"+route._leaflet_id).parentNode.previousSibling.click()}}this.fire("route_mouseover",
+{route:route,polyline:polyline})},_onRouteMouseOut:function(route,polyline){if(!route.isSelected())this.unhighlight(route,polyline);this.fire("route_mouseout",{route:route,polyline:polyline})},_onRouteClick:function(route,polyline){this.setSelection(route)},_onRouteSelected:function(route,polyline){if(!route.isSelected())this.unhighlight(route,polyline)},_onRouteLoaded:function(route){if(this.options.legend)this._legend.addBaseLayer(route,'<svg id="legend_'+route._leaflet_id+'" width="25" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">'+
+'<line x1="0" x2="50" y1="5" y2="5" stroke="'+route.options.originalStyle.color+'" fill="transparent" stroke-width="5" /></svg>'+" "+route.options.name);this.fire("route_loaded",{route:route});if(++this._loadedCount===this._tracks.length){this.fire("loaded");if(this.options.flyToBounds)this._map.flyToBounds(this.getBounds(),{duration:.25,easeLinearity:.25,noMoveStart:true});if(this.options.legend)this._legend.addTo(this._map)}},_onSelectionChanged:function(e){var elevation=this._elevation;var eleDiv=
+elevation.getContainer();var route=this.getSelection();elevation.clear();if(route&&route.isSelected()){if(!eleDiv)elevation.loadChart(this._map);route.getLayers().forEach(function(layer){if(layer instanceof L.Polyline){elevation.addData(layer,false);layer.bringToFront()}})}else if(eleDiv)elevation.remove()},_onLegendSelected:function(e){var layers=this._layers._layers;var route=e.layer;if(!route.isSelected()){this.setSelection(route);for(var i in route._layers)this.highlight(route,route._layers[i]);
+this._map.flyToBounds(e.layer.getBounds())}var parent=e.input.closest(".leaflet-control-layers-list");var offset=e.input.offsetTop-parent.offsetTop;parent.scroll({top:offset||0,behavior:"smooth"});for(var j in layers){var selected=layers[j].isSelected();var legend=L.DomUtil.get("legend_"+layers[j]._leaflet_id);legend.querySelector("line").style.stroke=selected?this.options.highlight.color:"";legend.parentNode.style.fontWeight=selected?"700":""}},_uniqueColors:function(count){if(count===0)return[];
+if(count===1)return["#0000ff"];var increment=1/count;var colors=[];for(var i=0;i<count;++i){var hue=i*increment;var rgb=this._hsvToRgb(hue,1,.7);var hex="#"+this._rgbToHex(rgb[0],rgb[1],rgb[2]);colors.push(hex)}return colors},_hsvToRgb:function(h,s,v){var r,g,b;var i=Math.floor(h*6);var f=h*6-i;var p=v*(1-s);var q=v*(1-f*s);var t=v*(1-(1-f)*s);switch(i%6){case 0:r=v;g=t;b=p;break;case 1:r=q;g=v;b=p;break;case 2:r=p;g=v;b=t;break;case 3:r=p;g=q;b=v;break;case 4:r=t;g=p;b=v;break;case 5:r=v;g=p;b=q;
+break}return[r*255,g*255,b*255]},_rgbToHex:function(r,g,b){return this._byteToHex(r)+this._byteToHex(g)+this._byteToHex(b)},_byteToHex:function(n){return(n>>4&15).toString(16)+(n&15).toString(16)},removeFrom:function(map){this._layers.removeFrom(map)}});L.GpxGroup.include(L.Mixin.Events);L.GpxGroup.include(L.Mixin.Selection);L.gpxGroup=function(tracks,options){return new L.GpxGroup(tracks,options)};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "1.7.2",
+	"version": "1.7.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/acceleration.js

@@ -96,7 +96,7 @@ Elevation.addInitHook(function() {
 
 	this._registerFocusLabel({
 		name  : 'acceleration',
-		chart : (item) => item.acceleration + " " + acceleration.label,
+		chart: (item) => L._("a: ") + item.acceleration + " " + acceleration.label,
 		marker: (item) => Math.round(item.acceleration) + " " + acceleration.label,
 	});
 

package/src/altitude.js

@@ -107,6 +107,12 @@ Elevation.addInitHook(function() {
 
 	}
 
+	this._registerFocusLabel({
+		name: 'y',
+		chart: (item) => L._("y: ") + d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + this._yLabel,
+		marker: (item) => d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + this._yLabel,
+	});
+
 	this._registerSummary({
 		"maxele"  : {
 			label: "Max Elevation: ",

package/src/chart.js

@@ -783,38 +783,17 @@ export var Chart = L.Class.extend({
 				height: this._height()
 			})
 		);
+
 		this._focuslabel.call(
 			D3.MouseFocusLabel({
 				xCoord: xCoordinate,
 				yCoord: yCoordinate,
 				height: this._height(),
 				width : this._width(),
-				labelX: d3.format("."+ opts.decimalsX +"f")(item[opts.xAttr]) + " " + this._xLabel,
-				labelY: d3.format("."+ opts.decimalsY +"f")(item[opts.yAttr]) + " " + this._yLabel
+				labels: this._props.focusLabels,
+				item: item
 			})
 		);
-
-		// this._focuslabel.selectAll('tspan').data(Object.values(this._focuslabels));
-
-		let labels = this._props.focusLabels;
-		let tooltip = this._focuslabel.select('text');
-		let label;
-
-		for (var i in labels) {
-			label = tooltip.select(".mouse-focus-label-" + labels[i].name);
-
-			if (!label.size()) {
-				label   = tooltip.append("svg:tspan", ".mouse-focus-label-x")
-					.attr("class", "mouse-focus-label-" + labels[i].name)
-					.attr("dy", "1.5em");
-			}
-
-			label.text(typeof labels[i].value !== "function" ? labels[i].value : labels[i].value(item) );
-
-			this._focuslabel.select('.mouse-focus-label-x')
-				.attr("dy", "1.5em");
-		}
-
 	},
 
 	_hideDiagramIndicator: function() {

package/src/components.js

@@ -124,7 +124,8 @@ export const HeightFocusLabel = ({
 	theme,
 	xCoord = 0,
 	yCoord = 0,
-	label,
+	labels = {},
+	item = {}
 }) => {
 	return text => {
 		text
@@ -133,13 +134,21 @@ export const HeightFocusLabel = ({
 			.attr("x", xCoord + 5)
 			.attr("y", yCoord);
 
-		let y = text.select(".height-focus-y");
-		if (!y.node()) y = text.append("svg:tspan");
+		let label;
+
+		for (var i in labels) {
+			label = text.select(".height-focus-" + labels[i].name);
 
-		y
-			.attr("class", "height-focus-y")
-			.text(label);
+			if (!label.size()) {
+				label = text.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(item));
+		}
+
+		text.select('tspan').attr("dy", text.selectAll('tspan').size() > 1 ? "-1.5em" : "0em" );
 		text.selectAll('tspan').attr("x", xCoord + 5);
 
 		return text;
@@ -161,7 +170,7 @@ export const HeightFocusMarker = ({
 
 export const LegendItem = ({
 	name,
-  label,
+	label,
 	width,
 	height,
 	margins = {},
@@ -222,9 +231,9 @@ export const MouseFocusLine = ({
 export const MouseFocusLabel = ({
 	xCoord,
 	yCoord,
-	labelX = "",
-	labelY = "",
 	width,
+	labels = {},
+	item = {},
 }) => {
 	return g => {
 
@@ -232,16 +241,9 @@ export const MouseFocusLabel = ({
 
 		let rect = g.select(".mouse-focus-label-rect");
 		let text = g.select(".mouse-focus-label-text");
-		let y    = text.select(".mouse-focus-label-y");
-		let x    = text.select(".mouse-focus-label-x");
 
 		if (!rect.node()) rect = g.append("svg:rect");
 		if (!text.node()) text = g.append("svg:text");
-		if (!y.node())    y    = text.append("svg:tspan");
-		if (!x.node())    x    = text.append("svg:tspan");
-
-		y.text(labelY);
-		x.text(labelX);
 
 		// Sets focus-label-text position to the left / right of the mouse-focus-line
 		let xAlign = 0;
@@ -264,13 +266,22 @@ export const MouseFocusLabel = ({
 			.attr("class", "mouse-focus-label-text")
 			.style("font-weight", "700")
 			.attr("y", yAlign);
-		y
-			.attr("class", "mouse-focus-label-y")
-			.attr("dy", "1em");
-		x
-			.attr("class", "mouse-focus-label-x")
-			.attr("dy", "2em");
 
+		let label;
+
+		for (var i in labels) {
+			label = text.select(".mouse-focus-label-" + labels[i].name);
+
+			if (!label.size()) {
+				label = text.append("svg:tspan", ".mouse-focus-label-x")
+					.attr("class", "mouse-focus-label-" + labels[i].name)
+					.attr("dy", "1.5em");
+			}
+
+			label.text(typeof labels[i].value !== "function" ? labels[i].value : labels[i].value(item));
+		}
+
+		text.select('tspan').attr("dy", "1em");
 		text.selectAll('tspan').attr("x", xAlign);
 
 		return g;
@@ -460,8 +471,9 @@ export const Chart = ({
 				yCoord: 0,
 				height: _height,
 				width : _width,
-				labelX: "",
-				labelY: "",
+				labels: {}
+				// labelX: "",
+				// labelY: "",
 			})
 		);
 

package/src/control.js

@@ -17,13 +17,13 @@ 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.2/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.7.6/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" || layer === null) && d.on) {
+		if (typeof layer === "undefined" && d.on) {
 			layer = d;
 		}
 		Elevation._d3LazyLoader = _.lazyLoader(
@@ -70,7 +70,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 
 	_clearChart: function() {
 		if (this._events && this._events.elechart_updated) {
-			this._events.elechart_updated.forEach(e => controlElevation.off('elechart_updated', e.fn, e.ctx));
+			this._events.elechart_updated.forEach(e => this.off('elechart_updated', e.fn, e.ctx));
 		}
 		if (this._chart && this._chart._container) {
 			this._chart._container.selectAll('g.point .point').remove();
@@ -196,6 +196,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		// 	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 || {});
 	},
@@ -448,7 +450,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 */
 	_addGPXData: function(coords) {
 		_.each(coords, point => {
-			this._addPoint(point.lat, point.lng, point.meta.ele);
+			this._addPoint(point.lat, point.lng, typeof point.alt !== "undefined" ? 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 });
@@ -830,6 +832,8 @@ 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;
 
@@ -918,7 +922,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");
@@ -1110,7 +1114,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

@@ -66,6 +66,11 @@ Elevation.addInitHook(function() {
 
 	}
 
+	this._registerFocusLabel({
+		name: 'x',
+		chart: (item) => L._("x: ") + d3.format("." + opts.decimalsX + "f")(item[opts.xAttr]) + " " + this._xLabel,
+	});
+
 	this._registerSummary({
 		"totlen"  : {
 			label: "Total Length: ",

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);

package/src/marker.js

@@ -93,35 +93,18 @@ export var Marker = L.Class.extend({
 						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
+						labels: this._focuslabels,
+						item: point
 					})
 				);
 
-			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);

package/src/options.js

@@ -68,6 +68,7 @@ export var Options = {
 	time: false,
 	timeFactor: 3600,
 	timeFormat: false,
+	timestamps: false,
 	sDeltaMax: undefined,
 	sInterpolation: "curveStepAfter",
 	sRange: undefined,
@@ -81,6 +82,7 @@ export var Options = {
 			iconAnchor: [8, 30],
 		}),
 	},
+	wptLabels: true,
 	xAttr: "dist",
 	xLabel: "km",
 	xTicks: undefined,

package/src/slope.js

@@ -95,7 +95,7 @@ Elevation.addInitHook(function() {
 
 	this._registerFocusLabel({
 		name: 'slope',
-		chart: (item) => item.slope + slope.label,
+		chart: (item) => L._("m: ") + item.slope + slope.label,
 		marker: (item) => Math.round(item.slope) + slope.label
 	});
 

package/src/speed.js

@@ -96,8 +96,8 @@ Elevation.addInitHook(function() {
 
 		this._registerFocusLabel({
 			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

@@ -100,20 +100,25 @@ Elevation.addInitHook(function() {
 		this.track_info.time = duration;
 	});
 
-	if (this.options.time) {
 
+	if (this.options.timestamps) {
 		this._registerFocusLabel({
-			name: 'time',
-			chart: (item) => this.options.timeFormat(item.time)
+			name: 'date',
+			chart: (item) => L._("t: ") + this.options.timeFormat(item.time)
 		});
+	}
 
+	if (this.options.time) {
+		this._registerFocusLabel({
+			name: 'time',
+			chart: (item) => L._("T: ") + _.formatTime(item.duration || 0)
+		});
 		this._registerSummary({
 			"tottime"  : {
 				label: "Total Time: ",
 				value: (track) => _.formatTime(track.time || 0)
 			}
 		});
-
 	}
 
 });