@raruto/leaflet-elevation 1.7.1 → 1.7.5

package/README.md

@@ -158,10 +158,10 @@ _For a working example see one of the following demos:_
         // Toggle "leaflet-distance-markers" integration
         distanceMarkers: false,
 
-        // Display track waypoints
+        // Display track waypoints: true || "markers" || "dots" || false
         waypoints: true,
 
-        // Custom waypoint icons (associative array of <sym> tags)
+        // Toggle custom waypoint icons: true || { associative array of <sym> tags } || false
         wptIcons: {
           '': L.divIcon({
             className: 'elevation-waypoint-marker',
@@ -171,6 +171,9 @@ _For a working example see one of the following demos:_
           }),
         },
 
+        // Display waypoint labels: true || "markers" || "dots" || false
+        wptLabels: true,
+
         // Render chart profiles as Canvas or SVG Paths
         preferCanvas: true
 

package/dist/leaflet-elevation.js

@@ -172,7 +172,9 @@
       } : L.extend({
         lazy: true
       }, control.options.distanceMarkers);
-      var wptIcons = control.options.wptIcons;
+      var _control$options = control.options,
+          wptIcons = _control$options.wptIcons,
+          wptLabels = _control$options.wptLabels;
       var layer = L.geoJson(data, {
         distanceMarkers: distanceMarkers,
         style: function style(feature) {
@@ -185,39 +187,47 @@
           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 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]
-          });
+          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>'
+              }));
+            }
 
-          if (name || desc) {
-            marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
-          }
+            var marker = L.marker(latlng, {
+              icon: wptIcons[sym]
+            });
 
-          control._addMarker(marker);
+            if ([true, 'markers'].includes(wptLabels) && (name || desc)) {
+              marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
+            }
 
-          control._registerCheckPoint({
-            latlng: latlng,
-            label: name
-          }, true);
+            control._addMarker(marker);
 
-          control.fire('waypoint_added', {
-            point: marker,
-            element: latlng,
-            properties: prop
-          });
-          return 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
@@ -971,7 +981,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);
@@ -2082,6 +2097,7 @@
           iconAnchor: [8, 30]
         })
       },
+      wptLabels: true,
       xAttr: "dist",
       xLabel: "km",
       xTicks: undefined,
@@ -2103,7 +2119,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.5/libs/leaflet-distance-marker.min.js',
 
       /*
        * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -2111,7 +2127,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;
         }
 
@@ -2161,9 +2177,11 @@
         this._updateChart();
       },
       _clearChart: function _clearChart() {
+        var _this2 = this;
+
         if (this._events && this._events.elechart_updated) {
           this._events.elechart_updated.forEach(function (e) {
-            return controlElevation.off('elechart_updated', e.fn, e.ctx);
+            return _this2.off('elechart_updated', e.fn, e.ctx);
           });
         }
 
@@ -2288,9 +2306,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 || {});
       },
 
@@ -2341,14 +2360,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
           });
@@ -2375,7 +2394,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");
@@ -2390,11 +2409,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);
         });
       },
 
@@ -2402,7 +2421,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;
@@ -2410,10 +2429,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);
           });
         });
       },
@@ -2423,7 +2442,7 @@
        * Called on control.addTo(map).
        */
       onAdd: function onAdd(map) {
-        var _this5 = this;
+        var _this6 = this;
 
         this._map = map;
 
@@ -2443,27 +2462,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;
       },
@@ -2508,7 +2527,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;
@@ -2525,7 +2544,7 @@
 
             case 'MultiLineString':
               each(geom.coordinates, function (coords) {
-                return _this6._addGeoJSONData(coords);
+                return _this7._addGeoJSONData(coords);
               });
 
               break;
@@ -2537,7 +2556,7 @@
 
         if (d.type === "FeatureCollection") {
           each(d.features, function (feature) {
-            return _this6._addData(feature);
+            return _this7._addData(feature);
           });
         }
 
@@ -2550,14 +2569,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
           });
         });
 
@@ -2571,14 +2590,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
           });
         });
 
@@ -2729,17 +2748,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) {
@@ -2913,10 +2932,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);
         });
       },
 
@@ -2924,10 +2943,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);
         });
       },
 
@@ -2935,10 +2954,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);
         });
       },
 
@@ -2946,10 +2965,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);
         });
       },
 
@@ -2957,14 +2976,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);
           });
         }
 
@@ -2974,7 +2993,7 @@
           });
 
           this.on("elechart_marker", function () {
-            return _this14._marker._registerFocusLabel(_label);
+            return _this15._marker._registerFocusLabel(_label);
           });
         }
       },
@@ -2983,10 +3002,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);
         });
       },
 
@@ -3093,7 +3112,7 @@
        * Toggle chart data on legend click
        */
       _toggleChartHandler: function _toggleChartHandler(e) {
-        var _this16 = this;
+        var _this17 = this;
 
         var path = e.path,
             name = e.name,
@@ -3103,7 +3122,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' })
 
 
@@ -3177,7 +3196,7 @@
        * Update chart summary.
        */
       _updateSummary: function _updateSummary() {
-        var _this17 = this;
+        var _this18 = this;
 
         this._summary.reset();
 
@@ -3192,9 +3211,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)
             });
           };
         }
@@ -3258,7 +3277,7 @@
         }
       });
       this.on('eledata_loaded', function (e) {
-        var _this18 = this;
+        var _this19 = this;
 
         var map = this._map;
         var layer = e.layer;
@@ -3269,7 +3288,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) {
@@ -3278,28 +3297,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);
             }
           });
         }