@raruto/leaflet-elevation 1.6.9 → 1.7.3

package/README.md

@@ -140,13 +140,16 @@ _For a working example see one of the following demos:_
         // Display altitude info: true || "summary"
         altitude: true,
 
-        // Summary track info style: "line" || "multiline" || false
+        // Summary track info style: "inline" || "multiline" || false
         summary: 'multiline',
 
-        // Toggle chart ruler filter.
+        // Download link: "link" || false || "modal"
+        downloadLink: 'link',
+
+        // Toggle chart ruler filter
         ruler: true,
 
-        // Toggle chart legend filter.
+        // Toggle chart legend filter
         legend: true,
 
         // Toggle "leaflet-almostover" integration
@@ -155,6 +158,19 @@ _For a working example see one of the following demos:_
         // Toggle "leaflet-distance-markers" integration
         distanceMarkers: false,
 
+        // Display track waypoints
+        waypoints: true,
+
+        // Custom waypoint icons (associative array of <sym> tags)
+        wptIcons: {
+          '': L.divIcon({
+            className: 'elevation-waypoint-marker',
+            html: '<i class="elevation-waypoint-icon"></i>',
+            iconSize: [30, 30],
+            iconAnchor: [8, 30],
+          }),
+        },
+
         // Render chart profiles as Canvas or SVG Paths
         preferCanvas: true
 
@@ -171,6 +187,52 @@ _For a working example see one of the following demos:_
 
     </script>
     ```
+
+### FAQ
+
+<details>
+  <summary>1. How can I change the color of the elevation plot?</summary><br>
+
+There are multiple options to achieve this:
+
+* You could either use some default presets (see: theme: "lightblue-theme" option in readme file and the following file `leaflet-elevation.css` for some other default "*-theme" names).
+* check out [this example](https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_custom-theme.html)
+* Or add the following lines for custom colors.
+```css
+.elevation-control.elevation .area {
+    fill: red;
+}
+.elevation-control.elevation .background {
+    background-color: white;
+```
+</details>
+
+<details>
+  <summary>2. How to enable/disable the leaflet user interface customizations?</summary><br>
+
+These customizations are actually part of the [leaflet-ui](https://github.com/Raruto/leaflet-ui) and can be toggled on/off using e.g. the following options:
+```js
+var map = L.map('map', {
+    center: [41.4583, 12.7059],  // needs value to initialize
+    zoom: 5,                     // needs value to initialize
+    mapTypeId: 'topo',
+    mapTypeIds: ['osm', 'terrain', 'satellite', 'topo'],
+    gestureHandling: false,     // zoom with Cmd + Scroll
+    zoomControl: true,          // plus minus buttons
+    pegmanControl: false,
+    locateControl: false,
+    fullscreenControl: true,
+    layersControl: true,
+    minimapControl: false,
+    editInOSMControl: false,
+    loadingControl: false,
+    searchControl: false,
+    disableDefaultUI: false,
+    printControl: false,
+});
+```
+</details>
+
 _Related: [Leaflet-UI presets](https://github.com/raruto/leaflet-ui), [QGIS Integration](https://github.com/faunalia/trackprofile2web)_
 
 ---

package/dist/leaflet-elevation.css

@@ -33,6 +33,7 @@
   overflow: visible;
   display: block;
   touch-action: none;
+  user-select: none;
 }
 
 .elevation-control.elevation .background.zoomed .point,

package/dist/leaflet-elevation.js

@@ -172,7 +172,7 @@
       } : L.extend({
         lazy: true
       }, control.options.distanceMarkers);
-      var wptIcons = control.options.gpxOptions.marker_options.wptIcons;
+      var wptIcons = control.options.wptIcons;
       var layer = L.geoJson(data, {
         distanceMarkers: distanceMarkers,
         style: function style(feature) {
@@ -185,17 +185,18 @@
           return style;
         },
         pointToLayer: function pointToLayer(feature, latlng) {
+          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
+          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>'
+            }));
+          }
 
-          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]
           });
@@ -204,6 +205,8 @@
             marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
           }
 
+          control._addMarker(marker);
+
           control._registerCheckPoint({
             latlng: latlng,
             label: name
@@ -968,7 +971,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);
@@ -1123,6 +1131,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());
@@ -1193,6 +1203,7 @@
         var _this2 = this;
 
         var brush = function brush(e) {
+          if (!_this2._data.length) return;
           var extent = e.selection;
 
           if (extent) {
@@ -1208,6 +1219,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();
@@ -2012,22 +2024,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,
@@ -2082,6 +2078,15 @@
       sInterpolation: "curveStepAfter",
       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]
+        })
+      },
       xAttr: "dist",
       xLabel: "km",
       xTicks: undefined,
@@ -2103,7 +2108,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.6.8/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
@@ -2111,7 +2116,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;
         }
 
@@ -2150,12 +2155,46 @@
        */
       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() {
+        if (this._events && this._events.elechart_updated) {
+          this._events.elechart_updated.forEach(function (e) {
+            return controlElevation.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();
+        }
       },
 
       /**
@@ -2238,6 +2277,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);
@@ -2539,7 +2579,7 @@
         var _this8 = this;
 
         each(coords, function (point) {
-          _this8._addPoint(point.lat, point.lng, point.meta.ele);
+          _this8._addPoint(point.lat, point.lng, typeof point.alt !== "undefined" ? point.alt : point.meta.ele);
 
           _this8._fireEvt("elepoint_added", {
             point: point,
@@ -2577,6 +2617,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.
@@ -3082,7 +3125,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");