@raruto/leaflet-elevation 1.7.6 → 1.8.2

package/dist/leaflet-elevation.js

@@ -101,31 +101,6 @@
 
       return deepMerge.apply(void 0, [target].concat(sources));
     }
-    /**
-     * Wait for document load before execute function.
-     */
-
-    function deferFunc(f) {
-      if (document.readyState !== 'complete') window.addEventListener("load", f, {
-        once: true
-      });else f();
-    }
-    /**
-     * Debounce function to limit events are being fired.
-     */
-
-    function debounce(func, wait, context, immediate) {
-      var timeout;
-      return function () {
-        var args = arguments;
-        clearTimeout(timeout);
-        timeout = setTimeout(function () {
-          timeout = null;
-          if (!immediate) func.apply(context, args);
-        }, wait);
-        if (immediate && !timeout) func.apply(context, args);
-      };
-    }
     var SEC = 1000;
     var MIN = SEC * 60;
     var HOUR = MIN * 60;
@@ -283,13 +258,6 @@
 
       return layer;
     }
-    /**
-     * Check DOM element visibility.
-     */
-
-    function isDomVisible(elem) {
-      return !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
-    }
     /**
      * Check object type.
      */
@@ -297,40 +265,6 @@
     function isObject(item) {
       return item && _typeof(item) === 'object' && !Array.isArray(item);
     }
-    /**
-     * Check DOM element viewport visibility.
-     */
-
-    function isVisible(elem) {
-      if (!elem) return false;
-      var styles = window.getComputedStyle(elem);
-
-      function isVisibleByStyles(elem, styles) {
-        return styles.visibility !== 'hidden' && styles.display !== 'none';
-      }
-
-      function isAboveOtherElements(elem, styles) {
-        var boundingRect = elem.getBoundingClientRect();
-        var left = boundingRect.left + 1;
-        var right = boundingRect.right - 1;
-        var top = boundingRect.top + 1;
-        var bottom = boundingRect.bottom - 1;
-        var above = true;
-        var pointerEvents = elem.style.pointerEvents;
-        if (styles['pointer-events'] == 'none') elem.style.pointerEvents = 'auto';
-        if (document.elementFromPoint(left, top) !== elem) above = false;
-        if (document.elementFromPoint(right, top) !== elem) above = false; // Only for completely visible elements
-        // if (document.elementFromPoint(left, bottom) !== elem) above = false;
-        // if (document.elementFromPoint(right, bottom) !== elem) above = false;
-
-        elem.style.pointerEvents = pointerEvents;
-        return above;
-      }
-
-      if (!isVisibleByStyles(elem, styles)) return false;
-      if (!isAboveOtherElements(elem, styles)) return false;
-      return true;
-    }
     /**
      * Check JSON object type.
      */
@@ -368,6 +302,22 @@
         return documentElement ? documentElement.nodeName !== "HTML" : false;
       }
     }
+    /**
+     * Generate download data event.
+     */
+
+    function saveFile(dataURI, fileName) {
+      var a = create('a', '', {
+        href: dataURI,
+        target: '_new',
+        download: fileName || "",
+        style: "display:none;"
+      });
+      var b = document.body;
+      b.appendChild(a);
+      a.click();
+      b.removeChild(a);
+    }
     /**
      * Async JS script download.
      */
@@ -390,50 +340,69 @@
         document.head.appendChild(tag);
       });
     }
+    function lazyLoad(src, control) {
+      if (!control.options.lazyLoadJS) return Promise.resolve();
+      var Elevation = L.Control.Elevation;
+      var loader = '';
+      var condition = false;
+
+      switch (src) {
+        case control.__D3:
+          loader = '_d3LazyLoader';
+          condition = (typeof d3 === "undefined" ? "undefined" : _typeof(d3)) !== 'object';
+          break;
+
+        case control.__TOGEOJSON:
+          loader = '_togeojsonLazyLoader';
+          condition = (typeof toGeoJSON === "undefined" ? "undefined" : _typeof(toGeoJSON)) !== 'object';
+          break;
+
+        case control.__LGEOMUTIL:
+          loader = '_geomutilLazyLoader';
+          condition = _typeof(L.GeometryUtil) !== 'object';
+
+        case control.__LALMOSTOVER:
+          loader = '_almostoverLazyLoader';
+          condition = typeof L.Handler.AlmostOver !== 'function ';
+          break;
+
+        case control.__LDISTANCEM:
+          loader = '_distanceMarkersLazyLoader';
+          condition = typeof L.DistanceMarkers !== 'function';
+          break;
+      }
+
+      return Elevation[loader] = lazyLoader(src, condition, Elevation[loader]);
+    }
     /**
-     * Generate download data event.
+     * Convert SVG Path into Path2D and then update canvas
      */
 
