@raruto/leaflet-elevation 1.8.3 → 1.8.6

package/dist/leaflet-elevation.js

@@ -45,62 +45,6 @@
       };
     }, window);
 
-    function _typeof(obj) {
-      "@babel/helpers - typeof";
-
-      if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-        _typeof = function (obj) {
-          return typeof obj;
-        };
-      } else {
-        _typeof = function (obj) {
-          return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-        };
-      }
-
-      return _typeof(obj);
-    }
-
-    function _defineProperty(obj, key, value) {
-      if (key in obj) {
-        Object.defineProperty(obj, key, {
-          value: value,
-          enumerable: true,
-          configurable: true,
-          writable: true
-        });
-      } else {
-        obj[key] = value;
-      }
-
-      return obj;
-    }
-
-    /**
-     * Recursive deep merge objects.
-     * Alternative to L.Util.setOptions(this, options).
-     */
-    function deepMerge(target) {
-      for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        sources[_key - 1] = arguments[_key];
-      }
-
-      if (!sources.length) return target;
-      var source = sources.shift();
-
-      if (isObject(target) && isObject(source)) {
-        for (var key in source) {
-          if (isObject(source[key])) {
-            if (!target[key]) Object.assign(target, _defineProperty({}, key, {}));
-            deepMerge(target[key], source[key]);
-          } else {
-            Object.assign(target, _defineProperty({}, key, source[key]));
-          }
-        }
-      }
-
-      return deepMerge.apply(void 0, [target].concat(sources));
-    }
     var SEC = 1000;
     var MIN = SEC * 60;
     var HOUR = MIN * 60;
@@ -132,194 +76,6 @@
 
       return (d ? d + "d " : '') + h.toString().padStart(2, 0) + ':' + m.toString().padStart(2, 0) + "'" + s.toString().padStart(2, 0) + '"';
     }
-    /**
-     * Simple GeoJSON data loader.
-     */
-
-    function GeoJSONLoader(data, control) {
-      if (typeof data === "string") {
-        data = JSON.parse(data);
-      }
-
-      control = control || this;
-      var distanceMarkers = control.options.distanceMarkers === true ? {
-        lazy: true
-      } : L.extend({
-        lazy: true
-      }, control.options.distanceMarkers);
-      var _control$options = control.options,
-          wptIcons = _control$options.wptIcons,
-          wptLabels = _control$options.wptLabels; // Partially fix MultiLineStrings (trk > trkseg + trkseg) splitting them into seperate LineStrings (trk > trkseg, trk > trkseg)
-
-      data.features.forEach(function (d) {
-        if (d.type == 'Feature' && d.geometry.type == "MultiLineString") {
-          d.geometry.coordinates.forEach(function (coords) {
-            data.features.push({
-              type: 'Feature',
-              geometry: {
-                type: 'LineString',
-                coordinates: coords
-              },
-              properties: d.properties
-            });
-          });
-        }
-      });
-      data.features = data.features.filter(function (d) {
-        return d.type && d.geometry.type != "MultiLineString";
-      });
-      var layer = L.geoJson(data, {
-        distanceMarkers: distanceMarkers,
-        style: function style(feature) {
-          var style = L.extend({}, control.options.polyline);
-
-          if (control.options.theme) {
-            style.className += ' ' + control.options.theme;
-          }
-
-          return style;
-        },
-        pointToLayer: function pointToLayer(feature, latlng) {
-          var _prop$desc, _prop$name, _prop$sym;
-
-          if (!control.options.waypoints) return;
-          var prop = feature.properties;
-          var desc = (_prop$desc = prop.desc) !== null && _prop$desc !== void 0 ? _prop$desc : '';
-          var name = (_prop$name = prop.name) !== null && _prop$name !== void 0 ? _prop$name : '';
-          var sym = ((_prop$sym = prop.sym) !== null && _prop$sym !== void 0 ? _prop$sym : name).replace(' ', '-').replace('"', '').replace("'", '').toLowerCase(); // Handle chart waypoints (dots)
-
-          if ([true, 'dots'].includes(control.options.waypoints)) {
-            control._registerCheckPoint({
-              latlng: latlng,
-              label: [true, 'dots'].includes(wptLabels) ? name : ''
-            }, true);
-          } // Handle map waypoints (markers)
-
-
-          if ([true, 'markers'].includes(control.options.waypoints) && wptIcons != false) {
-            // generate and cache appropriate icon symbol
-            if (!wptIcons.hasOwnProperty(sym)) {
-              wptIcons[sym] = L.divIcon(L.extend({}, wptIcons[""].options, {
-                html: '<i class="elevation-waypoint-icon ' + sym + '"></i>'
-              }));
-            }
-
-            var marker = L.marker(latlng, {
-              icon: wptIcons[sym]
-            });
-
-            if ([true, 'markers'].includes(wptLabels) && (name || desc)) {
-              marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
-            }
-
-            control._addMarker(marker);
-
-            control.fire('waypoint_added', {
-              point: marker,
-              element: latlng,
-              properties: prop
-            });
-            return marker;
-          }
-        },
-        onEachFeature: function onEachFeature(feature, layer) {
-          if (feature.geometry && feature.geometry.type == 'Point') return; // Standard GeoJSON
-          // control.addData(feature, layer);  // NB uses "_addGeoJSONData"
-          // Extended GeoJSON
-
-          layer._latlngs.forEach(function (point, i, data) {
-            // same properties as L.GPX layer
-            point.meta = {
-              time: null,
-              ele: null,
-              hr: null,
-              cad: null,
-              atemp: null
-            };
-            if ("alt" in point) point.meta.ele = point.alt;
-
-            if (feature.properties) {
-              var prop = feature.properties;
-              if ("coordTimes" in prop) point.meta.time = new Date(Date.parse(prop.coordTimes[i]));else if ("times" in prop) point.meta.time = new Date(Date.parse(prop.times[i]));else if ("time" in prop) point.meta.time = new Date(Date.parse(_typeof(prop.time) === 'object' ? prop.time[i] : prop.time));
-              if ("heartRates" in prop) point.meta.hr = parseInt(prop.heartRates[i]);else if ("heartRate" in prop) point.meta.hr = parseInt(_typeof(prop.heartRate) === 'object' ? prop.heartRate[i] : prop.heartRate); // TODO: cadence, temperature
-            }
-          });
-
-          control.addData(layer); // NB uses "_addGPXData"
-          // Postpone adding the distance markers (lazy: true)
-
-          if (control.options.distanceMarkers && distanceMarkers.lazy) {
-            layer.on('add remove', function (e) {
-              var path = e.target;
-
-              if (L.DistanceMarkers && path instanceof L.Polyline) {
-                path[e.type + 'DistanceMarkers']();
-              }
-            });
-          }
-
-          control.track_info = L.extend({}, control.track_info, {
-            type: "geojson",
-            name: data.name
-          });
-        }
-      });
-
-      L.Control.Elevation._d3LazyLoader.then(function () {
-        control._fireEvt("eledata_loaded", {
-          data: data,
-          layer: layer,
-          name: control.track_info.name,
-          track_info: control.track_info
-        });
-      });
-
-      return layer;
-    }
-    /**
-     * Check object type.
-     */
-
-    function isObject(item) {
-      return item && _typeof(item) === 'object' && !Array.isArray(item);
-    }
-    /**
-     * Check JSON object type.
-     */
-
-    function isJSONDoc(doc, lazy) {
-      lazy = typeof lazy === "undefined" ? true : lazy;
-
-      if (typeof doc === "string" && lazy) {
-        doc = doc.trim();
-        return doc.indexOf("{") == 0 || doc.indexOf("[") == 0;
-      } else {
-        try {
-          JSON.parse(doc.toString());
-        } catch (e) {
-          if (_typeof(doc) === "object" && lazy) return true;
-          console.warn(e);
-          return false;
-        }
-
-        return true;
-      }
-    }
-    /**
-     * Check XML object type.
-     */
-
-    function isXMLDoc(doc, lazy) {
-      lazy = typeof lazy === "undefined" ? true : lazy;
-
-      if (typeof doc === "string" && lazy) {
-        doc = doc.trim();
-        return doc.indexOf("<") == 0;
-      } else {
-        var documentElement = (doc ? doc.ownerDocument || doc : 0).documentElement;
-        return documentElement ? documentElement.nodeName !== "HTML" : false;
-      }
-    }
     /**
      * Generate download data event.
      */
