@raruto/leaflet-elevation 1.9.1 → 1.9.4

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" />
@@ -248,6 +239,7 @@ var map = L.map('map', {
 - https://wordpress.org/plugins/os-datahub-maps/
 - https://wordpress.org/plugins/extensions-leaflet-map/
 - https://github.com/der-stefan/OpenTopoMap
+- https://gpx.n-peloton.fr/
 
 </details>
     
@@ -256,7 +248,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;
 
@@ -1706,7 +1707,11 @@
       collapsed: false,
       detached: true,
       distance: true,
-      distanceMarkers: false,
+      distanceMarkers: {
+        lazy: true,
+        distance: true,
+        arrow: false
+      },
       decimalsX: 2,
       decimalsY: 0,
       dragging: !L.Browser.mobile,
@@ -1766,7 +1771,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 +1798,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.1/libs/leaflet-distance-marker.min.js',
+      __LDISTANCEM: 'https://unpkg.com/@raruto/leaflet-elevation@1.9.4/libs/leaflet-distance-marker.min.js',
 
       /*
        * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -1958,9 +1963,7 @@
         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
-        };
+        if (this.options.distanceMarkers === true) this.options.distanceMarkers = Options.distanceMarkers;
 
         this._markedSegments.setStyle(this.options.polylineSegments); // Leaflet canvas renderer colors
 
@@ -2225,23 +2228,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 +2602,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,