-    function saveFile(dataURI, fileName) {
-      var a = create('a', '', {
-        href: dataURI,
-        target: '_new',
-        download: fileName || "",
-        style: "display:none;"
-      });
-      var b = document.body;
-      b.appendChild(a);
-      a.click();
-      b.removeChild(a);
+    function drawCanvas(ctx, path) {
+      path.classed('canvas-path', true);
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      var p = new Path2D(path.attr('d'));
+      ctx.strokeStyle = path.attr('stroke');
+      ctx.fillStyle = path.attr('fill');
+      ctx.lineWidth = 1.25;
+      ctx.globalCompositeOperation = 'source-over'; // stroke opacity
+
+      ctx.globalAlpha = path.attr('stroke-opacity') || 0.3;
+      ctx.stroke(p); // fill opacity
+
+      ctx.globalAlpha = path.attr('fill-opacity') || 0.45;
+      ctx.fill(p);
+      ctx.globalAlpha = 1;
+      ctx.closePath();
     }
     /**
-     * Wait for element visible before execute function.
+     * Limit a number between min / max values
      */
 
-    function waitHolder(elem) {
-      return new Promise(function (resolve, reject) {
-        var ticking = false;
-
-        var scrollFn = function scrollFn() {
-          if (!ticking) {
-            L.Util.requestAnimFrame(function () {
-              if (isVisible(elem)) {
-                window.removeEventListener('scroll', scrollFn);
-                resolve();
-              }
-
-              ticking = false;
-            });
-            ticking = true;
-          }
-        };
-
-        window.addEventListener('scroll', scrollFn);
-        if (elem) elem.addEventListener('mouseenter', scrollFn, {
-          once: true
-        });
-        scrollFn();
-      });
+    function clamp(val, range) {
+      if (range) return val < range[0] ? range[0] : val > range[1] ? range[1] : val;
+      return val;
     }
     /**
      * A little bit safier than L.DomUtil.addClass
@@ -524,9 +493,17 @@
      */
 
     var hasClass = L.DomUtil.hasClass;
+    /**
+     * Generate a random string
+     */
+
     function randomId() {
       return Math.random().toString(36).substr(2, 9);
     }
+    /**
+     * Execute a function foreach element in object
+     */
+
     function each(obj, fn) {
       for (var i in obj) {
         fn(obj[i], i);
@@ -536,18 +513,16 @@
     var _ = /*#__PURE__*/Object.freeze({
         __proto__: null,
         deepMerge: deepMerge,
-        deferFunc: deferFunc,
-        debounce: debounce,
         formatTime: formatTime,
         GeoJSONLoader: GeoJSONLoader,
-        isDomVisible: isDomVisible,
         isObject: isObject,
-        isVisible: isVisible,
         isJSONDoc: isJSONDoc,
         isXMLDoc: isXMLDoc,
-        lazyLoader: lazyLoader,
         saveFile: saveFile,
-        waitHolder: waitHolder,
+        lazyLoader: lazyLoader,
+        lazyLoad: lazyLoad,
+        drawCanvas: drawCanvas,
+        clamp: clamp,
         addClass: addClass,
         removeClass: removeClass,
         toggleClass: toggleClass,
@@ -672,30 +647,29 @@
       props.type = "grid";
       return Axis(props);
     };
-    var HeightFocusLine = function HeightFocusLine(_ref4) {
+    var PositionMarker = function PositionMarker(_ref4) {
       var theme = _ref4.theme,
           _ref4$xCoord = _ref4.xCoord,
           xCoord = _ref4$xCoord === void 0 ? 0 : _ref4$xCoord,
           _ref4$yCoord = _ref4.yCoord,
           yCoord = _ref4$yCoord === void 0 ? 0 : _ref4$yCoord,
+          _ref4$labels = _ref4.labels,
+          labels = _ref4$labels === void 0 ? {} : _ref4$labels,
+          _ref4$item = _ref4.item,
+          item = _ref4$item === void 0 ? {} : _ref4$item,
           _ref4$length = _ref4.length,
           length = _ref4$length === void 0 ? 0 : _ref4$length;
-      return function (line) {
-        return line.attr("class", theme + " height-focus line").attr("x1", xCoord).attr("x2", xCoord).attr("y1", yCoord).attr("y2", length);
-      };
-    };
-    var HeightFocusLabel = function HeightFocusLabel(_ref5) {
-      var theme = _ref5.theme,
-          _ref5$xCoord = _ref5.xCoord,
-          xCoord = _ref5$xCoord === void 0 ? 0 : _ref5$xCoord,
-          _ref5$yCoord = _ref5.yCoord,
-          yCoord = _ref5$yCoord === void 0 ? 0 : _ref5$yCoord,
-          _ref5$labels = _ref5.labels,
-          labels = _ref5$labels === void 0 ? {} : _ref5$labels,
-          _ref5$item = _ref5.item,
-          item = _ref5$item === void 0 ? {} : _ref5$item;
-      return function (text) {
-        text.attr("class", theme + " height-focus-label").style("pointer-events", "none").attr("x", xCoord + 5).attr("y", yCoord);
+      return function (g) {
+        var line = g.select('.height-focus.line');
+        var circle = g.select('.height-focus.circle-lower');
+        var text = g.select('.height-focus-label');
+        if (!line.node()) line = g.append('svg:line');
+        if (!circle.node()) circle = g.append('svg:circle');
+        if (!text.node()) text = g.append('svg:text');
+        if (isNaN(xCoord) || isNaN(yCoord)) return g;
+        circle.attr("class", theme + " height-focus circle-lower").attr("transform", "translate(" + xCoord + "," + yCoord + ")").attr("r", 6).attr("cx", 0).attr("cy", 0);
+        line.attr("class", theme + " height-focus line").attr("x1", xCoord).attr("x2", xCoord).attr("y1", yCoord).attr("y2", length);
+        text.attr("class", theme + " height-focus-label").style("pointer-events", "none").attr("x", xCoord + 5).attr("y", length);
         var label;
 
         for (var i in labels) {
@@ -710,33 +684,22 @@
 
         text.select('tspan').attr("dy", text.selectAll('tspan').size() > 1 ? "-1.5em" : "0em");
         text.selectAll('tspan').attr("x", xCoord + 5);
-        return text;
-      };
-    };
-    var HeightFocusMarker = function HeightFocusMarker(_ref6) {
-      var theme = _ref6.theme,
-          _ref6$xCoord = _ref6.xCoord,
-          xCoord = _ref6$xCoord === void 0 ? 0 : _ref6$xCoord,
-          _ref6$yCoord = _ref6.yCoord,
-          yCoord = _ref6$yCoord === void 0 ? 0 : _ref6$yCoord;
-      return function (circle) {
-        return circle.attr("class", theme + " height-focus circle-lower").attr("transform", "translate(" + xCoord + "," + yCoord + ")").attr("r", 6).attr("cx", 0).attr("cy", 0);
+        return g;
       };
     };
-    var LegendItem = function LegendItem(_ref7) {
-      var name = _ref7.name,
-          label = _ref7.label,
-          width = _ref7.width,
-          height = _ref7.height,
-          _ref7$margins = _ref7.margins,
-          margins = _ref7$margins === void 0 ? {} : _ref7$margins,
-          color = _ref7.color,
-          path = _ref7.path;
+    var LegendItem = function LegendItem(_ref5) {
+      var name = _ref5.name,
+          label = _ref5.label,
+          width = _ref5.width,
+          height = _ref5.height,
+          _ref5$margins = _ref5.margins,
+          margins = _ref5$margins === void 0 ? {} : _ref5$margins,
+          color = _ref5.color,
+          path = _ref5.path;
       return function (g) {
         g.attr("class", "legend-item legend-" + name.toLowerCase()).attr("data-name", name);
-        var svg = d3.select(g.node().ownerSVGElement || g);
         g.on('click.legend', function () {
-          return svg.dispatch("legend_clicked", {
+          return d3.select(g.node().ownerSVGElement || g).dispatch("legend_clicked", {
             detail: {
               path: path.node(),
               name: name,
@@ -750,28 +713,24 @@
         return g;
       };
     };
-    var MouseFocusLine = function MouseFocusLine(_ref8) {
-      var _ref8$xCoord = _ref8.xCoord,
-          xCoord = _ref8$xCoord === void 0 ? 0 : _ref8$xCoord,
-          height = _ref8.height;
-      return function (line) {
-        return line.attr('class', 'mouse-focus-line').attr('x2', xCoord).attr('y2', 0).attr('x1', xCoord).attr('y1', height);
-      };
-    };
-    var MouseFocusLabel = function MouseFocusLabel(_ref9) {
-      var xCoord = _ref9.xCoord,
-          yCoord = _ref9.yCoord,
-          width = _ref9.width,
-          _ref9$labels = _ref9.labels,
-          labels = _ref9$labels === void 0 ? {} : _ref9$labels,
-          _ref9$item = _ref9.item,
-          item = _ref9$item === void 0 ? {} : _ref9$item;
+    var Tooltip = function Tooltip(_ref6) {
+      var xCoord = _ref6.xCoord,
+          yCoord = _ref6.yCoord,
+          width = _ref6.width,
+          height = _ref6.height,
+          _ref6$labels = _ref6.labels,
+          labels = _ref6$labels === void 0 ? {} : _ref6$labels,
+          _ref6$item = _ref6.item,
+          item = _ref6$item === void 0 ? {} : _ref6$item;
       return function (g) {
-        g.attr('class', 'mouse-focus-label');
-        var rect = g.select(".mouse-focus-label-rect");
-        var text = g.select(".mouse-focus-label-text");
-        if (!rect.node()) rect = g.append("svg:rect");
-        if (!text.node()) text = g.append("svg:text"); // Sets focus-label-text position to the left / right of the mouse-focus-line
+        var line = g.select('.mouse-focus-line');
+        var box = g.select('.mouse-focus-label');
+        if (!line.node()) line = g.append('svg:line');
+        if (!box.node()) box = g.append("g");
+        var rect = box.select(".mouse-focus-label-rect");
+        var text = box.select(".mouse-focus-label-text");
+        if (!rect.node()) rect = box.append("svg:rect");
+        if (!text.node()) text = box.append("svg:text"); // Sets focus-label-text position to the left / right of the mouse-focus-line
 
         var xAlign = 0;
         var yAlign = 0;
@@ -788,6 +747,8 @@
 
         if (xCoord) xAlign = xCoord + (xCoord < width / 2 ? 10 : -bbox.width - 10);
         if (yCoord) yAlign = Math.max(yCoord - bbox.height, L.Browser.webkit ? 0 : -Infinity);
+        line.attr('class', 'mouse-focus-line').attr('x2', xCoord).attr('y2', 0).attr('x1', xCoord).attr('y1', height);
+        box.attr('class', 'mouse-focus-label');
         rect.attr("class", "mouse-focus-label-rect").attr("x", xAlign - 5).attr("y", yAlign - 5).attr("width", bbox.width + 10).attr("height", bbox.height + 10).attr("rx", 3).attr("ry", 3);
         text.attr("class", "mouse-focus-label-text").style("font-weight", "700").attr("y", yAlign);
         var label;
@@ -807,9 +768,9 @@
         return g;
       };
     };
-    var Ruler = function Ruler(_ref10) {
-      var height = _ref10.height,
-          width = _ref10.width;
+    var Ruler = function Ruler(_ref7) {
+      var height = _ref7.height,
+          width = _ref7.width;
       return function (g) {
         g.data([{
           "x": 0,
@@ -856,13 +817,64 @@
         return g;
       };
     };
-    var Domain = function Domain(_ref11) {
-      var min = _ref11.min,
-          max = _ref11.max,
-          attr = _ref11.attr,
-          name = _ref11.name,
-          forceBounds = _ref11.forceBounds,
-          scale = _ref11.scale;
+    var CheckPoint = function CheckPoint(_ref8) {
+      var point = _ref8.point,
+          height = _ref8.height,
+          width = _ref8.width,
+          x = _ref8.x,
+          y = _ref8.y;
+      return function (g) {
+        if (isNaN(x) || isNaN(y)) return g;
+
+        if (!point.item || !point.item.property('isConnected')) {
+          point.position = point.position || "bottom";
+          point.item = g.append('g');
+          point.item.append("svg:line").attr("y1", 0).attr("x1", 0).attr("style", "stroke: rgb(51, 51, 51); stroke-width: 0.5; stroke-dasharray: 2, 2;");
+          point.item.append("svg:circle").attr("class", " height-focus circle-lower").attr("r", 3);
+
+          if (point.label) {
+            point.item.append("svg:text").attr("dx", "4px").attr("dy", "-4px");
+          }
+        }
+
+        point.item.datum({
+          pos: point.position,
+          x: x,
+          y: y
+        }).attr("class", function (d) {
+          return "point " + d.pos;
+        }).attr("transform", function (d) {
+          return "translate(" + d.x + "," + d.y + ")";
+        });
+        point.item.select('line').datum({
+          y2: {
+            'top': -y,
+            'bottom': height - y
+          }[point.position],
+          x2: {
+            'left': -x,
+            'right': width - x
+          }[point.position] || 0
+        }).attr("y2", function (d) {
+          return d.y2;
+        }).attr("x2", function (d) {
+          return d.x2;
+        });
+
+        if (point.label) {
+          point.item.select('text').text(point.label);
+        }
+
+        return g;
+      };
+    };
+    var Domain = function Domain(_ref9) {
+      var min = _ref9.min,
+          max = _ref9.max,
+          attr = _ref9.attr,
+          name = _ref9.name,
+          forceBounds = _ref9.forceBounds,
+          scale = _ref9.scale;
       return function (data) {
         attr = attr || name;
         if (scale && scale.attr) attr = scale.attr;
@@ -881,19 +893,19 @@
         return domain;
       };
     };
-    var Range = function Range(_ref12) {
-      var axis = _ref12.axis;
+    var Range = function Range(_ref10) {
+      var axis = _ref10.axis;
       return function (width, height) {
         if (axis == 'x') return [0, width];else if (axis == 'y') return [height, 0];
       };
     };
-    var Scale = function Scale(_ref13) {
-      var data = _ref13.data,
-          attr = _ref13.attr,
-          min = _ref13.min,
-          max = _ref13.max,
-          forceBounds = _ref13.forceBounds,
-          range = _ref13.range;
+    var Scale = function Scale(_ref11) {
+      var data = _ref11.data,
+          attr = _ref11.attr,
+          min = _ref11.min,
+          max = _ref11.max,
+          forceBounds = _ref11.forceBounds,
+          range = _ref11.range;
       return d3.scaleLinear().range(range).domain(Domain({
         min: min,
         max: max,
@@ -901,22 +913,22 @@
         forceBounds: forceBounds
       })(data));
     };
-    var Bisect = function Bisect(_ref14) {
-      var _ref14$data = _ref14.data,
-          data = _ref14$data === void 0 ? [0, 1] : _ref14$data,
-          scale = _ref14.scale,
-          x = _ref14.x,
-          attr = _ref14.attr;
+    var Bisect = function Bisect(_ref12) {
+      var _ref12$data = _ref12.data,
+          data = _ref12$data === void 0 ? [0, 1] : _ref12$data,
+          scale = _ref12.scale,
+          x = _ref12.x,
+          attr = _ref12.attr;
       return d3.bisector(function (d) {
         return d[attr];
       }).left(data, scale.invert(x));
     };
-    var Chart = function Chart(_ref15) {
-      var width = _ref15.width,
-          height = _ref15.height,
-          _ref15$margins = _ref15.margins,
-          margins = _ref15$margins === void 0 ? {} : _ref15$margins,
-          ruler = _ref15.ruler;
+    var Chart = function Chart(_ref13) {
+      var width = _ref13.width,
+          height = _ref13.height,
+          _ref13$margins = _ref13.margins,
+          margins = _ref13$margins === void 0 ? {} : _ref13$margins,
+          ruler = _ref13.ruler;
 
       var _width = width - margins.left - margins.right;
 
@@ -937,32 +949,24 @@
         legend: g.append('g').attr("class", "legend")
       }; // SVG Paths
 
-      var clipPath = panes.area.append("svg:clipPath").attr("id", 'elevation-clipper');
-      var clipRect = clipPath.append("svg:rect"); // Canvas Paths
+      var mask = panes.area.append("svg:mask").attr("id", 'elevation-clipper').attr('fill-opacity', 1);
+      var maskRect = mask.append("svg:rect").attr('class', 'zoom').attr('fill', 'white'); // white = transparent
+      // Canvas Paths
 
-      var foreignObject = panes.area.append('svg:foreignObject');
+      var foreignObject = panes.area.append('svg:foreignObject').attr('mask', 'url(#' + mask.attr('id') + ')');
       var canvas = foreignObject.append('xhtml:canvas').attr('class', 'canvas-plot');
-      var context = canvas.node().getContext('2d'); // Mouse Focus
+      var context = canvas.node().getContext('2d'); // Add tooltip
 
-      var dragG = panes.ruler;
-      var focusG = panes.tooltip;
-      var brushG = panes.brush;
-      focusG.append('svg:line').call(MouseFocusLine({
-        xCoord: 0,
-        height: _height
-      }));
-      focusG.append("g").call(MouseFocusLabel({
+      panes.tooltip.call(Tooltip({
         xCoord: 0,
         yCoord: 0,
         height: _height,
         width: _width,
-        labels: {} // labelX: "",
-        // labelY: "",
-
+        labels: {}
       })); // Add the brushing
 
       var brush = d3.brushX().on('start.cursor end.cursor brush.cursor', function () {
-        return brushG.select(".overlay").attr('cursor', null);
+        return panes.brush.select(".overlay").attr('cursor', null);
       }); // Scales
 
       var scale = function scale(opts) {
@@ -973,11 +977,9 @@
       };
 
       var utils = {
-        clipPath: clipPath,
+        mask: mask,
         canvas: canvas,
         context: context,
-        dragG: dragG,
-        focusG: focusG,
         brush: brush
       };
       var chart = {
@@ -988,12 +990,12 @@
         scale: scale
       }; // Resize
 
-      chart._resize = function (_ref16) {
-        var width = _ref16.width,
-            height = _ref16.height,
-            _ref16$margins = _ref16.margins,
-            margins = _ref16$margins === void 0 ? {} : _ref16$margins,
-            ruler = _ref16.ruler;
+      chart._resize = function (_ref14) {
+        var width = _ref14.width,
+            height = _ref14.height,
+            _ref14$margins = _ref14.margins,
+            margins = _ref14$margins === void 0 ? {} : _ref14$margins,
+            ruler = _ref14.ruler;
 
         var _width = width - margins.left - margins.right;
 
@@ -1006,19 +1008,19 @@
           canvas.style("transform", "translate(" + margins.left + "px," + margins.top + "px)");
         }
 
-        clipRect.attr("x", 0).attr("y", 0).attr("width", _width).attr("height", _height);
+        maskRect.attr("x", 0).attr("y", 0).attr("width", _width).attr("height", _height);
         foreignObject.attr('width', _width).attr('height', _height);
         canvas.attr('width', _width).attr('height', _height);
 
         if (ruler) {
-          dragG.call(Ruler({
+          panes.ruler.call(Ruler({
             height: _height,
             width: _width
           }));
         }
 
-        brushG.call(brush.extent([[0, 0], [_width, _height]]));
-        brushG.select(".overlay").attr('cursor', null);
+        panes.brush.call(brush.extent([[0, 0], [_width, _height]]));
+        panes.brush.select(".overlay").attr('cursor', null);
         chart._width = _width;
         chart._height = _height;
         chart.svg.dispatch('resize', {
@@ -1057,13 +1059,11 @@
         Path: Path,
         Axis: Axis,
         Grid: Grid,
-        HeightFocusLine: HeightFocusLine,
-        HeightFocusLabel: HeightFocusLabel,
-        HeightFocusMarker: HeightFocusMarker,
+        PositionMarker: PositionMarker,
         LegendItem: LegendItem,
-        MouseFocusLine: MouseFocusLine,
-        MouseFocusLabel: MouseFocusLabel,
+        Tooltip: Tooltip,
         Ruler: Ruler,
+        CheckPoint: CheckPoint,
         Domain: Domain,
         Range: Range,
         Scale: Scale,
@@ -1074,6 +1074,8 @@
     var Chart$1 = L.Class.extend({
       includes: L.Evented ? L.Evented.prototype : L.Mixin.Events,
       initialize: function initialize(opts, control) {
+        var _this = this;
+
         this.options = opts;
         this.control = control;
         this._data = []; // cache registered components
@@ -1085,7 +1087,7 @@
           grids: {},
           axes: {},
           legendItems: {},
-          focusLabels: {}
+          tooltipItems: {}
         };
         this._scales = {};
         this._domains = {};
@@ -1093,15 +1095,6 @@
         this._paths = {};
         this._brushEnabled = opts.dragging;
         this._zoomEnabled = opts.zooming;
-
-        if (opts.imperial) {
-          this._xLabel = "mi";
-          this._yLabel = "ft";
-        } else {
-          this._xLabel = opts.xLabel;
-          this._yLabel = opts.yLabel;
-        }
-
         var chart = this._chart = Chart(opts); // SVG Container
 
         var svg = this._container = chart.svg; // Panes
@@ -1110,25 +1103,31 @@
         this._area = chart.pane('area');
         this._point = chart.pane('point');
         this._axis = chart.pane('axis');
-        this._legend = chart.pane('legend'); // Scales
+        this._legend = chart.pane('legend');
+        this._tooltip = chart.pane('tooltip');
+        this._ruler = chart.pane('ruler'); // Scales
 
         this._initScale(); // Helpers
 
 
-        this._clipPath = chart.get('clipPath');
-        this._canvas = chart.get('canvas');
+        this._mask = chart.get('mask');
         this._context = chart.get('context');
-        this._dragG = chart.get('dragG');
-        this._focusG = chart.get('focusG');
-        this._brush = chart.get('brush'); // Tooltip
-
-        this._focusline = this._focusG.select('.mouse-focus-line');
-        this._focuslabel = this._focusG.select('.mouse-focus-label');
+        this._brush = chart.get('brush');
         this._zoom = d3.zoom();
         this._drag = d3.drag(); // Interactions
 
         this._initInteractions(); // svg.on('resize', (e)=>console.log(e.detail));
+        // Handle multi-track segments (BETA)
+
 
+        this._maskGaps = [];
+        control.on('eletrack_added', function (e) {
+          _this._maskGaps.push(e.index);
+
+          control.once('eledata_updated', function (e) {
+            return _this._maskGaps.push(e.index);
+          });
+        });
       },
       update: function update(props) {
         if (props) {
@@ -1149,11 +1148,11 @@
         return this;
       },
       render: function render() {
-        var _this = this;
+        var _this2 = this;
 
         return function (container) {
           return container.append(function () {
-            return _this._container.node();
+            return _this2._container.node();
           });
         };
       },
@@ -1164,52 +1163,32 @@
 
         this._area.selectAll('path').attr("d", "M0 0");
 
-        this._context.clearRect(0, 0, this._width(), this._height());
+        this._context.clearRect(0, 0, this._width(), this._height()); // if (this._path) {
+        // this._x.domain([0, 1]);
+        // this._y.domain([0, 1]);
+        // }
+
 
-        if (this._path) ;
+        this._maskGaps = [];
+
+        this._mask.selectAll(".gap").remove();
       },
       _drawPath: function _drawPath(name) {
-        var opts = this.options;
-        var ctx = this._context;
         var path = this._paths[name];
         var area = this._props.areas[name];
-        var node = path.node();
-        var scaleX = this._scales[area.scaleX];
-        var scaleY = this._scales[area.scaleY];
-        area = L.extend({}, area, {
+        path.datum(this._data).attr("d", Area(L.extend({}, area, {
           width: this._width(),
           height: this._height(),
-          scaleX: scaleX,
-          scaleY: scaleY
-        });
-
-        if (!scaleY || !scaleY) {
-          return console.warn('Unable to render path:' + name);
-        }
-
-        path.datum(this._data).attr("d", Area(area));
+          scaleX: this._scales[area.scaleX],
+          scaleY: this._scales[area.scaleY]
+        })));
         if (path.classed('leaflet-hidden')) return;
 
-        if (opts.preferCanvas) {
-          path.classed('canvas-path', true);
-          ctx.beginPath();
-          ctx.moveTo(0, 0);
-          var p = new Path2D(path.attr('d'));
-          ctx.strokeStyle = path.attr('stroke');
-          ctx.fillStyle = path.attr('fill');
-          ctx.lineWidth = 1.25;
-          ctx.globalCompositeOperation = 'source-over'; // stroke opacity
-
-          ctx.globalAlpha = path.attr('stroke-opacity') || 0.3;
-          ctx.stroke(p); // fill opacity
-
-          ctx.globalAlpha = path.attr('fill-opacity') || 0.45;
-          ctx.fill(p);
-          ctx.globalAlpha = 1;
-          ctx.closePath();
+        if (this.options.preferCanvas) {
+          drawCanvas(this._context, path);
         } else {
           this._area.append(function () {
-            return node;
+            return path.node();
           });
         }
       },
@@ -1229,43 +1208,43 @@
        * Initialize "d3-brush".
        */
       _initBrush: function _initBrush(e) {
-        var _this2 = this;
+        var _this3 = this;
 
         var brush = function brush(e) {
-          if (!_this2._data.length) return;
+          if (!_this3._data.length) return;
           var extent = e.selection;
 
           if (extent) {
-            var start = _this2._findIndexForXCoord(extent[0]);
+            var start = _this3._findIndexForXCoord(extent[0]);
 
-            var end = _this2._findIndexForXCoord(extent[1]);
+            var end = _this3._findIndexForXCoord(extent[1]);
 
-            _this2.fire('dragged', {
-              dragstart: _this2._data[start],
-              dragend: _this2._data[end]
+            _this3.fire('dragged', {
+              dragstart: _this3._data[start],
+              dragend: _this3._data[end]
             });
           }
         };
 
         var focus = function focus(e) {
-          if (!_this2._data.length) return;
+          if (!_this3._data.length) return;
           if (e.type == 'brush' && !e.sourceEvent) return;
 
-          var rect = _this2._chart.panes.brush.select('.overlay').node();
+          var rect = _this3._chart.panes.brush.select('.overlay').node();
 
           var coords = d3.pointers(e, rect)[0];
           var xCoord = coords[0];
 
-          var item = _this2._data[_this2._findIndexForXCoord(xCoord)];
+          var item = _this3._data[_this3._findIndexForXCoord(xCoord)];
 
-          _this2.fire("mouse_move", {
+          _this3.fire("mouse_move", {
             item: item,
             xCoord: xCoord
           });
         };
 
         this._brush.filter(function (e) {
-          return _this2._brushEnabled && !e.shiftKey && !e.button;
+          return _this3._brushEnabled && !e.shiftKey && !e.button;
         }).on("end.update", brush).on("brush.update", focus);
 
         this._chart.panes.brush.on("mouseenter.focus touchstart.focus", this.fire.bind(this, "mouse_enter")).on("mouseout.focus touchend.focus", this.fire.bind(this, "mouse_out")).on("mousemove.focus touchmove.focus", focus);
@@ -1275,7 +1254,7 @@
        * Initialize "d3-zoom"
        */
       _initClipper: function _initClipper() {
-        var _this3 = this;
+        var _this4 = this;
 
         var svg = this._container;
         var margin = this.options.margins;
@@ -1285,42 +1264,52 @@
           if (e.sourceEvent && e.sourceEvent.type == "mousedown") svg.style('cursor', 'grabbing');
 
           if (e.transform.k == 1 && e.transform.x == 0) {
-            _this3._container.classed('zoomed', true);
+            _this4._container.classed('zoomed', true); // Apply d3-zoom (bind <clipPath> mask)
+
+
+            if (_this4._mask) {
+              _this4._point.attr('mask', 'url(#' + _this4._mask.attr('id') + ')');
+            }
           }
 
-          _this3.zooming = true;
+          _this4.zooming = true;
         };
 
         var onEnd = function onEnd(e) {
           if (e.transform.k == 1 && e.transform.x == 0) {
-            _this3._container.classed('zoomed', false);
+            _this4._container.classed('zoomed', false); // Apply d3-zoom (bind <clipPath> mask)
+
+
+            if (_this4._mask) {
+              _this4._point.attr('mask', null);
+            }
           }
 
-          _this3.zooming = false;
+          _this4.zooming = false;
           svg.style('cursor', '');
         };
 
         var onZoom = function onZoom(e) {
           // TODO: find a faster way to redraw the chart.
-          _this3.zooming = false;
+          _this4.zooming = false;
 
-          _this3._updateScale(); // hacky way for restoring x scale when zooming out
+          _this4._updateScale(); // hacky way for restoring x scale when zooming out
 
 
-          _this3.zooming = true;
-          _this3._scales.distance = _this3._x = e.transform.rescaleX(_this3._x); // calculate x scale at zoom level
+          _this4.zooming = true;
+          _this4._scales.distance = _this4._x = e.transform.rescaleX(_this4._x); // calculate x scale at zoom level
 
-          _this3._resetDrag();
+          _this4._resetDrag();
 
           if (e.sourceEvent && e.sourceEvent.type == "mousemove") {
-            _this3._hideDiagramIndicator();
+            _this4._hideDiagramIndicator();
           }
 
-          _this3.fire('zoom');
+          _this4.fire('zoom');
         };
 
         zoom.scaleExtent([1, 10]).extent([[margin.left, 0], [this._width() - margin.right, this._height()]]).translateExtent([[margin.left, -Infinity], [this._width() - margin.right, Infinity]]).filter(function (e) {
-          return _this3._zoomEnabled && (e.shiftKey || e.buttons == 4);
+          return _this4._zoomEnabled && (e.shiftKey || e.buttons == 4);
         }).on("start", onStart).on("end", onEnd).on("zoom", onZoom);
         svg.call(zoom); // add zoom functionality to "svg" group
         // d3.select("body").on("keydown.grabzoom keyup.grabzoom", (e) => svg.style('cursor', e.shiftKey ? 'move' : ''));
@@ -1339,7 +1328,7 @@
        * Toggle chart data on legend click
        */
       _initLegend: function _initLegend() {
-        var _this4 = this;
+        var _this5 = this;
 
         this._container.on('legend_clicked', function (e) {
           var _e$detail = e.detail,
@@ -1359,9 +1348,9 @@
 
           toggleClass(path, 'leaflet-hidden', enabled);
 
-          _this4._updateArea();
+          _this5._updateArea();
 
-          _this4.fire("elepath_toggle", {
+          _this5.fire("elepath_toggle", {
             path: path,
             name: name,
             legend: legend,
@@ -1374,7 +1363,7 @@
        * Initialize "ruler".
        */
       _initRuler: function _initRuler() {
-        var _this5 = this;
+        var _this6 = this;
 
         if (!this.options.ruler) return; // const yMax      = this._height();
 
@@ -1382,41 +1371,41 @@
         var drag = this._drag;
 
         var label = function label(e, d) {
-          var yMax = _this5._height();
+          var yMax = _this6._height();
 
-          var y = _this5._dragG.data()[0].y;
+          var y = _this6._ruler.data()[0].y;
 
-          if (y >= yMax || y <= 0) _this5._dragG.select(".horizontal-drag-label").text('');
+          if (y >= yMax || y <= 0) _this6._ruler.select(".horizontal-drag-label").text('');
 
-          _this5._hideDiagramIndicator();
+          _this6._hideDiagramIndicator();
         };
 
         var position = function position(e, d) {
-          var yMax = _this5._height();
+          var yMax = _this6._height();
 
-          var yCoord = d3.pointers(e, _this5._area.node())[0][1];
+          var yCoord = d3.pointers(e, _this6._area.node())[0][1];
           var y = yCoord > 0 ? yCoord < yMax ? yCoord : yMax : 0;
 
-          var z = _this5._y.invert(y);
+          var z = _this6._y.invert(y);
 
-          var data = L.extend(_this5._dragG.data()[0], {
+          var data = L.extend(_this6._ruler.data()[0], {
             y: y
           });
 
-          _this5._dragG.data([data]).attr("transform", function (d) {
+          _this6._ruler.data([data]).attr("transform", function (d) {
             return "translate(" + d.x + "," + d.y + ")";
           }).classed('active', y < yMax);
 
-          _this5._container.select(".horizontal-drag-label").text(formatNum(z) + " " + _this5._yLabel);
+          _this6._container.select(".horizontal-drag-label").text(formatNum(z) + " " + (_this6.options.imperial ? 'ft' : 'm'));
 
-          _this5.fire('ruler_filter', {
-            coords: yCoord < yMax && yCoord > 0 ? _this5._findCoordsForY(yCoord) : []
+          _this6.fire('ruler_filter', {
+            coords: yCoord < yMax && yCoord > 0 ? _this6._findCoordsForY(yCoord) : []
           });
         };
 
         drag.on("start end", label).on("drag", position);
 
-        this._dragG.call(drag);
+        this._ruler.call(drag);
       },
 
       /**
@@ -1495,7 +1484,7 @@
       },
 
       /**
-       * Add a waypoint of interest over the chart
+       * Add a point of interest over the chart
        */
       _registerCheckPoint: function _registerCheckPoint(point) {
         if (!this._data.length) return;
@@ -1509,49 +1498,18 @@
           x = this._x(point.dist);
           item = this._data[this._findIndexForXCoord(x)];
           y = this._y(item.z);
-        } else if (isNaN(x) || isNaN(y)) return;
-
-        if (!point.item || !point.item.property('isConnected')) {
-          point.position = point.position || "bottom";
-          point.item = this._point.append('g');
-          point.item.append("svg:line").attr("y1", 0).attr("x1", 0).attr("style", "stroke: rgb(51, 51, 51); stroke-width: 0.5; stroke-dasharray: 2, 2;");
-          point.item.append("svg:circle").attr("class", " height-focus circle-lower").attr("r", 3);
-
-          if (point.label) {
-            point.item.append("svg:text").attr("dx", "4px").attr("dy", "-4px");
-          }
         }
 
-        point.item.datum({
-          pos: point.position,
+        this._point.call(CheckPoint({
+          point: point,
+          width: this._width(),
+          height: this._height(),
           x: x,
           y: y
-        }).attr("class", function (d) {
-          return "point " + d.pos;
-        }).attr("transform", function (d) {
-          return "translate(" + d.x + "," + d.y + ")";
-        });
-        point.item.select('line').datum({
-          y2: {
-            'top': -y,
-            'bottom': this._height() - y
-          }[point.position],
-          x2: {
-            'left': -x,
-            'right': this._width() - x
-          }[point.position] || 0
-        }).attr("y2", function (d) {
-          return d.y2;
-        }).attr("x2", function (d) {
-          return d.x2;
-        });
-
-        if (point.label) {
-          point.item.select('text').text(point.label);
-        }
+        }));
       },
-      _registerFocusLabel: function _registerFocusLabel(props) {
-        this._props.focusLabels[props.name] = props;
+      _registerTooltip: function _registerTooltip(props) {
+        this._props.tooltipItems[props.name] = props;
       },
       _updateArea: function _updateArea() {
         var paths = this._paths; // Reset and update chart profiles
@@ -1614,14 +1572,32 @@
         });
       },
       _updateClipper: function _updateClipper() {
+        var _this7 = this;
+
         var margin = this.options.margins;
 
-        this._zoom.scaleExtent([1, 10]).extent([[margin.left, 0], [this._width() - margin.right, this._height()]]).translateExtent([[margin.left, -Infinity], [this._width() - margin.right, Infinity]]);
+        this._zoom.scaleExtent([1, 10]).extent([[margin.left, 0], [this._width() - margin.right, this._height()]]).translateExtent([[margin.left, -Infinity], [this._width() - margin.right, Infinity]]); // Apply svg mask on multi-track segments (BETA)
+
+
+        this._mask.selectAll(".gap").remove();
+
+        this._maskGaps.forEach(function (d, i) {
+          if (i >= _this7._maskGaps.length - 2) return;
+          var d1 = _this7._data[_this7._maskGaps[i]];
+          var d2 = _this7._data[_this7._maskGaps[i + 1]];
+
+          var x1 = _this7._x(_this7._data[_this7._findIndexForLatLng(d1.latlng)].dist);
+
+          var x2 = _this7._x(_this7._data[_this7._findIndexForLatLng(d2.latlng)].dist);
+
+          _this7._mask.append("rect").attr("x", x1).attr("y", 0).attr("width", x2 - x1).attr("height", _this7._height()).attr('class', 'gap').attr('fill-opacity', '0.8').attr("fill", 'black'); // black = hide
+
+        });
       },
       _updateLegend: function _updateLegend() {
-        var _this6 = this;
+        var _this8 = this;
 
-        if (this.options.legend == false) return;
+        if (this.options.legend === false) return;
         var legends = this._props.legendItems;
         var legend; // Reset legend items
 
@@ -1675,21 +1651,21 @@
           var legend = d3.select(n[i]);
           var rect = legend.select('rect');
           var name = legend.attr('data-name');
-          var path = _this6._paths[name];
+          var path = _this8._paths[name];
           var tx = v[i] * 55;
           var ty = xAxesB * 2;
           legend // Adjust legend item positions
           .attr("transform", "translate(" + tx + ", " + ty + ")"); // Set initial state (disabled controls)
 
-          if (name in _this6.options && _this6.options[name] == 'disabled') {
+          if (name in _this8.options && _this8.options[name] == 'disabled') {
             path.classed('leaflet-hidden', true);
             legend.select('text').style('text-decoration-line', 'line-through');
             legend.select('rect').style('fill-opacity', '0');
           } // Apply d3-zoom (bind <clipPath> mask)
 
 
-          if (_this6._clipPath) {
-            path.attr('clip-path', 'url(#' + _this6._clipPath.attr('id') + ')');
+          if (_this8._mask) {
+            path.attr('mask', 'url(#' + _this8._mask.attr('id') + ')');
           }
         });
       },
@@ -1698,13 +1674,9 @@
           x: this._x,
           y: this._y
         };
-        var opts = this.options;
-        var scales = this._scales;
-        var d = this._domains;
-        var r = this._ranges;
 
-        for (var i in scales) {
-          scales[i].domain(d[i](this._data)).range(r[i](this._width(), this._height()));
+        for (var i in this._scales) {
+          this._scales[i].domain(this._domains[i](this._data)).range(this._ranges[i](this._width(), this._height()));
         }
 
         return {
@@ -1762,10 +1734,10 @@
        * Finds a data entry for a given x-coordinate of the diagram
        */
       _findIndexForXCoord: function _findIndexForXCoord(x) {
-        var _this7 = this;
+        var _this9 = this;
 
         return d3.bisector(function (d) {
-          return d[_this7.options.xAttr];
+          return d[_this9.options.xAttr];
         }).left(this._data || [0, 1], this._x.invert(x));
       },
 
@@ -1810,28 +1782,17 @@
        * Display distance and altitude level ("focus-rect").
        */
       _showDiagramIndicator: function _showDiagramIndicator(item, xCoordinate) {
-        var opts = this.options;
-
-        var yCoordinate = this._y(item[opts.yAttr]);
-
-        this._focusG.attr("display", null);
-
-        this._focusline.call(MouseFocusLine({
-          xCoord: xCoordinate,
-          height: this._height()
-        }));
-
-        this._focuslabel.call(MouseFocusLabel({
+        this._tooltip.attr("display", null).call(Tooltip({
           xCoord: xCoordinate,
-          yCoord: yCoordinate,
+          yCoord: this._y(item[this.options.yAttr]),
           height: this._height(),
           width: this._width(),
-          labels: this._props.focusLabels,
+          labels: this._props.tooltipItems,
           item: item
         }));
       },
       _hideDiagramIndicator: function _hideDiagramIndicator() {
-        this._focusG.attr("display", 'none');
+        this._tooltip.attr("display", 'none');
       }
     });
 
@@ -1839,51 +1800,40 @@
       initialize: function initialize(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;
-        }
-
-        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
-          });
+        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;
         }
 
-        this._focuslabels = {};
+        this._labels = {};
         return this;
       },
       addTo: function addTo(map) {
-        var _this = this;
-
         this._map = map;
 
-        if (this.options.marker == 'elevation-line') {
-          var g = this._container = d3.select(map.getPane('elevationPane')).select("svg > g").attr("class", "height-focus-group");
-          g.append(function () {
-            return _this._focusline.node();
-          });
-          g.append(function () {
-            return _this._focusmarker.node();
-          });
-          g.append(function () {
-            return _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(PositionMarker({}));
+
+            break;
+
+          case 'position-marker':
+            this._marker.addTo(map, {
+              pane: 'overlayPane'
+            });
+
+            break;
         }
 
         return this;
@@ -1897,47 +1847,34 @@
         if (!props) return;
         if (props.options) this.options = props.options;
         if (!this._map) this.addTo(props.map);
-        var opts = this.options;
-        var map = this._map;
         this._latlng = props.item.latlng;
-        var pos = map.latLngToLayerPoint(this._latlng);
 
-        if (map._rotate) {
-          pos = map.rotatedPointToMapPanePoint(pos);
-        }
+        switch (this.options.marker) {
+          case 'elevation-line':
+            var point = this._map.latLngToLayerPoint(this._latlng);
 
-        var point = L.extend({}, props.item, pos);
+            point = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
 
-        if (this.options.marker == 'elevation-line') {
-          var normalizedAlt = this._height() / props.maxElevation * point.z;
-          var normalizedY = point.y - normalizedAlt;
+            this._container.classed("leaflet-hidden", false);
 
-          this._container.classed("leaflet-hidden", false);
+            this._container.call(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
+            }));
 
-          this._focusmarker.call(HeightFocusMarker({
-            theme: opts.theme,
-            xCoord: point.x,
-            yCoord: point.y
-          }));
+            break;
 
-          this._focusline.call(HeightFocusLine({
-            theme: opts.theme,
-            xCoord: point.x,
-            yCoord: point.y,
-            length: normalizedY
-          }));
+          case 'position-marker':
+            removeClass(this._marker.getElement(), 'leaflet-hidden');
 
-          this._focuslabel.call(HeightFocusLabel({
-            theme: opts.theme,
-            xCoord: point.x,
-            yCoord: normalizedY,
-            labels: this._focuslabels,
-            item: point
-          }));
-        } else if (this.options.marker == 'position-marker') {
-          removeClass(this._marker.getElement(), 'leaflet-hidden');
+            this._marker.setLatLng(this._latlng);
 
-          this._marker.setLatLng(this._latlng);
+            break;
         }
       },
 
@@ -1947,10 +1884,15 @@
       remove: function remove() {
         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;
         }
       },
       getLatLng: function getLatLng() {
@@ -1964,8 +1906,8 @@
         var opts = this.options;
         return opts.height - opts.margins.top - opts.margins.bottom;
       },
-      _registerFocusLabel: function _registerFocusLabel(props) {
-        this._focuslabels[props.name] = props;
+      _registerTooltip: function _registerTooltip(props) {
+        this._labels[props.name] = props;
       }
     });
 
@@ -2010,7 +1952,6 @@
       collapsed: false,
       detached: true,
       distance: true,
-      distanceFactor: 1,
       distanceMarkers: false,
       decimalsX: 2,
       decimalsY: 0,
@@ -2020,15 +1961,10 @@
       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,
@@ -2042,7 +1978,6 @@
         iconSize: [32, 32],
         iconAnchor: [16, 16]
       }),
-      placeholder: false,
       position: "topright",
       polyline: {
         className: 'elevation-polyline',
@@ -2061,7 +1996,6 @@
       ruler: true,
       skipNullZCoords: false,
       theme: "lightblue-theme",
-      responsive: true,
       summary: 'inline',
       slope: false,
       speed: false,
@@ -2105,7 +2039,7 @@
       __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.5/libs/leaflet-distance-marker.min.js',
+      __LDISTANCEM: 'https://unpkg.com/@raruto/leaflet-elevation@1.8.2/libs/leaflet-distance-marker.min.js',
 
       /*
        * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -2113,11 +2047,11 @@
       addData: function addData(d, layer) {
         var _this = this;
 
-        if (typeof layer === "undefined" && d.on) {
-          layer = d;
-        }
+        this.lazyLoad(this.__D3).then(function () {
+          if (typeof layer === "undefined" && d.on) {
+            layer = d;
+          }
 
-        Elevation._d3LazyLoader = lazyLoader(this.__D3, (typeof d3 === "undefined" ? "undefined" : _typeof(d3)) !== 'object' || !this.options.lazyLoadJS, Elevation._d3LazyLoader).then(function () {
           _this._addData(d);
 
           _this._addLayer(layer);
@@ -2212,20 +2146,6 @@
         this._chart._brushEnabled = true;
       },
 
-      /**
-       * Alias for enableBrush
-       */
-      enableDragging: function enableDragging() {
-        this.enableBrushing();
-      },
-
-      /**
-       * Alias for disableBrush
-       */
-      disableDragging: function disableDragging() {
-        this.disableBrushing();
-      },
-
       /**
        * Disable chart zooming.
        */
@@ -2260,7 +2180,7 @@
        * Get default zoom level when "followMarker" is true.
        */
       getZFollow: function getZFollow() {
-        return this._zFollow;
+        return this.options.zFollow;
       },
 
       /**
@@ -2280,50 +2200,29 @@
         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.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);
-        // }
-
+        this._markedSegments.setStyle(this.options.polylineSegments); // Leaflet canvas renderer colors
 
-        if (this.options.wptIcons === true) this.options.wptIcons = Options.wptIcons; // Leaflet canvas renderer colors
 
         L.extend(Colors, this.options.colors || {});
       },
 
       /**
-       * Alias for loadData
-       */
-      load: function load(data, opts) {
-        this.loadData(data, opts);
-      },
-
-      /**
-       * Alias for addTo
+       * Javascript scripts downloader (lazy loader)
        */
-      loadChart: function loadChart(map) {
-        this.addTo(map);
+      lazyLoad: function lazyLoad$1(src) {
+        return lazyLoad(src, this);
       },
 
       /**
        * Load elevation data (GPX, GeoJSON or KML).
        */
-      loadData: function loadData(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 load(data) {
+        if (isXMLDoc(data)) {
           this.loadXML(data);
         } else if (isJSONDoc(data)) {
           this.loadGeoJSON(data);
@@ -2332,16 +2231,6 @@
         }
       },
 
-      /**
-       * Wait for document load before download data.
-       */
-      loadDefer: function loadDefer(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.
        */
@@ -2353,10 +2242,7 @@
         }).then(function (data) {
           _this3._downloadURL = url; // TODO: handle multiple urls?
 
-          _this3.loadData(data, {
-            lazy: false,
-            defer: false
-          });
+          _this3.load(data);
         }).catch(function (err) {
           return console.warn(err);
         });
@@ -2369,20 +2255,13 @@
         GeoJSONLoader(data, this);
       },
 
-      /**
-       * Alias for loadXML
-       */
-      loadGPX: function loadGPX(data) {
-        this.loadXML(data);
-      },
-
       /**
        * Load raw XML data.
        */
       loadXML: function loadXML(data) {
         var _this4 = this;
 
-        Elevation._togeojsonLazyLoader = lazyLoader(this.__TOGEOJSON, typeof toGeoJSON !== 'function' || !this.options.lazyLoadJS, Elevation._togeojsonLazyLoader).then(function () {
+        this.lazyLoad(this.__TOGEOJSON).then(function () {
           var xml = new DOMParser().parseFromString(data, "text/xml");
           var type = xml.documentElement.tagName.toLowerCase(); // "kml" or "gpx"
 
@@ -2403,32 +2282,12 @@
         });
       },
 
-      /**
-       * Wait for chart container visible before download data.
-       */
-      loadLazy: function loadLazy(data, opts) {
-        var _this5 = this;
-
-        opts = L.extend({}, this.options.loadData, opts);
-        var elem = opts.lazy.parentNode ? opts.lazy : this.placeholder;
-
-        waitHolder(elem).then(function () {
-          opts.lazy = false;
-
-          _this5.loadData(data, opts);
-
-          _this5.once('eledata_loaded', function () {
-            return _this5.placeholder.parentNode.removeChild(elem);
-          });
-        });
-      },
-
       /**
        * Create container DOM element and related event listeners.
        * Called on control.addTo(map).
        */
       onAdd: function onAdd(map) {
-        var _this6 = this;
+        var _this5 = this;
 
         this._map = map;
 
@@ -2438,37 +2297,28 @@
           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 === "undefined" ? "undefined" : _typeof(d3)) !== 'object' || !this.options.lazyLoadJS, Elevation._d3LazyLoader).then(function () {
-          _this6._initButton(container);
+        this.lazyLoad(this.__D3).then(function () {
+          _this5._initButton(container);
 
-          _this6._initChart(container);
+          _this5._initChart(container);
 
-          _this6._initSummary(container);
+          _this5._initSummary(container);
 
-          _this6._initMarker(map);
+          _this5._initMarker(map);
 
-          _this6._initLayer(map);
+          _this5._initLayer(map);
 
-          map.on('zoom viewreset zoomanim', _this6._hideMarker, _this6).on('resize', _this6._resetView, _this6).on('resize', _this6._resizeChart, _this6).on('rotate', _this6._rotateMarker, _this6).on('mousedown', _this6._resetDrag, _this6);
+          map.on('zoom viewreset zoomanim', _this5._hideMarker, _this5).on('resize', _this5._resetView, _this5).on('resize', _this5._resizeChart, _this5).on('rotate', _this5._rotateMarker, _this5).on('mousedown', _this5._resetDrag, _this5);
 
-          on(map.getContainer(), 'mousewheel', _this6._resetDrag, _this6);
+          on(map.getContainer(), 'mousewheel', _this5._resetDrag, _this5);
 
-          on(map.getContainer(), 'touchstart', _this6._resetDrag, _this6);
+          on(map.getContainer(), 'touchstart', _this5._resetDrag, _this5);
 
-          _this6.on('eledata_added eledata_loaded', _this6._updateChart, _this6).on('eledata_added eledata_loaded', _this6._updateSummary, _this6);
+          _this5.on('eledata_added eledata_loaded', _this5._updateChart, _this5).on('eledata_added eledata_loaded', _this5._updateSummary, _this5);
 
-          _this6._updateChart();
+          _this5._updateChart();
 
-          _this6._updateSummary();
+          _this5._updateSummary();
         });
         return container;
       },
@@ -2499,7 +2349,7 @@
        * Set default zoom level when "followMarker" is true.
        */
       setZFollow: function setZFollow(zoom) {
-        this._zFollow = zoom;
+        this.options.zFollow = zoom;
       },
 
       /**
@@ -2513,7 +2363,7 @@
        * Parsing data either from GPX or GeoJSON and update the diagram data
        */
       _addData: function _addData(d) {
-        var _this7 = this;
+        var _this6 = this;
 
         if (!d) {
           return;
@@ -2530,7 +2380,7 @@
 
             case 'MultiLineString':
               each(geom.coordinates, function (coords) {
-                return _this7._addGeoJSONData(coords);
+                return _this6._addGeoJSONData(coords);
               });
 
               break;
@@ -2542,7 +2392,7 @@
 
         if (d.type === "FeatureCollection") {
           each(d.features, function (feature) {
-            return _this7._addData(feature);
+            return _this6._addData(feature);
           });
         }
 
@@ -2555,14 +2405,14 @@
        * Parsing of GeoJSON data lines and their elevation in z-coordinate
        */
       _addGeoJSONData: function _addGeoJSONData(coords) {
-        var _this8 = this;
+        var _this7 = this;
 
         each(coords, function (point) {
-          _this8._addPoint(point[1], point[0], point[2]);
+          _this7._addPoint(point[1], point[0], point[2]);
 
-          _this8._fireEvt("elepoint_added", {
+          _this7._fireEvt("elepoint_added", {
             point: point,
-            index: _this8._data.length - 1
+            index: _this7._data.length - 1
           });
         });
 
@@ -2576,14 +2426,16 @@
        * Parsing function for GPX data and their elevation in z-coordinate
        */
       _addGPXData: function _addGPXData(coords) {
-        var _this9 = this;
+        var _this8 = this;
 
         each(coords, function (point) {
-          _this9._addPoint(point.lat, point.lng, typeof point.alt !== "undefined" ? point.alt : point.meta.ele);
+          var _point$alt;
+
+          _this8._addPoint(point.lat, point.lng, (_point$alt = point.alt) !== null && _point$alt !== void 0 ? _point$alt : point.meta.ele);
 
-          _this9._fireEvt("elepoint_added", {
+          _this8._fireEvt("elepoint_added", {
             point: point,
-            index: _this9._data.length - 1
+            index: _this8._data.length - 1
           });
         });
 
@@ -2704,21 +2556,19 @@
         opts.xTicks = this._xTicks();
         opts.yTicks = this._yTicks();
 
-        if (opts.responsive) {
-          if (opts.detached) {
-            var _this$eleDiv = this.eleDiv,
-                offsetWidth = _this$eleDiv.offsetWidth,
-                offsetHeight = _this$eleDiv.offsetHeight;
-            if (offsetWidth > 0) opts.width = offsetWidth;
-            if (offsetHeight > 20) opts.height = offsetHeight - 20; // 20 = horizontal scrollbar size.
-          } else {
-            var _this$_map$getContain = this._map.getContainer(),
-                clientWidth = _this$_map$getContain.clientWidth;
+        if (opts.detached) {
+          var _this$eleDiv = this.eleDiv,
+              offsetWidth = _this$eleDiv.offsetWidth,
+              offsetHeight = _this$eleDiv.offsetHeight;
+          if (offsetWidth > 0) opts.width = offsetWidth;
+          if (offsetHeight > 20) opts.height = offsetHeight - 20; // 20 = horizontal scrollbar size.
+        } else {
+          var _this$_map$getContain = this._map.getContainer(),
+              clientWidth = _this$_map$getContain.clientWidth;
 
-            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;
-          }
+          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;
         }
 
         var chart = this._chart = new Chart$1(opts, this);
@@ -2734,17 +2584,17 @@
         this._fireEvt("elechart_init");
       },
       _initLayer: function _initLayer() {
-        var _this10 = this;
+        var _this9 = this;
 
         this._layers.on('layeradd layerremove', function (e) {
           var layer = e.layer;
           var node = layer.getElement && layer.getElement();
 
-          toggleClass(node, _this10.options.polyline.className + ' ' + _this10.options.theme, e.type == 'layeradd');
+          toggleClass(node, _this9.options.polyline.className + ' ' + _this9.options.theme, e.type == 'layeradd');
 
-          toggleEvent(layer, "mousemove", _this10._mousemoveLayerHandler.bind(_this10), e.type == 'layeradd');
+          toggleEvent(layer, "mousemove", _this9._mousemoveLayerHandler.bind(_this9), e.type == 'layeradd');
 
-          toggleEvent(layer, "mouseout", _this10._mouseoutHandler.bind(_this10), e.type == 'layeradd');
+          toggleEvent(layer, "mouseout", _this9._mouseoutHandler.bind(_this9), e.type == 'layeradd');
         });
       },
       _initMarker: function _initMarker(map) {
@@ -2775,7 +2625,7 @@
         container.setAttribute('aria-haspopup', true);
 
         if (!this.options.detached) {
-          L.DomEvent.disableClickPropagation(container); //.disableScrollPropagation(container);
+          L.DomEvent.disableClickPropagation(container).disableScrollPropagation(container);
         }
 
         if (L.Browser.mobile) {
@@ -2918,10 +2768,10 @@
        * Add a waypoint marker to the diagram
        */
       _registerCheckPoint: function _registerCheckPoint(props) {
-        var _this11 = this;
+        var _this10 = this;
 
         this.on("elechart_updated", function () {
-          return _this11._chart._registerCheckPoint(props);
+          return _this10._chart._registerCheckPoint(props);
         });
       },
 
@@ -2929,10 +2779,10 @@
        * Add chart profile to diagram
        */
       _registerAreaPath: function _registerAreaPath(props) {
-        var _this12 = this;
+        var _this11 = this;
 
         this.on("elechart_init", function () {
-          return _this12._chart._registerAreaPath(props);
+          return _this11._chart._registerAreaPath(props);
         });
       },
 
@@ -2940,10 +2790,10 @@
        * Add chart grid to diagram
        */
       _registerAxisGrid: function _registerAxisGrid(props) {
-        var _this13 = this;
+        var _this12 = this;
 
         this.on("elechart_axis", function () {
-          return _this13._chart._registerAxisGrid(props);
+          return _this12._chart._registerAxisGrid(props);
         });
       },
 
@@ -2951,25 +2801,25 @@
        * Add chart axis to diagram
        */
       _registerAxisScale: function _registerAxisScale(props) {
-        var _this14 = this;
+        var _this13 = this;
 
         this.on("elechart_axis", function () {
-          return _this14._chart._registerAxisScale(props);
+          return _this13._chart._registerAxisScale(props);
         });
       },
 
       /**
        * Add chart or marker tooltip info
        */
-      _registerFocusLabel: function _registerFocusLabel(props) {
-        var _this15 = this;
+      _registerTooltip: function _registerTooltip(props) {
+        var _this14 = this;
 
         if (props.chart) {
           var label = L.extend({}, props, {
             value: props.chart
           });
           this.on("elechart_init", function () {
-            return _this15._chart._registerFocusLabel(label);
+            return _this14._chart._registerTooltip(label);
           });
         }
 
@@ -2979,7 +2829,7 @@
           });
 
           this.on("elechart_marker", function () {
-            return _this15._marker._registerFocusLabel(_label);
+            return _this14._marker._registerTooltip(_label);
           });
         }
       },
@@ -2988,10 +2838,10 @@
        * Add summary info to diagram
        */
       _registerSummary: function _registerSummary(props) {
-        var _this16 = this;
+        var _this15 = this;
 
         this.on('elechart_summary', function () {
-          return _this16._summary._registerSummary(props);
+          return _this15._summary._registerSummary(props);
         });
       },
 
@@ -3027,31 +2877,28 @@
 
         if (style(this._container, "display") == "none") return;
         var opts = this.options;
+        var newWidth;
 
-        if (opts.responsive) {
-          var newWidth;
-
-          if (opts.detached) {
-            newWidth = (this.eleDiv || this._container).offsetWidth;
-          } else {
-            var _this$_map$getContain2 = this._map.getContainer(),
-                clientWidth = _this$_map$getContain2.clientWidth;
+        if (opts.detached) {
+          newWidth = (this.eleDiv || this._container).offsetWidth;
+        } else {
+          var _this$_map$getContain2 = this._map.getContainer(),
+              clientWidth = _this$_map$getContain2.clientWidth;
 
-            newWidth = opts._maxWidth > clientWidth ? clientWidth - 30 : opts._maxWidth;
-          }
+          newWidth = opts._maxWidth > clientWidth ? clientWidth - 30 : opts._maxWidth;
+        }
 
-          if (newWidth) {
-            var chart = this._chart;
-            opts.width = newWidth;
+        if (newWidth) {
+          var chart = this._chart;
+          opts.width = newWidth;
 
-            if (chart && chart._chart) {
-              chart._chart._resize(opts);
+          if (chart && chart._chart) {
+            chart._chart._resize(opts);
 
-              opts.xTicks = this._xTicks();
-              opts.yTicks = this._yTicks();
+            opts.xTicks = this._xTicks();
+            opts.yTicks = this._yTicks();
 
-              this._updateChart();
-            }
+            this._updateChart();
           }
         }
 
@@ -3080,10 +2927,10 @@
 
         var zoom = this._map.getZoom();
 
-        if ("number" === typeof this._zFollow) {
-          if (zoom < this._zFollow) zoom = this._zFollow;
+        var z = this.options.zFollow;
 
-          this._map.setView(item.latlng, zoom, {
+        if (typeof z === "number") {
+          this._map.setView(item.latlng, zoom < z ? z : zoom, {
             animate: true,
             duration: 0.25
           });
@@ -3099,7 +2946,7 @@
        * Toggle chart data on legend click
        */
       _toggleChartHandler: function _toggleChartHandler(e) {
-        var _this17 = this;
+        var _this16 = this;
 
         var path = e.path,
             name = e.name,
@@ -3109,7 +2956,7 @@
         this._layers.eachLayer(function (layer) {
           var node = layer.getElement && layer.getElement();
 
-          toggleClass(node, _this17.options.polyline.className + ' ' + _this17.options.theme, _this17._chartEnabled);
+          toggleClass(node, _this16.options.polyline.className + ' ' + _this16.options.theme, _this16._chartEnabled);
         }); // toggle option value (eg. altitude = { 'disabled' || 'disabled' })
 
 
@@ -3149,23 +2996,23 @@
        * Update the position/height indicator marker drawn onto the map
        */
       _updateMarker: function _updateMarker(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 _rotateMarker() {
-        if (!this._marker) return;
-
-        this._marker.update();
+        if (this._marker) {
+          this._marker.update();
+        }
       },
 
       /**
@@ -3183,7 +3030,7 @@
        * Update chart summary.
        */
       _updateSummary: function _updateSummary() {
-        var _this18 = this;
+        var _this17 = this;
 
         this._summary.reset();
 
@@ -3198,9 +3045,9 @@
           select('.download a', this.summaryDiv).onclick = function (e) {
             e.preventDefault();
 
-            _this18._fireEvt('eletrack_download', {
-              downloadLink: _this18.options.downloadLink,
-              confirm: saveFile.bind(_this18, _this18._downloadURL)
+            _this17._fireEvt('eletrack_download', {
+              downloadLink: _this17.options.downloadLink,
+              confirm: saveFile.bind(_this17, _this17._downloadURL)
             });
           };
         }
@@ -3236,6 +3083,12 @@
      */
 
     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) {
         var p = e.point,
             pop = p._popup;
@@ -3264,7 +3117,7 @@
         }
       });
       this.on('eledata_loaded', function (e) {
-        var _this19 = this;
+        var _this18 = this;
 
         var map = this._map;
         var layer = e.layer;
@@ -3275,37 +3128,37 @@
         }
 
         map.once('layeradd', function (e) {
-          return _this19.options.autofitBounds && _this19.fitBounds(layer.getBounds());
+          return _this18.options.autofitBounds && _this18.fitBounds(layer.getBounds());
         });
 
         if (L.Browser.mobile) {
           if (this.options.polyline) layer.addTo(map);
         } else {
           // leaflet-geometryutil
-          Elevation._geomutilLazyLoader = lazyLoader(this.__LGEOMUTIL, typeof L.GeometryUtil !== 'function' || !this.options.lazyLoadJS, Elevation._geomutilLazyLoader).then(function () {
+          this.lazyLoad(this.__LGEOMUTIL).then(function () {
             // leaflet-almostover
-            if (_this19.options.almostOver) {
-              Elevation._almostoverLazyLoader = lazyLoader(_this19.__LALMOSTOVER, typeof L.Handler.AlmostOver !== 'function' || !_this19.options.lazyLoadJS, Elevation._almostoverLazyLoader).then(function () {
+            if (_this18.options.almostOver) {
+              _this18.lazyLoad(_this18.__LALMOSTOVER).then(function () {
                 map.addHandler('almostOver', L.Handler.AlmostOver);
 
                 if (L.GeometryUtil && map.almostOver && map.almostOver.enabled()) {
                   map.almostOver.addLayer(layer);
                   map.on('almost:move', function (e) {
-                    return _this19._mousemoveLayerHandler(e);
+                    return _this18._mousemoveLayerHandler(e);
                   }).on('almost:out', function (e) {
-                    return _this19._mouseoutHandler(e);
+                    return _this18._mouseoutHandler(e);
                   });
                 }
               });
             } // leaflet-distance-markers
 
 
-            if (_this19.options.distanceMarkers) {
-              Elevation._distanceMarkersLazyLoader = lazyLoader(_this19.__LDISTANCEM, typeof L.DistanceMarkers !== 'function' || !_this19.options.lazyLoadJS, Elevation._distanceMarkersLazyLoader).then(function () {
-                return _this19.options.polyline && layer.addTo(map);
+            if (_this18.options.distanceMarkers) {
+              _this18.lazyLoad(_this18.__LDISTANCEM).then(function () {
+                return _this18.options.polyline && layer.addTo(map);
               });
             } else {
-              if (_this19.options.polyline) layer.addTo(map);
+              if (_this18.options.polyline) layer.addTo(map);
             }
           });
         }
@@ -3351,26 +3204,24 @@
     });
 
     Elevation.addInitHook(function () {
-      var _this = this;
-
       var opts = this.options;
       var altitude = {};
 
       if (opts.imperial) {
-        this._heightFactor = this.__footFactor;
-        this._yLabel = "ft";
+        opts.altitudeFactor = this.__footFactor;
+        altitude.label = "ft";
       } else {
-        this._heightFactor = opts.heightFactor;
-        this._yLabel = opts.yLabel;
+        opts.altitudeFactor = opts.heightFactor || opts.altitudeFactor || 1;
+        altitude.label = opts.yLabel;
       }
 
       this.on("eledata_updated", function (e) {
         var data = this._data;
         var i = e.index;
-        var z = data[i].z * this._heightFactor;
+        var z = data[i].z * opts.altitudeFactor;
         var track = this.track_info;
-        var eleMax = track.elevation_max || -Infinity;
-        var eleMin = track.elevation_min || +Infinity; // check and fix missing elevation data on last added point
+        var zMax = track.elevation_max || -Infinity;
+        var zMin = track.elevation_min || +Infinity; // check and fix missing elevation data on last added point
 
         if (!this.options.skipNullZCoords && i > 0) {
           var prevZ = data[i - 1].z;
@@ -3394,14 +3245,12 @@
 
 
         if (!isNaN(z)) {
-          eleMax = eleMax < z ? z : eleMax;
-          eleMin = eleMin > z ? z : eleMin;
           this._lastValidZ = z;
         }
 
+        track.elevation_max = z > zMax ? z : zMax;
+        track.elevation_min = z < zMin ? z : zMin;
         data[i].z = z;
-        track.elevation_max = eleMax;
-        track.elevation_min = eleMin;
       });
       this.on("elechart_axis", function () {
         this._chart._registerAxisGrid({
@@ -3413,13 +3262,10 @@
 
       if (this.options.altitude != "summary") {
         this.on("elechart_axis", function () {
-          altitude.y = this._chart._y;
-          altitude.label = this._yLabel;
-
           this._chart._registerAxisScale({
             axis: "y",
             position: "left",
-            scale: altitude.y,
+            scale: this._chart._y,
             label: altitude.label,
             labelX: -3,
             labelY: -8,
@@ -3429,8 +3275,6 @@
         this.on("elechart_init", function () {
           var theme = this.options.theme.replace('-theme', '');
           var color = Colors[theme] || {};
-          var alpha = this.options.detached ? color.alpha || '0.8' : 1;
-          var stroke = this.options.detached ? color.stroke : false;
 
           this._chart._registerAreaPath({
             name: 'altitude',
@@ -3438,21 +3282,21 @@
             scaleX: 'distance',
             scaleY: 'altitude',
             color: color.area || theme,
-            strokeColor: stroke || '#000',
+            strokeColor: this.options.detached ? color.stroke : '#000',
             strokeOpacity: "1",
-            fillOpacity: alpha,
+            fillOpacity: this.options.detached ? color.alpha || '0.8' : 1,
             preferCanvas: this.options.preferCanvas
           });
         });
       }
 
-      this._registerFocusLabel({
+      this._registerTooltip({
         name: 'y',
         chart: function chart(item) {
-          return L._("y: ") + d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + _this._yLabel;
+          return L._("y: ") + d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + altitude.label;
         },
         marker: function marker(item) {
-          return d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + _this._yLabel;
+          return d3.format("." + opts.decimalsY + "f")(item[opts.yAttr]) + " " + altitude.label;
         }
       });
 
@@ -3460,30 +3304,28 @@
         "maxele": {
           label: "Max Elevation: ",
           value: function value(track) {
-            return (track.elevation_max || 0).toFixed(2) + '&nbsp;' + _this._yLabel;
+            return (track.elevation_max || 0).toFixed(2) + '&nbsp;' + altitude.label;
           }
         },
         "minele": {
           label: "Min Elevation: ",
           value: function value(track) {
-            return (track.elevation_min || 0).toFixed(2) + '&nbsp;' + _this._yLabel;
+            return (track.elevation_min || 0).toFixed(2) + '&nbsp;' + altitude.label;
           }
         }
       });
     });
 
     Elevation.addInitHook(function () {
-      var _this2 = this;
-
       var opts = this.options;
       var 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) {
@@ -3493,13 +3335,11 @@
         var dist = track.distance || 0;
         var curr = data[i].latlng;
         var prev = i > 0 ? data[i - 1].latlng : curr;
-
-        var delta = curr.distanceTo(prev) * this._distanceFactor;
-
+        var 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 () {
         this._chart._registerAxisGrid({
@@ -3513,13 +3353,10 @@
         this.on("elechart_axis", function () {
           var _this = this;
 
-          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: function labelX() {
@@ -3530,10 +3367,10 @@
         });
       }
 
-      this._registerFocusLabel({
+      this._registerTooltip({
         name: 'x',
         chart: function chart(item) {
-          return L._("x: ") + d3.format("." + opts.decimalsX + "f")(item[opts.xAttr]) + " " + _this2._xLabel;
+          return L._("x: ") + d3.format("." + opts.decimalsX + "f")(item[opts.xAttr]) + " " + distance.label;
         }
       });
 
@@ -3541,7 +3378,7 @@
         "totlen": {
           label: "Total Length: ",
           value: function value(track) {
-            return (track.distance || 0).toFixed(2) + '&nbsp;' + _this2._xLabel;
+            return (track.distance || 0).toFixed(2) + '&nbsp;' + distance.label;
           }
         }
       });
@@ -3553,7 +3390,7 @@
       var opts = this.options;
       var time = {};
       time.label = opts.timeLabel || 't';
-      this._timeFactor = opts.timeFactor;
+      opts.timeFactor = opts.timeFactor || 3600;
       /**
        * Common AVG speeds:
        * ----------------------
@@ -3618,7 +3455,7 @@
           e.point.meta = e.point.meta || {};
           var delta = data[i].dist - data[i > 0 ? i - 1 : i].dist;
           var speed = this._timeAVGSpeed;
-          e.point.meta.time = new Date(i > 0 ? data[i - 1].time.getTime() + delta / speed * this._timeFactor * 1000 : Date.now());
+          e.point.meta.time = new Date(i > 0 ? data[i - 1].time.getTime() + delta / speed * opts.timeFactor * 1000 : Date.now());
         }
 
         var time = e.point.meta.time; // Handle timezone offset
@@ -3631,13 +3468,13 @@
         var prevT = i > 0 ? data[i - 1].time : currT;
         var deltaT = Math.abs(currT - prevT);
         var 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.timestamps) {
-        this._registerFocusLabel({
+        this._registerTooltip({
           name: 'date',
           chart: function chart(item) {
             return L._("t: ") + _this.options.timeFormat(item.time);
@@ -3646,7 +3483,7 @@
       }
 
       if (this.options.time) {
-        this._registerFocusLabel({
+        this._registerTooltip({
           name: 'time',
           chart: function chart(item) {
             return L._("T: ") + formatTime(item.duration || 0);
@@ -3735,22 +3572,15 @@
         } // Range of acceptable slope values.
 
 
-        if (this.options.sRange) {
-          var 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: function chart(item) {
           return L._("m: ") + item.slope + slope.label;
@@ -3764,13 +3594,13 @@
         "ascent": {
           label: "Total Ascent: ",
           value: function value(track) {
-            return Math.round(track.ascent || 0) + '&nbsp;' + _this._yLabel;
+            return Math.round(track.ascent || 0) + '&nbsp;' + (_this.options.imperial ? 'ft' : 'm');
           }
         },
         "descent": {
           label: "Total Descent: ",
           value: function value(track) {
-            return Math.round(track.descent || 0) + '&nbsp;' + _this._yLabel;
+            return Math.round(track.descent || 0) + '&nbsp;' + (_this.options.imperial ? 'ft' : 'm');
           }
         },
         "minslope": {
@@ -3792,8 +3622,8 @@
       if (!this.options.speed && !this.options.acceleration) return;
       var opts = this.options;
       var 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") {
         this._registerAxisScale({
@@ -3840,7 +3670,7 @@
 
         if (deltaT > 0) {
           var 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.
 
 
@@ -3854,23 +3684,15 @@
         } // Range of acceptable speed values.
 
 
-        if (this.options.speedRange) {
-          var 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;
-        data[i].speed = speed;
-        track.speed_max = sMax;
-        track.speed_min = sMin;
-        track.speed_avg = sAvg;
+        speed = clamp(speed, this.options.speedRange);
+        track.speed_max = speed > sMax ? speed : sMax;
+        track.speed_min = speed < sMin ? speed : sMin;
+        track.speed_avg = (speed + sAvg) / 2.0;
+        data[i].speed = L.Util.formatNum(speed, 2);
       });
 
       if (this.options.speed) {
-        this._registerFocusLabel({
+        this._registerTooltip({
           name: 'speed',
           chart: function chart(item) {
             return L._('v: ') + item.speed + " " + speed.label;
@@ -3907,8 +3729,8 @@
       if (!this.options.acceleration) return;
       var opts = this.options;
       var acceleration = {};
-      acceleration.label = opts.accelerationLabel || L._(this.options.imperial ? 'ft/s²' : 'm/s²');
-      this._accelerationFactor = opts.accelerationFactor || 1;
+      acceleration.label = opts.accelerationLabel || L._(opts.imperial ? 'ft/s²' : 'm/s²');
+      opts.accelerationFactor = opts.accelerationFactor || 1;
 
       if (this.options.acceleration != "summary") {
         this._registerAxisScale({
@@ -3956,8 +3778,8 @@
         if (deltaT > 0) {
           var curr = data[i].speed;
           var prev = i > 0 ? data[i - 1].speed : curr;
-          var delta = (curr - prev) * (1000 / this._timeFactor);
-          acceleration = Math.abs(delta / deltaT) * this._accelerationFactor;
+          var delta = (curr - prev) * (1000 / opts.timeFactor);
+          acceleration = Math.abs(delta / deltaT) * opts.accelerationFactor;
         } // Try to smooth "crazy" acceleration values.
 
 
@@ -3971,22 +3793,14 @@
         } // Range of acceptable acceleration values.
 
 
-        if (this.options.accelerationRange) {
-          var range = this.options.accelerationRange;
-          if (acceleration < range[0]) acceleration = range[0];else if (acceleration > range[1]) acceleration = range[1];
-        }
-
-        acceleration = L.Util.formatNum(acceleration, 2);
-        if (acceleration > sMax) sMax = acceleration;
-        if (acceleration < sMin) sMin = acceleration;
-        sAvg = (acceleration + sAvg) / 2.0;
-        data[i].acceleration = acceleration;
-        track.acceleration_max = sMax;
-        track.acceleration_min = sMin;
-        track.acceleration_avg = sAvg;
+        acceleration = clamp(acceleration, this.options.accelerationRange);
+        track.acceleration_max = acceleration > sMax ? acceleration : sMax;
+        track.acceleration_min = acceleration < sMin ? acceleration : sMin;
+        track.acceleration_avg = (acceleration + sAvg) / 2.0;
+        data[i].acceleration = L.Util.formatNum(acceleration, 2);
       });
 
-      this._registerFocusLabel({
+      this._registerTooltip({
         name: 'acceleration',
         chart: function chart(item) {
           return L._("a: ") + item.acceleration + " " + acceleration.label;