@@ -358,40 +114,6 @@
         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]);
-    }
     /**
      * Convert SVG Path into Path2D and then update canvas
      */
@@ -530,15 +252,9 @@
 
     var _ = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        deepMerge: deepMerge,
         formatTime: formatTime,
-        GeoJSONLoader: GeoJSONLoader,
-        isObject: isObject,
-        isJSONDoc: isJSONDoc,
-        isXMLDoc: isXMLDoc,
         saveFile: saveFile,
         lazyLoader: lazyLoader,
-        lazyLoad: lazyLoad,
         drawCanvas: drawCanvas,
         clamp: clamp,
         addClass: addClass,
@@ -1317,6 +1033,8 @@
           _this4.zooming = true;
           _this4._scales.distance = _this4._x = e.transform.rescaleX(_this4._x); // calculate x scale at zoom level
 
+          if (_this4._scales.time) _this4._scales.time = e.transform.rescaleX(_this4._scales.time); // calculate x scale at zoom level
+
           _this4._resetDrag();
 
           if (e.sourceEvent && e.sourceEvent.type == "mousemove") {
@@ -1479,7 +1197,9 @@
         var opts = this.options;
         var scale = props.scale;
 
-        if (typeof scale !== 'function') {
+        if (typeof this._scales[props.name] === 'function') {
+          props.scale = this._scales[props.name]; // retrieve cached scale
+        } else if (typeof scale !== 'function') {
           scale = L.extend({
             data: this._data,
             forceBounds: opts.forceAxisBounds
@@ -1814,6 +1534,22 @@
       }
     });
 
+    function _typeof(obj) {
+      "@babel/helpers - typeof";
+
+      if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+        _typeof = function (obj) {
+          return typeof obj;
+        };
+      } else {
+        _typeof = function (obj) {
+          return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+        };
+      }
+
+      return _typeof(obj);
+    }
+
     var Marker = L.Class.extend({
       initialize: function initialize(options) {
         this.options = options;
@@ -2057,7 +1793,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.8.3/libs/leaflet-distance-marker.min.js',
+      __LDISTANCEM: 'https://unpkg.com/@raruto/leaflet-elevation@1.8.5/libs/leaflet-distance-marker.min.js',
 
       /*
        * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -2217,86 +1953,74 @@
         this._markers = L.featureGroup();
         this._markedSegments = L.polyline([]);
         this._chartEnabled = true, this.track_info = {};
-        this.options = deepMerge({}, this.options, options);
+        L.setOptions(this, options);
         if (this.options.followMarker) this._setMapView = L.Util.throttle(this._setMapView, 300, this);
         if (this.options.legend) this.options.margins.bottom += 30;
         if (this.options.theme) this.options.polylineSegments.className += ' ' + this.options.theme;
         if (this.options.wptIcons === true) this.options.wptIcons = Options.wptIcons;
+        if (this.options.distanceMarkers === true) this.options.distanceMarkers = {
+          lazy: true
+        };
 
         this._markedSegments.setStyle(this.options.polylineSegments); // Leaflet canvas renderer colors
 
 
-        L.extend(Colors, this.options.colors || {});
+        L.extend(Colors, this.options.colors || {}); // Various stuff
+
+        this._fixCanvasPaths();
+
+        this._fixTooltipSize();
       },
 
       /**
        * Javascript scripts downloader (lazy loader)
        */
-      lazyLoad: function lazyLoad$1(src) {
-        return lazyLoad(src, this);
-      },
+      lazyLoad: function lazyLoad(src) {
+        var condition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        var loader = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
 
-      /**
-       * Load elevation data (GPX, GeoJSON or KML).
-       */
-      load: function load(data) {
-        if (isXMLDoc(data)) {
-          this.loadXML(data);
-        } else if (isJSONDoc(data)) {
-          this.loadGeoJSON(data);
-        } else {
-          this.loadFile(data);
+        if (!this.options.lazyLoadJS) {
+          return Promise.resolve();
         }
-      },
 
-      /**
-       * Load data from a remote url.
-       */
-      loadFile: function loadFile(url) {
-        var _this3 = this;
+        switch (src) {
+          case this.__D3:
+            loader = '_d3LazyLoader';
+            condition = (typeof d3 === "undefined" ? "undefined" : _typeof(d3)) !== 'object';
+            break;
 
-        fetch(url).then(function (response) {
-          return response.text();
-        }).then(function (data) {
-          _this3._downloadURL = url; // TODO: handle multiple urls?
+          case this.__TOGEOJSON:
+            loader = '_togeojsonLazyLoader';
+            condition = (typeof toGeoJSON === "undefined" ? "undefined" : _typeof(toGeoJSON)) !== 'object';
+            break;
 
-          _this3.load(data);
-        }).catch(function (err) {
-          return console.warn(err);
-        });
-      },
+          case this.__LGEOMUTIL:
+            loader = '_geomutilLazyLoader';
+            condition = _typeof(L.GeometryUtil) !== 'object';
+            break;
 
-      /**
-       * Load raw GeoJSON data.
-       */
-      loadGeoJSON: function loadGeoJSON(data) {
-        GeoJSONLoader(data, this);
+          case this.__LALMOSTOVER:
+            loader = '_almostoverLazyLoader';
+            condition = typeof L.Handler.AlmostOver !== 'function';
+            break;
+
+          case this.__LDISTANCEM:
+            loader = '_distanceMarkersLazyLoader';
+            condition = typeof L.DistanceMarkers !== 'function';
+            break;
+        }
+
+        return L.Control.Elevation[loader] = lazyLoader(src, condition, L.Control.Elevation[loader]);
       },
 
       /**
-       * Load raw XML data.
+       * Load elevation data (GPX, GeoJSON or KML).
        */
-      loadXML: function loadXML(data) {
-        var _this4 = this;
-
-        this.lazyLoad(this.__TOGEOJSON).then(function () {
-          var xml = new DOMParser().parseFromString(data, "text/xml");
-          var type = xml.documentElement.tagName.toLowerCase(); // "kml" or "gpx"
-
-          if (!(type in toGeoJSON)) {
-            type = xml.documentElement.tagName == "TrainingCenterDatabase" ? 'tcx' : 'gpx';
-          }
-
-          var geojson = toGeoJSON[type](xml);
-          var name = xml.getElementsByTagName('name');
-
-          if (name[0]) {
-            geojson.name = name[0].innerHTML;
-          } else if (_this4._downloadURL) {
-            geojson.name = _this4._downloadURL.split('/').pop().split('#')[0].split('?')[0];
-          }
+      load: function load(data) {
+        var _this3 = this;
 
-          return _this4.loadGeoJSON(geojson, _this4);
+        this._parseFromString(data).then(function (geojson) {
+          return geojson ? _this3._loadLayer(geojson) : _this3._loadFile(data);
         });
       },
 
@@ -2305,38 +2029,36 @@
        * Called on control.addTo(map).
        */
       onAdd: function onAdd(map) {
-        var _this5 = this;
+        var _this4 = this;
 
         this._map = map;
 
-        var container = this._container = create("div", "elevation-control elevation " + this.options.theme);
-
-        if (!this.options.detached) {
-          addClass(container, 'leaflet-control');
-        }
+        var container = this._container = create("div", "elevation-control elevation " + this.options.theme + " " + (this.options.detached ? '' : 'leaflet-control'));
 
         this.lazyLoad(this.__D3).then(function () {
-          _this5._initButton(container);
+          _this4._initButton(container);
+
+          _this4._initChart(container);
 
-          _this5._initChart(container);
+          _this4._initSummary(container);
 
-          _this5._initSummary(container);
+          _this4._initMarker(map);
 
-          _this5._initMarker(map);
+          _this4._initLayer(map);
 
-          _this5._initLayer(map);
+          map.on('zoom viewreset zoomanim', _this4._hideMarker, _this4).on('resize', _this4._resetView, _this4).on('resize', _this4._resizeChart, _this4).on('rotate', _this4._rotateMarker, _this4).on('mousedown', _this4._resetDrag, _this4);
 
-          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', _this4._resetDrag, _this4);
 
-          on(map.getContainer(), 'mousewheel', _this5._resetDrag, _this5);
+          on(map.getContainer(), 'touchstart', _this4._resetDrag, _this4);
 
-          on(map.getContainer(), 'touchstart', _this5._resetDrag, _this5);
+          on(document, 'keydown', _this4._keydownHandler, _this4);
 
-          _this5.on('eledata_added eledata_loaded', _this5._updateChart, _this5).on('eledata_added eledata_loaded', _this5._updateSummary, _this5);
+          _this4.on('eledata_added eledata_loaded', _this4._updateChart, _this4).on('eledata_added eledata_loaded', _this4._updateSummary, _this4);
 
-          _this5._updateChart();
+          _this4._updateChart();
 
-          _this5._updateSummary();
+          _this4._updateSummary();
         });
         return container;
       },
@@ -2353,6 +2075,8 @@
 
         off(map.getContainer(), 'touchstart', this._resetDrag, this);
 
+        off(document, 'keydown', this._keydownHandler, this);
+
         this.off('eledata_added eledata_loaded', this._updateChart, this).off('eledata_added eledata_loaded', this._updateSummary, this);
       },
 
@@ -2381,7 +2105,7 @@
        * Parsing data either from GPX or GeoJSON and update the diagram data
        */
       _addData: function _addData(d) {
-        var _this6 = this;
+        var _this5 = this;
 
         if (!d) {
           return;
@@ -2398,7 +2122,7 @@
 
             case 'MultiLineString':
               each(geom.coordinates, function (coords) {
-                return _this6._addGeoJSONData(coords);
+                return _this5._addGeoJSONData(coords);
               });
 
               break;
@@ -2410,7 +2134,7 @@
 
         if (d.type === "FeatureCollection") {
           each(d.features, function (feature) {
-            return _this6._addData(feature);
+            return _this5._addData(feature);
           });
         }
 
@@ -2423,14 +2147,14 @@
        * Parsing of GeoJSON data lines and their elevation in z-coordinate
        */
       _addGeoJSONData: function _addGeoJSONData(coords) {
-        var _this7 = this;
+        var _this6 = this;
 
         each(coords, function (point) {
-          _this7._addPoint(point[1], point[0], point[2]);
+          _this6._addPoint(point[1], point[0], point[2]);
 
-          _this7._fireEvt("elepoint_added", {
+          _this6._fireEvt("elepoint_added", {
             point: point,
-            index: _this7._data.length - 1
+            index: _this6._data.length - 1
           });
         });
 
@@ -2444,16 +2168,16 @@
        * Parsing function for GPX data and their elevation in z-coordinate
        */
       _addGPXData: function _addGPXData(coords) {
-        var _this8 = this;
+        var _this7 = this;
 
         each(coords, function (point) {
           var _point$alt;
 
-          _this8._addPoint(point.lat, point.lng, (_point$alt = point.alt) !== null && _point$alt !== void 0 ? _point$alt : point.meta.ele);
+          _this7._addPoint(point.lat, point.lng, (_point$alt = point.alt) !== null && _point$alt !== void 0 ? _point$alt : point.meta.ele);
 
-          _this8._fireEvt("elepoint_added", {
+          _this7._fireEvt("elepoint_added", {
             point: point,
-            index: _this8._data.length - 1
+            index: _this7._data.length - 1
           });
         });
 
@@ -2485,11 +2209,68 @@
         });
       },
       _addLayer: function _addLayer(layer) {
-        if (layer) this._layers.addLayer(layer);
+        if (layer) this._layers.addLayer(layer); // Postpone adding the distance markers (lazy: true)
+
+        if (layer && this.options.distanceMarkers && this.options.distanceMarkers.lazy) {
+          layer.on('add remove', function (e) {
+            return L.DistanceMarkers && e.target instanceof L.Polyline && e.target[e.type + 'DistanceMarkers']();
+          });
+        }
       },
       _addMarker: function _addMarker(marker) {
         if (marker) this._markers.addLayer(marker);
       },
+      _bindPopup: function _bindPopup(marker) {
+        var popup = marker._popup;
+
+        if (popup) {
+          popup.options.className = 'elevation-popup';
+
+          if (popup._content) {
+            popup._content = decodeURI(popup._content);
+            popup.bindTooltip(popup._content, {
+              direction: 'auto',
+              sticky: true,
+              opacity: 1,
+              className: 'elevation-tooltip'
+            }).openTooltip();
+          }
+        }
+      },
+      _initAlmostOverHandler: function _initAlmostOverHandler(map, layer) {
+        var _this8 = this;
+
+        if (!map || !this.options.almostOver) return;
+        this.lazyLoad(this.__LGEOMUTIL).then(function () {
+          return _this8.lazyLoad(_this8.__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 _this8._mousemoveLayerHandler(e);
+            }).on('almost:out', function (e) {
+              return _this8._mouseoutHandler(e);
+            });
+          }
+        });
+      },
+      _initDistanceMarkers: function _initDistanceMarkers(map, layer) {
+        var _this9 = this;
+
+        if (!map) return;
+
+        if (this.options.distanceMarkers) {
+          this.lazyLoad(this.__LGEOMUTIL).then(function () {
+            return _this9.lazyLoad(_this9.__LDISTANCEM);
+          }).then(function () {
+            return _this9.options.polyline && layer.addTo(map);
+          });
+        } else if (this.options.polyline) {
+          layer.addTo(map);
+        }
+      },
 
       /**
        * Adds the control to the given "detached" div.
@@ -2508,8 +2289,7 @@
           replaceClass(eleDiv, 'leaflet-control', 'elevation-detached');
         }
 
-        this.eleDiv = eleDiv;
-        return this.eleDiv;
+        return this.eleDiv = eleDiv;
       },
 
       /*
@@ -2526,6 +2306,58 @@
         replaceClass(this._container, 'elevation-collapsed', 'elevation-expanded');
       },
 
+      /**
+       * Add some basic colors to leaflet canvas renderer (preferCanvas: true).
+       */
+      _fixCanvasPaths: function _fixCanvasPaths() {
+        var oldProto = L.Canvas.prototype._fillStroke;
+        var control = this;
+        L.Canvas.include({
+          _fillStroke: function _fillStroke(ctx, layer) {
+            if (control._layers.hasLayer(layer)) {
+              var theme = control.options.theme.replace('-theme', '');
+              var color = Colors[theme] || {};
+              var options = layer.options;
+              options.color = color.line || color.area || theme;
+              options.stroke = !!options.color;
+              oldProto.call(this, ctx, layer);
+
+              if (options.stroke && options.weight !== 0) {
+                var oldVal = ctx.globalCompositeOperation || 'source-over';
+                ctx.globalCompositeOperation = 'destination-over';
+                ctx.strokeStyle = color.outline || '#FFF';
+                ctx.lineWidth = options.weight * 1.75;
+                ctx.stroke();
+                ctx.globalCompositeOperation = oldVal;
+              }
+            } else {
+              oldProto.call(this, ctx, layer);
+            }
+          }
+        });
+      },
+
+      /**
+       * Partial fix for initial tooltip size
+       * 
+       * @link https://github.com/Raruto/leaflet-elevation/issues/81#issuecomment-713477050
+       */
+      _fixTooltipSize: function _fixTooltipSize() {
+        var _this10 = this;
+
+        this.on('elechart_init', function () {
+          return _this10.once('elechart_change elechart_hover', function (e) {
+            if (_this10._chartEnabled) {
+              _this10._chart._showDiagramIndicator(e.data, e.xCoord);
+
+              _this10._chart._showDiagramIndicator(e.data, e.xCoord);
+            }
+
+            _this10._updateMarker(e.data);
+          });
+        });
+      },
+
       /*
        * Finds a data entry for the given LatLng
        */
@@ -2602,17 +2434,17 @@
         this._fireEvt("elechart_init");
       },
       _initLayer: function _initLayer() {
-        var _this9 = this;
+        var _this11 = this;
 
         this._layers.on('layeradd layerremove', function (e) {
           var layer = e.layer;
           var node = layer.getElement && layer.getElement();
 
-          toggleClass(node, _this9.options.polyline.className + ' ' + _this9.options.theme, e.type == 'layeradd');
+          toggleClass(node, _this11.options.polyline.className + ' ' + _this11.options.theme, e.type == 'layeradd');
 
-          toggleEvent(layer, "mousemove", _this9._mousemoveLayerHandler.bind(_this9), e.type == 'layeradd');
+          toggleEvent(layer, "mousemove", _this11._mousemoveLayerHandler.bind(_this11), e.type == 'layeradd');
 
-          toggleEvent(layer, "mouseout", _this9._mouseoutHandler.bind(_this9), e.type == 'layeradd');
+          toggleEvent(layer, "mouseout", _this11._mouseoutHandler.bind(_this11), e.type == 'layeradd');
         });
       },
       _initMarker: function _initMarker(map) {
@@ -2639,19 +2471,10 @@
        * Inspired by L.Control.Layers
        */
       _initButton: function _initButton(container) {
-        //Makes this work on IE10 Touch devices by stopping it from firing a mouseout event when the touch is released
-        container.setAttribute('aria-haspopup', true);
-
-        if (!this.options.detached) {
+        if (L.Browser.mobile || !this.options.detached) {
           L.DomEvent.disableClickPropagation(container).disableScrollPropagation(container);
         }
 
-        if (L.Browser.mobile) {
-          on(container, 'click', L.DomEvent.stopPropagation);
-        }
-
-        on(container, 'mousewheel', this._mousewheelHandler, this);
-
         if (!this.options.detached) {
           var link = this._button = create('a', "elevation-toggle elevation-toggle-icon" + (this.options.autohide ? "" : " close-button"), {
             href: '#',
@@ -2673,17 +2496,162 @@
 
             on(link, 'focus', this._toggle, this);
 
-            this._map.on('click', this._collapse, this); // TODO: keyboard accessibility
-
+            this._map.on('click', this._collapse, this);
           }
         }
       },
       _initSummary: function _initSummary(container) {
-        var summary = this._summary = new Summary({
+        this._summary = new Summary({
           summary: this.options.summary
         }, this);
-        d3.select(container).call(summary.render());
-        this.summaryDiv = this._summary._container;
+        d3.select(container).call(this._summary.render());
+      },
+      _keydownHandler: function _keydownHandler(e) {
+        if (!this.options.detached && e.key === "Escape") {
+          this._collapse();
+        }
+      },
+
+      /**
+       * Retrieve data from a remote url (HTTP).
+       */
+      _loadFile: function _loadFile(url) {
+        var _this12 = this;
+
+        fetch(url).then(function (response) {
+          return response.text();
+        }).then(function (data) {
+          _this12._downloadURL = url; // TODO: handle multiple urls?
+
+          _this12._parseFromString(data).then(function (geojson) {
+            return geojson && _this12._loadLayer(geojson);
+          });
+        }).catch(function (err) {
+          return console.warn(err);
+        });
+      },
+
+      /**
+       * Simple GeoJSON data loader (L.GeoJSON).
+       */
+      _loadLayer: function _loadLayer(geojson) {
+        var control = this;
+        var _control$options = control.options,
+            wptIcons = _control$options.wptIcons,
+            wptLabels = _control$options.wptLabels;
+        var layer = L.geoJson(geojson, {
+          distanceMarkers: control.options.distanceMarkers,
+          style: function style(feature) {
+            var style = L.extend({}, control.options.polyline);
+
+            if (control.options.theme) {
+              style.className += ' ' + control.options.theme;
+            }
+
+            return style;
+          },
+          pointToLayer: function pointToLayer(feature, latlng) {
+            var _prop$desc, _prop$name, _prop$sym;
+
+            if (!control.options.waypoints) return;
+            var prop = feature.properties;
+            var desc = (_prop$desc = prop.desc) !== null && _prop$desc !== void 0 ? _prop$desc : '';
+            var name = (_prop$name = prop.name) !== null && _prop$name !== void 0 ? _prop$name : '';
+            var sym = ((_prop$sym = prop.sym) !== null && _prop$sym !== void 0 ? _prop$sym : name).replace(' ', '-').replace('"', '').replace("'", '').toLowerCase(); // Handle chart waypoints (dots)
+
+            if ([true, 'dots'].includes(control.options.waypoints)) {
+              control._registerCheckPoint({
+                latlng: latlng,
+                label: [true, 'dots'].includes(wptLabels) ? name : ''
+              });
+            } // Handle map waypoints (markers)
+
+
+            if ([true, 'markers'].includes(control.options.waypoints) && wptIcons != false) {
+              // generate and cache appropriate icon symbol
+              if (!wptIcons.hasOwnProperty(sym)) {
+                wptIcons[sym] = L.divIcon(L.extend({}, wptIcons[""].options, {
+                  html: '<i class="elevation-waypoint-icon ' + sym + '"></i>'
+                }));
+              }
+
+              var marker = L.marker(latlng, {
+                icon: wptIcons[sym]
+              });
+
+              if ([true, 'markers'].includes(wptLabels) && (name || desc)) {
+                marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
+              }
+
+              control._addMarker(marker);
+
+              control._bindPopup(marker);
+
+              control.fire('waypoint_added', {
+                point: marker,
+                element: latlng,
+                properties: prop
+              });
+              return marker;
+            }
+          },
+          onEachFeature: function onEachFeature(feature, layer) {
+            if (feature.geometry && feature.geometry.type == 'Point') return; // Standard GeoJSON --> doesn't handle "time"
+            // control.addData(feature, layer);  // NB make use of "_addGeoJSONData"
+            // Extended GeoJSON --> rely on leaflet implementation
+
+            layer._latlngs.forEach(function (point, i) {
+              // same properties as L.GPX layer
+              point.meta = {
+                time: null,
+                ele: null,
+                hr: null,
+                cad: null,
+                atemp: null
+              };
+              if ("alt" in point) point.meta.ele = point.alt;
+
+              if (feature.properties) {
+                var prop = feature.properties;
+                if ("coordTimes" in prop) point.meta.time = new Date(Date.parse(prop.coordTimes[i]));else if ("times" in prop) point.meta.time = new Date(Date.parse(prop.times[i]));else if ("time" in prop) point.meta.time = new Date(Date.parse(_typeof(prop.time) === 'object' ? prop.time[i] : prop.time));
+                if ("heartRates" in prop) point.meta.hr = parseInt(prop.heartRates[i]);else if ("heartRate" in prop) point.meta.hr = parseInt(_typeof(prop.heartRate) === 'object' ? prop.heartRate[i] : prop.heartRate); // TODO: cadence, temperature
+              }
+            });
+
+            control.addData(layer); // NB make use of "_addGPXData"
+
+            control.track_info = L.extend({}, control.track_info, {
+              name: geojson.name
+            });
+          }
+        });
+        control.lazyLoad(control.__D3).then(function () {
+          var map = control._map;
+
+          if (map) {
+            map.once('layeradd', function (e) {
+              return control.options.autofitBounds && control.fitBounds(layer.getBounds());
+            });
+
+            if (!L.Browser.mobile) {
+              control._initAlmostOverHandler(map, layer);
+
+              control._initDistanceMarkers(map, layer);
+            } else if (control.options.polyline) {
+              layer.addTo(map);
+            }
+          } else {
+            console.warn("Undefined elevation map object");
+          }
+
+          control._fireEvt("eledata_loaded", {
+            data: geojson,
+            layer: layer,
+            name: control.track_info.name,
+            track_info: control.track_info
+          });
+        });
+        return layer;
       },
       _dragendHandler: function _dragendHandler(e) {
         this._hideMarker();
@@ -2767,29 +2735,116 @@
         this._fireEvt("elechart_leave");
       },
 
-      /*
-       * Handles the mouesewheel over the chart.
+      /**
+       * Simple GeoJSON Parser
+       */
+      _parseFromGeoJSONString: function _parseFromGeoJSONString(data) {
+        try {
+          return JSON.parse(data);
+        } catch (e) {}
+      },
+
+      /**
+       * Attempt to parse raw response data (GeoJSON or XML > GeoJSON)
        */
-      _mousewheelHandler: function _mousewheelHandler(e) {
-        if (this._map.gestureHandling && this._map.gestureHandling._enabled) return;
+      _parseFromString: function _parseFromString(data) {
+        var _this13 = this;
 
-        var ll = this._marker.getLatLng() || this._map.getCenter();
+        return new Promise(function (resolve) {
+          return _this13.lazyLoad(_this13.__TOGEOJSON).then(function () {
+            var geojson;
 
-        var z = this._map.getZoom() + Math.sign(e.deltaY);
+            try {
+              geojson = _this13._parseFromXMLString(data.trim());
+            } catch (e) {
+              geojson = _this13._parseFromGeoJSONString(data.toString());
+            }
 
-        this._resetDrag();
+            if (geojson) {
+              geojson = _this13._prepareMultiLineStrings(geojson);
+              geojson = _this13._prepareAdditionalProperties(geojson);
+            }
+
+            resolve(geojson);
+          });
+        });
+      },
+
+      /**
+       * Simple XML Parser (GPX, KML, TCX)
+       */
+      _parseFromXMLString: function _parseFromXMLString(data) {
+        var _Array$from$find;
+
+        if (data.indexOf("<") != 0) {
+          throw 'Invalid XML';
+        }
+
+        var xml = new DOMParser().parseFromString(data, "text/xml");
+        var type = xml.documentElement.tagName.toLowerCase(); // "kml" or "gpx"
+
+        var name = xml.getElementsByTagName('name');
+
+        if (xml.getElementsByTagName('parsererror').length) {
+          throw 'Invalid XML';
+        }
+
+        if (!(type in toGeoJSON)) {
+          type = xml.documentElement.tagName == "TrainingCenterDatabase" ? 'tcx' : 'gpx';
+        }
+
+        var geojson = toGeoJSON[type](xml);
+        geojson.name = name.length > 0 ? ((_Array$from$find = Array.from(name).find(function (tag) {
+          return tag.parentElement.tagName == "trk";
+        })) !== null && _Array$from$find !== void 0 ? _Array$from$find : name[0]).textContent : '';
+        return geojson;
+      },
+
+      /**
+       * Extend GeoJSON properties (name, time, ...)
+       */
+      _prepareAdditionalProperties: function _prepareAdditionalProperties(geojson) {
+        if (!geojson.name && this._downloadURL) {
+          geojson.name = this._downloadURL.split('/').pop().split('#')[0].split('?')[0];
+        }
+
+        return geojson;
+      },
 
-        this._map.flyTo(ll, z);
+      /**
+       * Just a temporary fix for MultiLineString data (trk > trkseg + trkseg),
+       * just split them into seperate LineStrings (trk > trkseg, trk > trkseg)
+       * 
+       * @link https://github.com/Raruto/leaflet-elevation/issues/56
+       */
+      _prepareMultiLineStrings: function _prepareMultiLineStrings(geojson) {
+        geojson.features.forEach(function (feauture) {
+          if (feauture.geometry.type == "MultiLineString") {
+            feauture.geometry.coordinates.forEach(function (coords) {
+              geojson.features.push({
+                geometry: {
+                  type: 'LineString',
+                  coordinates: coords
+                },
+                properties: feauture.properties,
+                type: 'Feature'
+              });
+            });
+          }
+        });
+        return geojson.features.filter(function (feauture) {
+          return feauture.geometry.type != "MultiLineString";
+        });
       },
 
       /**
-       * Add a waypoint marker to the diagram
+       * Add a point of interest over the diagram
        */
       _registerCheckPoint: function _registerCheckPoint(props) {
-        var _this10 = this;
+        var _this14 = this;
 
         this.on("elechart_updated", function () {
-          return _this10._chart._registerCheckPoint(props);
+          return _this14._chart._registerCheckPoint(props);
         });
       },
 
@@ -2797,10 +2852,10 @@
        * Add chart profile to diagram
        */
       _registerAreaPath: function _registerAreaPath(props) {
-        var _this11 = this;
+        var _this15 = this;
 
         this.on("elechart_init", function () {
-          return _this11._chart._registerAreaPath(props);
+          return _this15._chart._registerAreaPath(props);
         });
       },
 
@@ -2808,10 +2863,10 @@
        * Add chart grid to diagram
        */
       _registerAxisGrid: function _registerAxisGrid(props) {
-        var _this12 = this;
+        var _this16 = this;
 
         this.on("elechart_axis", function () {
-          return _this12._chart._registerAxisGrid(props);
+          return _this16._chart._registerAxisGrid(props);
         });
       },
 
@@ -2819,10 +2874,10 @@
        * Add chart axis to diagram
        */
       _registerAxisScale: function _registerAxisScale(props) {
-        var _this13 = this;
+        var _this17 = this;
 
         this.on("elechart_axis", function () {
-          return _this13._chart._registerAxisScale(props);
+          return _this17._chart._registerAxisScale(props);
         });
       },
 
@@ -2830,14 +2885,14 @@
        * Add chart or marker tooltip info
        */
       _registerTooltip: function _registerTooltip(props) {
-        var _this14 = this;
+        var _this18 = this;
 
         if (props.chart) {
           var label = L.extend({}, props, {
             value: props.chart
           });
           this.on("elechart_init", function () {
-            return _this14._chart._registerTooltip(label);
+            return _this18._chart._registerTooltip(label);
           });
         }
 
@@ -2847,7 +2902,7 @@
           });
 
           this.on("elechart_marker", function () {
-            return _this14._marker._registerTooltip(_label);
+            return _this18._marker._registerTooltip(_label);
           });
         }
       },
@@ -2856,10 +2911,10 @@
        * Add summary info to diagram
        */
       _registerSummary: function _registerSummary(props) {
-        var _this15 = this;
+        var _this19 = this;
 
         this.on('elechart_summary', function () {
-          return _this15._summary._registerSummary(props);
+          return _this19._summary._registerSummary(props);
         });
       },
 
@@ -2964,7 +3019,7 @@
        * Toggle chart data on legend click
        */
       _toggleChartHandler: function _toggleChartHandler(e) {
-        var _this16 = this;
+        var _this20 = this;
 
         var path = e.path,
             name = e.name,
@@ -2974,7 +3029,7 @@
         this._layers.eachLayer(function (layer) {
           var node = layer.getElement && layer.getElement();
 
-          toggleClass(node, _this16.options.polyline.className + ' ' + _this16.options.theme, _this16._chartEnabled);
+          toggleClass(node, _this20.options.polyline.className + ' ' + _this20.options.theme, _this20._chartEnabled);
         }); // toggle option value (eg. altitude = { 'disabled' || 'disabled' })
 
 
@@ -3048,7 +3103,7 @@
        * Update chart summary.
        */
       _updateSummary: function _updateSummary() {
-        var _this17 = this;
+        var _this21 = this;
 
         this._summary.reset();
 
@@ -3058,14 +3113,22 @@
 
         if (this.options.downloadLink && this._downloadURL) {
           // TODO: generate dynamically file content instead of using static file urls.
-          this.summaryDiv.innerHTML += '<span class="download"><a href="#">' + L._('Download') + '</a></span>';
+          this._summary._container.innerHTML += '<span class="download"><a href="#">' + L._('Download') + '</a></span>';
 
-          select('.download a', this.summaryDiv).onclick = function (e) {
+          select('.download a', this._summary._container).onclick = function (e) {
             e.preventDefault();
 
-            _this17._fireEvt('eletrack_download', {
-              downloadLink: _this17.options.downloadLink,
-              confirm: saveFile.bind(_this17, _this17._downloadURL)
+            if (e.downloadLink == 'modal' && typeof CustomEvent === "function") {
+              document.dispatchEvent(new CustomEvent("eletrack_download", {
+                detail: e
+              }));
+            } else if (e.downloadLink == 'link' || e.downloadLink === true) {
+              e.confirm();
+            }
+
+            _this21._fireEvt('eletrack_download', {
+              downloadLink: _this21.options.downloadLink,
+              confirm: saveFile.bind(_this21, _this21._downloadURL)
             });
           };
         }
@@ -3096,130 +3159,6 @@
         return this.__yTicks || Math.round(this._height() / 30);
       }
     });
-    /**
-     * Attach here some useful elevation hooks.
-     */
-
-    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;
-
-        if (pop) {
-          pop.options.className = 'elevation-popup';
-        }
-
-        if (pop && pop._content) {
-          pop._content = decodeURI(pop._content);
-          p.bindTooltip(pop._content, {
-            direction: 'auto',
-            sticky: true,
-            opacity: 1,
-            className: 'elevation-tooltip'
-          }).openTooltip();
-        }
-      });
-      this.on("eletrack_download", function (e) {
-        if (e.downloadLink == 'modal' && typeof CustomEvent === "function") {
-          document.dispatchEvent(new CustomEvent("eletrack_download", {
-            detail: e
-          }));
-        } else if (e.downloadLink == 'link' || e.downloadLink === true) {
-          e.confirm();
-        }
-      });
-      this.on('eledata_loaded', function (e) {
-        var _this18 = this;
-
-        var map = this._map;
-        var layer = e.layer;
-
-        if (!map) {
-          console.warn("Undefined elevation map object");
-          return;
-        }
-
-        map.once('layeradd', function (e) {
-          return _this18.options.autofitBounds && _this18.fitBounds(layer.getBounds());
-        });
-
-        if (L.Browser.mobile) {
-          if (this.options.polyline) layer.addTo(map);
-        } else {
-          // leaflet-geometryutil
-          this.lazyLoad(this.__LGEOMUTIL).then(function () {
-            // leaflet-almostover
-            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 _this18._mousemoveLayerHandler(e);
-                  }).on('almost:out', function (e) {
-                    return _this18._mouseoutHandler(e);
-                  });
-                }
-              });
-            } // leaflet-distance-markers
-
-
-            if (_this18.options.distanceMarkers) {
-              _this18.lazyLoad(_this18.__LDISTANCEM).then(function () {
-                return _this18.options.polyline && layer.addTo(map);
-              });
-            } else {
-              if (_this18.options.polyline) layer.addTo(map);
-            }
-          });
-        }
-      }); // Basic canvas renderer support.
-
-      var oldProto = L.Canvas.prototype._fillStroke;
-      var control = this;
-      L.Canvas.include({
-        _fillStroke: function _fillStroke(ctx, layer) {
-          if (control._layers.hasLayer(layer)) {
-            var theme = control.options.theme.replace('-theme', '');
-            var color = Colors[theme] || {};
-            var options = layer.options;
-            options.color = color.line || color.area || theme;
-            options.stroke = !!options.color;
-            oldProto.call(this, ctx, layer);
-
-            if (options.stroke && options.weight !== 0) {
-              var oldVal = ctx.globalCompositeOperation || 'source-over';
-              ctx.globalCompositeOperation = 'destination-over';
-              ctx.strokeStyle = color.outline || '#FFF';
-              ctx.lineWidth = options.weight * 1.75;
-              ctx.stroke();
-              ctx.globalCompositeOperation = oldVal;
-            }
-          } else {
-            oldProto.call(this, ctx, layer);
-          }
-        }
-      }); // Partially fix: https://github.com/Raruto/leaflet-elevation/issues/81#issuecomment-713477050
-
-      this.on('elechart_init', function () {
-        this.once('elechart_change elechart_hover', function (e) {
-          if (this._chartEnabled) {
-            this._chart._showDiagramIndicator(e.data, e.xCoord);
-
-            this._chart._showDiagramIndicator(e.data, e.xCoord);
-          }
-
-          this._updateMarker(e.data);
-        });
-      });
-    });
 
     Elevation.addInitHook(function () {
       var opts = this.options;
@@ -3900,7 +3839,19 @@
 
         return proto.call(null, string, data);
       };
-    })();
+    })(); // Alias deprecated functions
+
+
+    Elevation.addInitHook(function () {
+      this.enableDragging = this.enableBrush;
+      this.disableDragging = this.disableBrush;
+      this.loadChart = this.addTo;
+      this.loadData = this.load;
+      this.loadGPX = this.load;
+      this.loadGeoJSON = this.load;
+      this.loadXML = this.load;
+      this.loadFile = this.load;
+    });
 
     L.control.elevation = function (options) {
       return new Elevation(options);