@raruto/leaflet-elevation 1.7.0 → 1.7.4

package/dist/leaflet-elevation.js

@@ -172,7 +172,8 @@
       } : L.extend({
         lazy: true
       }, control.options.distanceMarkers);
-      var wptIcons = control.options.gpxOptions.marker_options.wptIcons;
+      var wptIcons = control.options.wptIcons;
+      var wptLabels = control.options.wptLabels;
       var layer = L.geoJson(data, {
         distanceMarkers: distanceMarkers,
         style: function style(feature) {
@@ -185,37 +186,53 @@
           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 : '';
-          var name = prop.name ? prop.name : '';
-          var sym = (prop.sym ? prop.sym : name).replace(' ', '-').replace('"', '').replace("'", '').toLowerCase(); // generate appropriate icon symbol or retrieve it from cache
-
-          wptIcons[sym] = wptIcons[sym] ? wptIcons[sym] : L.divIcon({
-            className: 'elevation-waypoint-marker',
-            html: '<i class="elevation-waypoint-icon ' + sym + '"></i>',
-            iconSize: [30, 30],
-            iconAnchor: [8, 30]
-          });
-          var marker = L.marker(latlng, {
-            icon: wptIcons[sym]
-          });
+          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 waypoint lables (markers and dots)
+
+          if (!wptLabels) {
+            name = '';
+            desc = '';
+          } // Handle chart waypoints (dots)
+
+
+          if ([true, "dots"].includes(control.options.waypoints)) {
+            control._registerCheckPoint({
+              latlng: latlng,
+              label: 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>'
+              }));
+            }
 
-          if (name || desc) {
-            marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
-          }
+            var marker = L.marker(latlng, {
+              icon: wptIcons[sym]
+            });
 
-          control._registerCheckPoint({
-            latlng: latlng,
-            label: name
-          }, true);
+            if (name || desc) {
+              marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
+            }
 
-          control.fire('waypoint_added', {
-            point: marker,
-            element: latlng,
-            properties: prop
-          });
-          return marker;
+            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
@@ -969,7 +986,12 @@
         var _height = height - margins.top - margins.bottom;
 
         svg.attr("viewBox", "0 0 ".concat(width, " ").concat(height)).attr("width", width).attr("height", height);
-        g.attr("transform", "translate(" + margins.left + "," + margins.top + ")");
+        g.attr("transform", "translate(" + margins.left + "," + margins.top + ")"); // Partially fix: https://github.com/Raruto/leaflet-elevation/issues/123
+
+        if (/Mac|iPod|iPhone|iPad/.test(navigator.platform) && /AppleWebkit/i.test(navigator.userAgent)) {
+          canvas.style("transform", "translate(" + margins.left + "px," + margins.top + "px)");
+        }
+
         clipRect.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);
@@ -1124,6 +1146,8 @@
       clear: function clear() {
         this._resetDrag();
 
+        this._hideDiagramIndicator();
+
         this._area.selectAll('path').attr("d", "M0 0");
 
         this._context.clearRect(0, 0, this._width(), this._height());
@@ -1194,6 +1218,7 @@
         var _this2 = this;
 
         var brush = function brush(e) {
+          if (!_this2._data.length) return;
           var extent = e.selection;
 
           if (extent) {
@@ -1209,6 +1234,7 @@
         };
 
         var focus = function focus(e) {
+          if (!_this2._data.length) return;
           if (e.type == 'brush' && !e.sourceEvent) return;
 
           var rect = _this2._chart.panes.brush.select('.overlay').node();
@@ -2013,22 +2039,6 @@
       elevationDiv: "#elevation-div",
       followMarker: true,
       forceAxisBounds: false,
-      gpxOptions: {
-        async: true,
-        marker_options: {
-          startIconUrl: null,
-          endIconUrl: null,
-          shadowUrl: null,
-          wptIcons: {
-            '': L.divIcon({
-              className: 'elevation-waypoint-marker',
-              html: '<i class="elevation-waypoint-icon"></i>',
-              iconSize: [30, 30],
-              iconAnchor: [8, 30]
-            })
-          }
-        }
-      },
       height: 200,
       heightFactor: 1,
       imperial: false,
@@ -2084,6 +2094,15 @@
       sRange: undefined,
       width: 600,
       waypoints: true,
+      wptIcons: {
+        '': L.divIcon({
+          className: 'elevation-waypoint-marker',
+          html: '<i class="elevation-waypoint-icon"></i>',
+          iconSize: [30, 30],
+          iconAnchor: [8, 30]
+        })
+      },
+      wptLabels: true,
       xAttr: "dist",
       xLabel: "km",
       xTicks: undefined,
@@ -2105,7 +2124,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.0/libs/leaflet-distance-marker.min.js',
+      __LDISTANCEM: 'https://unpkg.com/@raruto/leaflet-elevation@1.7.3/libs/leaflet-distance-marker.min.js',
 
       /*
        * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -2113,7 +2132,7 @@
       addData: function addData(d, layer) {
         var _this = this;
 
-        if ((typeof layer === "undefined" || layer === null) && d.on) {
+        if (typeof layer === "undefined" && d.on) {
           layer = d;
         }
 
@@ -2152,12 +2171,48 @@
        */
       clear: function clear() {
         if (this._marker) this._marker.remove();
-        if (this._chart) this._chart.clear();
-        if (this._layers) this._layers.clearLayers();
+        if (this._chart) this._clearChart();
+        if (this._layers) this._clearLayers();
+        if (this._markers) this._clearMarkers();
         this._data = [];
         this.track_info = {};
 
         this._fireEvt("eledata_clear");
+
+        this._updateChart();
+      },
+      _clearChart: function _clearChart() {
+        var _this2 = this;
+
+        if (this._events && this._events.elechart_updated) {
+          this._events.elechart_updated.forEach(function (e) {
+            return _this2.off('elechart_updated', e.fn, e.ctx);
+          });
+        }
+
+        if (this._chart && this._chart._container) {
+          this._chart._container.selectAll('g.point .point').remove();
+
+          this._chart.clear();
+        }
+      },
+      _clearLayers: function _clearLayers() {
+        if (this._layers && this._layers.eachLayer) {
+          this._layers.eachLayer(function (l) {
+            return l.remove();
+          });
+
+          this._layers.clearLayers();
+        }
+      },
+      _clearMarkers: function _clearMarkers() {
+        if (this._markers && this._markers.eachLayer) {
+          this._markers.eachLayer(function (l) {
+            return l.remove();
+          });
+
+          this._markers.clearLayers();
+        }
       },
 
       /**
@@ -2240,6 +2295,7 @@
       initialize: function initialize(options) {
         this._data = [];
         this._layers = L.featureGroup();
+        this._markers = L.featureGroup();
         this._markedSegments = L.polyline([]);
         this._chartEnabled = true, this.track_info = {};
         this.options = deepMerge({}, this.options, options);
@@ -2255,9 +2311,10 @@
         // 	this._updateChart   = _.debounce(this._updateChart,   300, this);
         // 	this._updateSummary = _.debounce(this._updateSummary, 300, this);
         // }
-        // Leaflet canvas renderer colors
 
 
+        if (this.options.wptIcons === true) this.options.wptIcons = Options.wptIcons; // Leaflet canvas renderer colors
+
         L.extend(Colors, this.options.colors || {});
       },
 
@@ -2308,14 +2365,14 @@
        * Load data from a remote url.
        */
       loadFile: function loadFile(url) {
-        var _this2 = this;
+        var _this3 = this;
 
         fetch(url).then(function (response) {
           return response.text();
         }).then(function (data) {
-          _this2._downloadURL = url; // TODO: handle multiple urls?
+          _this3._downloadURL = url; // TODO: handle multiple urls?
 
-          _this2.loadData(data, {
+          _this3.loadData(data, {
             lazy: false,
             defer: false
           });
@@ -2342,7 +2399,7 @@
        * Load raw XML data.
        */
       loadXML: function loadXML(data) {
-        var _this3 = this;
+        var _this4 = this;
 
         Elevation._togeojsonLazyLoader = lazyLoader(this.__TOGEOJSON, typeof toGeoJSON !== 'function' || !this.options.lazyLoadJS, Elevation._togeojsonLazyLoader).then(function () {
           var xml = new DOMParser().parseFromString(data, "text/xml");
@@ -2357,11 +2414,11 @@
 
           if (name[0]) {
             geojson.name = name[0].innerHTML;
-          } else if (_this3._downloadURL) {
-            geojson.name = _this3._downloadURL.split('/').pop().split('#')[0].split('?')[0];
+          } else if (_this4._downloadURL) {
+            geojson.name = _this4._downloadURL.split('/').pop().split('#')[0].split('?')[0];
           }
 
-          return _this3.loadGeoJSON(geojson, _this3);
+          return _this4.loadGeoJSON(geojson, _this4);
         });
       },
 
@@ -2369,7 +2426,7 @@
        * Wait for chart container visible before download data.
        */
       loadLazy: function loadLazy(data, opts) {
-        var _this4 = this;
+        var _this5 = this;
 
         opts = L.extend({}, this.options.loadData, opts);
         var elem = opts.lazy.parentNode ? opts.lazy : this.placeholder;
@@ -2377,10 +2434,10 @@
         waitHolder(elem).then(function () {
           opts.lazy = false;
 
-          _this4.loadData(data, opts);
+          _this5.loadData(data, opts);
 
-          _this4.once('eledata_loaded', function () {
-            return _this4.placeholder.parentNode.removeChild(elem);
+          _this5.once('eledata_loaded', function () {
+            return _this5.placeholder.parentNode.removeChild(elem);
           });
         });
       },
@@ -2390,7 +2447,7 @@
        * Called on control.addTo(map).
        */
       onAdd: function onAdd(map) {
-        var _this5 = this;
+        var _this6 = this;
 
         this._map = map;
 
@@ -2410,27 +2467,27 @@
         }
 
         Elevation._d3LazyLoader = lazyLoader(this.__D3, (typeof d3 === "undefined" ? "undefined" : _typeof(d3)) !== 'object' || !this.options.lazyLoadJS, Elevation._d3LazyLoader).then(function () {
-          _this5._initButton(container);
+          _this6._initButton(container);
 
-          _this5._initChart(container);
+          _this6._initChart(container);
 
-          _this5._initSummary(container);
+          _this6._initSummary(container);
 
-          _this5._initMarker(map);
+          _this6._initMarker(map);
 
-          _this5._initLayer(map);
+          _this6._initLayer(map);
 
-          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);
+          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);
 
-          on(map.getContainer(), 'mousewheel', _this5._resetDrag, _this5);
+          on(map.getContainer(), 'mousewheel', _this6._resetDrag, _this6);
 
-          on(map.getContainer(), 'touchstart', _this5._resetDrag, _this5);
+          on(map.getContainer(), 'touchstart', _this6._resetDrag, _this6);
 
-          _this5.on('eledata_added eledata_loaded', _this5._updateChart, _this5).on('eledata_added eledata_loaded', _this5._updateSummary, _this5);
+          _this6.on('eledata_added eledata_loaded', _this6._updateChart, _this6).on('eledata_added eledata_loaded', _this6._updateSummary, _this6);
 
-          _this5._updateChart();
+          _this6._updateChart();
 
-          _this5._updateSummary();
+          _this6._updateSummary();
         });
         return container;
       },
@@ -2475,7 +2532,7 @@
        * Parsing data either from GPX or GeoJSON and update the diagram data
        */
       _addData: function _addData(d) {
-        var _this6 = this;
+        var _this7 = this;
 
         if (!d) {
           return;
@@ -2492,7 +2549,7 @@
 
             case 'MultiLineString':
               each(geom.coordinates, function (coords) {
-                return _this6._addGeoJSONData(coords);
+                return _this7._addGeoJSONData(coords);
               });
 
               break;
@@ -2504,7 +2561,7 @@
 
         if (d.type === "FeatureCollection") {
           each(d.features, function (feature) {
-            return _this6._addData(feature);
+            return _this7._addData(feature);
           });
         }
 
@@ -2517,14 +2574,14 @@
        * Parsing of GeoJSON data lines and their elevation in z-coordinate
        */
       _addGeoJSONData: function _addGeoJSONData(coords) {
-        var _this7 = this;
+        var _this8 = this;
 
         each(coords, function (point) {
-          _this7._addPoint(point[1], point[0], point[2]);
+          _this8._addPoint(point[1], point[0], point[2]);
 
-          _this7._fireEvt("elepoint_added", {
+          _this8._fireEvt("elepoint_added", {
             point: point,
-            index: _this7._data.length - 1
+            index: _this8._data.length - 1
           });
         });
 
@@ -2538,14 +2595,14 @@
        * Parsing function for GPX data and their elevation in z-coordinate
        */
       _addGPXData: function _addGPXData(coords) {
-        var _this8 = this;
+        var _this9 = this;
 
         each(coords, function (point) {
-          _this8._addPoint(point.lat, point.lng, point.meta.ele);
+          _this9._addPoint(point.lat, point.lng, typeof point.alt !== "undefined" ? point.alt : point.meta.ele);
 
-          _this8._fireEvt("elepoint_added", {
+          _this9._fireEvt("elepoint_added", {
             point: point,
-            index: _this8._data.length - 1
+            index: _this9._data.length - 1
           });
         });
 
@@ -2579,6 +2636,9 @@
       _addLayer: function _addLayer(layer) {
         if (layer) this._layers.addLayer(layer);
       },
+      _addMarker: function _addMarker(marker) {
+        if (marker) this._markers.addLayer(marker);
+      },
 
       /**
        * Adds the control to the given "detached" div.
@@ -2693,17 +2753,17 @@
         this._fireEvt("elechart_init");
       },
       _initLayer: function _initLayer() {
-        var _this9 = this;
+        var _this10 = 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, _this10.options.polyline.className + ' ' + _this10.options.theme, e.type == 'layeradd');
 
-          toggleEvent(layer, "mousemove", _this9._mousemoveLayerHandler.bind(_this9), e.type == 'layeradd');
+          toggleEvent(layer, "mousemove", _this10._mousemoveLayerHandler.bind(_this10), e.type == 'layeradd');
 
-          toggleEvent(layer, "mouseout", _this9._mouseoutHandler.bind(_this9), e.type == 'layeradd');
+          toggleEvent(layer, "mouseout", _this10._mouseoutHandler.bind(_this10), e.type == 'layeradd');
         });
       },
       _initMarker: function _initMarker(map) {
@@ -2877,10 +2937,10 @@
        * Add a waypoint marker to the diagram
        */
       _registerCheckPoint: function _registerCheckPoint(props) {
-        var _this10 = this;
+        var _this11 = this;
 
         this.on("elechart_updated", function () {
-          return _this10._chart._registerCheckPoint(props);
+          return _this11._chart._registerCheckPoint(props);
         });
       },
 
@@ -2888,10 +2948,10 @@
        * Add chart profile to diagram
        */
       _registerAreaPath: function _registerAreaPath(props) {
-        var _this11 = this;
+        var _this12 = this;
 
         this.on("elechart_init", function () {
-          return _this11._chart._registerAreaPath(props);
+          return _this12._chart._registerAreaPath(props);
         });
       },
 
@@ -2899,10 +2959,10 @@
        * Add chart grid to diagram
        */
       _registerAxisGrid: function _registerAxisGrid(props) {
-        var _this12 = this;
+        var _this13 = this;
 
         this.on("elechart_axis", function () {
-          return _this12._chart._registerAxisGrid(props);
+          return _this13._chart._registerAxisGrid(props);
         });
       },
 
@@ -2910,10 +2970,10 @@
        * Add chart axis to diagram
        */
       _registerAxisScale: function _registerAxisScale(props) {
-        var _this13 = this;
+        var _this14 = this;
 
         this.on("elechart_axis", function () {
-          return _this13._chart._registerAxisScale(props);
+          return _this14._chart._registerAxisScale(props);
         });
       },
 
@@ -2921,14 +2981,14 @@
        * Add chart or marker tooltip info
        */
       _registerFocusLabel: function _registerFocusLabel(props) {
-        var _this14 = this;
+        var _this15 = this;
 
         if (props.chart) {
           var label = L.extend({}, props, {
             value: props.chart
           });
           this.on("elechart_init", function () {
-            return _this14._chart._registerFocusLabel(label);
+            return _this15._chart._registerFocusLabel(label);
           });
         }
 
@@ -2938,7 +2998,7 @@
           });
 
           this.on("elechart_marker", function () {
-            return _this14._marker._registerFocusLabel(_label);
+            return _this15._marker._registerFocusLabel(_label);
           });
         }
       },
@@ -2947,10 +3007,10 @@
        * Add summary info to diagram
        */
       _registerSummary: function _registerSummary(props) {
-        var _this15 = this;
+        var _this16 = this;
 
         this.on('elechart_summary', function () {
-          return _this15._summary._registerSummary(props);
+          return _this16._summary._registerSummary(props);
         });
       },
 
@@ -3057,7 +3117,7 @@
        * Toggle chart data on legend click
        */
       _toggleChartHandler: function _toggleChartHandler(e) {
-        var _this16 = this;
+        var _this17 = this;
 
         var path = e.path,
             name = e.name,
@@ -3067,7 +3127,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, _this17.options.polyline.className + ' ' + _this17.options.theme, _this17._chartEnabled);
         }); // toggle option value (eg. altitude = { 'disabled' || 'disabled' })
 
 
@@ -3084,7 +3144,9 @@
        * Calculates [x, y] domain and then update chart.
        */
       _updateChart: function _updateChart() {
-        if (!this._data.length || !this._container) return;
+        if (
+        /*!this._data.length ||*/
+        !this._container) return;
 
         this._fireEvt("elechart_axis");
 
@@ -3139,7 +3201,7 @@
        * Update chart summary.
        */
       _updateSummary: function _updateSummary() {
-        var _this17 = this;
+        var _this18 = this;
 
         this._summary.reset();
 
@@ -3154,9 +3216,9 @@
           select('.download a', this.summaryDiv).onclick = function (e) {
             e.preventDefault();
 
-            _this17._fireEvt('eletrack_download', {
-              downloadLink: _this17.options.downloadLink,
-              confirm: saveFile.bind(_this17, _this17._downloadURL)
+            _this18._fireEvt('eletrack_download', {
+              downloadLink: _this18.options.downloadLink,
+              confirm: saveFile.bind(_this18, _this18._downloadURL)
             });
           };
         }
@@ -3220,7 +3282,7 @@
         }
       });
       this.on('eledata_loaded', function (e) {
-        var _this18 = this;
+        var _this19 = this;
 
         var map = this._map;
         var layer = e.layer;
@@ -3231,7 +3293,7 @@
         }
 
         map.once('layeradd', function (e) {
-          return _this18.options.autofitBounds && _this18.fitBounds(layer.getBounds());
+          return _this19.options.autofitBounds && _this19.fitBounds(layer.getBounds());
         });
 
         if (L.Browser.mobile) {
@@ -3240,28 +3302,28 @@
           // leaflet-geometryutil
           Elevation._geomutilLazyLoader = lazyLoader(this.__LGEOMUTIL, typeof L.GeometryUtil !== 'function' || !this.options.lazyLoadJS, Elevation._geomutilLazyLoader).then(function () {
             // leaflet-almostover
-            if (_this18.options.almostOver) {
-              Elevation._almostoverLazyLoader = lazyLoader(_this18.__LALMOSTOVER, typeof L.Handler.AlmostOver !== 'function' || !_this18.options.lazyLoadJS, Elevation._almostoverLazyLoader).then(function () {
+            if (_this19.options.almostOver) {
+              Elevation._almostoverLazyLoader = lazyLoader(_this19.__LALMOSTOVER, typeof L.Handler.AlmostOver !== 'function' || !_this19.options.lazyLoadJS, Elevation._almostoverLazyLoader).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);
+                    return _this19._mousemoveLayerHandler(e);
                   }).on('almost:out', function (e) {
-                    return _this18._mouseoutHandler(e);
+                    return _this19._mouseoutHandler(e);
                   });
                 }
               });
             } // leaflet-distance-markers
 
 
-            if (_this18.options.distanceMarkers) {
-              Elevation._distanceMarkersLazyLoader = lazyLoader(_this18.__LDISTANCEM, typeof L.DistanceMarkers !== 'function' || !_this18.options.lazyLoadJS, Elevation._distanceMarkersLazyLoader).then(function () {
-                return _this18.options.polyline && layer.addTo(map);
+            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);
               });
             } else {
-              if (_this18.options.polyline) layer.addTo(map);
+              if (_this19.options.polyline) layer.addTo(map);
             }
           });
         }