@raruto/leaflet-elevation 1.9.0 → 1.9.3

package/README.md

@@ -17,38 +17,29 @@ _For a working example see one of the following demos:_
 - [loading .geojson file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-data.html)
 - [loading .kml file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_kml-data.html)
 - [loading .tcx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_tcx-data.html)
-- [loading strings](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_string-data.html)
-- [loading geojson group](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-group.html)
-- [loading local .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_upload-gpx.html)
+- [loading a local .gpx file](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_upload-gpx.html)
+- [loading data from a textarea](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_string-data.html)
+- [loading individual .geojson tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-group.html)
+- [loading individual .gpx tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-tracks.html)
+- [loading multiple .gpx tracks (hover to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html)
+- [loading multiple .gpx tracks (click to toggle)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-charts.html)
+- [loading heart rate data (coding a custom plugin)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
+- [loading a dynamic runner (coding a custom plugin)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_dynamic-runner.html)
+- [snapping mouse over layer buffer (leaflet-almostover)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_almost-over.html)
+- [translating plugin labels (leaflet-i18n)](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_i18n-strings.html)
+- [using .gpx waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_gpx-waypoints.html)
+- [using .geojson waypoint icons](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-waypoints.html)
 
 <br/>
 
-- [custom chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_extended-ui.html)
+- [autohide map](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-map.html)
+- [autohide chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-chart.html)
+- [collapsible button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_close-button.html)
 - [custom colors](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
 - [custom summary](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-summary.html)
-- [close button](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_close-button.html)
+- [follow marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_follow-marker.html)
 - [slope chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_slope-chart.html)
 - [speed chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_speed-chart.html)
-- [i18n strings](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_i18n-strings.html)
-
-<br/>
-
-- [hoverable chart / hidden map](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-map.html)
-- [hoverable chart / hidden chart](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hidden-chart.html)
-- [hoverable tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html)
-- [toggable tracks](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-tracks.html)
-- [toggable charts](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_toggable-charts.html)
-
-<br/>
-
-- [waypoint icons / gpx](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_gpx-waypoints.html)
-- [waypoint icons / geojson](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_geojson-waypoints.html)
-
-<br/>
-
-- [almost over](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_almost-over.html)
-- [follow marker](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_follow-marker.html)
-- [dynamic runner](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_dynamic-runner.html)
 
 ---
 
@@ -69,8 +60,8 @@ _For a working example see one of the following demos:_
     <style> html, body, #map, #elevation-div { height: 100%; width: 100%; padding: 0; margin: 0; } #map { height: 75%; } #elevation-div {	height: 25%; font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; } </style>
 
     <!-- leaflet-ui -->
-    <script src="https://unpkg.com/leaflet@1.3.2/dist/leaflet.js"></script>
-    <script src="https://unpkg.com/leaflet-ui@0.2.0/dist/leaflet-ui.js"></script>
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet-ui@0.5.1/dist/leaflet-ui.js"></script>
 
     <!-- leaflet-elevation -->
     <link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.css" />
@@ -256,7 +247,7 @@ _Related: [Leaflet-UI presets](https://github.com/raruto/leaflet-ui), [QGIS Inte
 ---
 
 **Compatibile with:**
-[![Leaflet 1.x compatible!](https://img.shields.io/badge/Leaflet-1.6.0-1EB300.svg?style=flat)](http://leafletjs.com/reference.html)
+[![Leaflet 1.x compatible!](https://img.shields.io/badge/Leaflet-1.7.0-1EB300.svg?style=flat)](http://leafletjs.com/reference.html)
 [![d3.js v6 compatibile!](https://img.shields.io/badge/d3.js-6.5-1EB300.svg?style=flat)](https://www.npmjs.com/package/d3)
 [![@tmcw/togeojson v4.5.0 compatibile!](https://img.shields.io/badge/@tmcw/togeojson-4.5-1EB300.svg?style=flat)](https://www.npmjs.com/package/@tmcw/togeojson)
 

package/dist/leaflet-elevation.js

@@ -394,6 +394,7 @@
           _ref4$length = _ref4.length,
           length = _ref4$length === void 0 ? 0 : _ref4$length;
       return function (g) {
+        g.attr("class", "height-focus-group");
         var line = g.select('.height-focus.line');
         var circle = g.select('.height-focus.circle-lower');
         var text = g.select('.height-focus-label');
@@ -1557,7 +1558,6 @@
         switch (this.options.marker) {
           case 'elevation-line':
             // this._container = d3.create("g").attr("class", "height-focus-group");
-            this._container = d3.select(map.getPane('elevationPane')).select("svg > g").attr("class", "height-focus-group");
             break;
 
           case 'position-marker':
@@ -1578,8 +1578,7 @@
 
         switch (this.options.marker) {
           case 'elevation-line':
-            this._container.call(PositionMarker({}));
-
+            this._container = d3.select(map.getPane('elevationPane')).select("svg > g").call(PositionMarker({}));
             break;
 
           case 'position-marker':
@@ -1605,21 +1604,23 @@
 
         switch (this.options.marker) {
           case 'elevation-line':
-            var point = this._map.latLngToLayerPoint(this._latlng);
+            if (this._container) {
+              var point = this._map.latLngToLayerPoint(this._latlng);
 
-            point = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
+              point = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
 
-            this._container.classed("leaflet-hidden", false);
+              this._container.classed("leaflet-hidden", false);
 
-            this._container.call(PositionMarker({
-              theme: this.options.theme,
-              xCoord: point.x,
-              yCoord: point.y,
-              length: point.y - this._height() / props.maxElevation * point.z,
-              // normalized Y
-              labels: this._labels,
-              item: point
-            }));
+              this._container.call(PositionMarker({
+                theme: this.options.theme,
+                xCoord: point.x,
+                yCoord: point.y,
+                length: point.y - this._height() / props.maxElevation * point.z,
+                // normalized Y
+                labels: this._labels,
+                item: point
+              }));
+            }
 
             break;
 
@@ -1766,7 +1767,7 @@
       wptIcons: {
         '': L.divIcon({
           className: 'elevation-waypoint-marker',
-          html: '<i class="elevation-waypoint-icon"></i>',
+          html: '<i class="elevation-waypoint-icon default"></i>',
           iconSize: [30, 30],
           iconAnchor: [8, 30]
         })
@@ -1793,7 +1794,7 @@
       __TOGEOJSON: 'https://unpkg.com/@tmcw/togeojson@4.5.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.9.0/libs/leaflet-distance-marker.min.js',
+      __LDISTANCEM: 'https://unpkg.com/@raruto/leaflet-elevation@1.9.3/libs/leaflet-distance-marker.min.js',
 
       /*
        * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -2225,23 +2226,6 @@
       _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();
-          }
-        }
-      },
 
       /**
        * Initialize "L.AlmostOver" integration
@@ -2616,13 +2600,21 @@
               });
 
               if ([true, 'markers'].includes(wptLabels) && (name || desc)) {
-                marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
+                var content = decodeURI("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : ''));
+                marker.bindPopup(content, {
+                  className: 'elevation-popup',
+                  keepInView: true
+                }).openPopup();
+                marker.bindTooltip(content, {
+                  className: 'elevation-tooltip',
+                  direction: 'auto',
+                  sticky: true,
+                  opacity: 1
+                }).openTooltip();
               }
 
               control._addMarker(marker);
 
-              control._bindPopup(marker);
-
               control.fire('waypoint_added', {
                 point: marker,
                 element: latlng,
@@ -3113,19 +3105,20 @@
 
           select('.download a', this._summary._container).onclick = function (e) {
             e.preventDefault();
+            var event = {
+              downloadLink: _this20.options.downloadLink,
+              confirm: saveFile.bind(_this20, _this20._downloadURL)
+            };
 
-            if (e.downloadLink == 'modal' && typeof CustomEvent === "function") {
+            if (_this20.options.downloadLink == 'modal' && typeof CustomEvent === "function") {
               document.dispatchEvent(new CustomEvent("eletrack_download", {
-                detail: e
+                detail: event
               }));
-            } else if (e.downloadLink == 'link' || e.downloadLink === true) {
-              e.confirm();
+            } else if (_this20.options.downloadLink == 'link' || _this20.options.downloadLink === true) {
+              event.confirm();
             }
 
-            _this20._fireEvt('eletrack_download', {
-              downloadLink: _this20.options.downloadLink,
-              confirm: saveFile.bind(_this20, _this20._downloadURL)
-            });
+            _this20._fireEvt('eletrack_download', event);
           };
         }
       },