version 1.3.0

Author: arg0navt

README.md

@@ -83,6 +83,7 @@ yarn add leaflet-react-track-player
 | useControl | Bollean | false | Show or hide control panel |
 | streamData | Bollean | false | Update player after add new points |
 | showDots | Bollean | false | Show or hide points in progress line |
+| defaultSpeed | Number | undefined | Constant for speed (pixel/second) |
 | callbackFinish | Function  | () => {} | Called after one full track run  |
 | callbackNext | Function  | () => {} | Called after next point in the polyline is reached  |
 | callbackPrev | Function  | () => {} | Called after previous point in the polyline is reached   |

lib/index.js

@@ -318,7 +318,7 @@ var LeafletReactTrackPlayer = function (_MapLayer) {
           iconSize: [35, 35]
         });
       };
-      var course = this.props.customMarker && this.props.customCourse && this.state.track[0] && this.state.track[0].course ? this.state.track[0].course : null;
+      var course = this.props.customMarker && this.props.customCourse && this.props.track[0] && this.props.track[0].course ? this.props.track[0].course : null;
       var finishMarker = _leaflet2.default.marker(this.props.track[0], {
         icon: this.createIcon(course)
       });
@@ -327,7 +327,8 @@ var LeafletReactTrackPlayer = function (_MapLayer) {
       var snakePolyline = _leaflet2.default.multiColorsPolyline(this.props.track, _extends({}, paramsForMultiPolyline(this.props), {
         timeFormat: this.props.timeFormat,
         progressFormat: this.props.progressFormat,
-        startPosition: this.props.startPosition
+        startPosition: this.props.startPosition,
+        defaultSpeed: this.props.defaultSpeed
       }));
       this.props.leaflet.map.addLayer(snakePolyline);
       return {
@@ -353,7 +354,7 @@ var LeafletReactTrackPlayer = function (_MapLayer) {
       if (fromProps.track.length !== toProps.track.length && this.state.activeStream) {
         this.setState({ active: true });
         var newPointsPolyline = this.props.progressFormat === "default" || this.props.progressFormat === "distance" ? _leaflet2.default.multiColorsPolyline(toProps.track.slice(fromProps.track.length - 1), paramsForMultiPolyline(this.props)) : _leaflet2.default.multiColorsPolyline(toProps.track.filter(function (item) {
-          return Number(item.t) > Number(fromProps.track[fromProps.track.length - 1].t);
+          return Number(item.t) >= Number(fromProps.track[fromProps.track.length - 1].t);
         }), paramsForMultiPolyline(this.props));
         var keys = Object.keys(newPointsPolyline._layers);
         var values = keys.reduce(function (result, item) {
@@ -545,6 +546,7 @@ LeafletReactTrackPlayer.propTypes = {
   startPosition: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
   streamData: _propTypes2.default.bool,
   showDots: _propTypes2.default.bool,
+  defaultSpeed: _propTypes2.default.number,
   callbackNext: _propTypes2.default.func,
   callbackPrev: _propTypes2.default.func,
   callbackSpeed: _propTypes2.default.func,

lib/snake.js

@@ -26,6 +26,11 @@ _leaflet2.default.Polyline.include({
   // It initialization polyline with animation
   snakeIn: function snakeIn(e) {
     if (e && !this._latLngAnimation) this._latLngAnimation = e;
+    for (var i in this._eventParents) {
+      if (this._eventParents[i]._options.defaultSpeed) {
+        this._defaultSpeed = this._eventParents[i]._options.defaultSpeed;
+      }
+    }
     if (this._snaking) {
       return;
     }
@@ -135,6 +140,9 @@ _leaflet2.default.Polyline.include({
       var time = this._timeDistance ? this._timeDistance / this._xSpeed : 1 / this._xSpeed;
       var diff = this._now - this._snakingTime;
       var forward = this.maxDistance ? diff * (this.maxDistance / time) / 1000 : diff * (1 / time) / 1000;
+      if (this._defaultSpeed) {
+        forward = diff * (this._defaultSpeed * this._xSpeed) / 1000;
+      }
       this._snakingTime = this._now;
       this._latlngs.pop();
       this._forward = forward;
@@ -233,9 +241,16 @@ _leaflet2.default.LayerGroup.include({
   },
 
   snakePlay: function snakePlay() {
+    var findLast = this._snakingLayers.some(function (itm) {
+      return itm._snaking;
+    });
+    var goPlay = null;
     this._snakingLayers.map(function (item) {
       if (item._map && item._snaking) item.snakePlay();
     });
+    if (findLast) {
+      if (goPlay) goPlay.snakePlay();
+    } else this._snakeNext();
   },
   // change position. This function stopping work of animation and initiate polylines with default state. Need timestamp
   changePosition: function changePosition(value) {
@@ -390,6 +405,7 @@ _leaflet2.default.LayerGroup.include({
     this._detailDistance = this._detailData.map(function (polyline) {
       return (0, _index.getDistance)(polyline);
     });
+    console.log(this);
     if (this._options.startPosition) {
       this._initiateStartPosition();
     } else {
@@ -400,16 +416,17 @@ _leaflet2.default.LayerGroup.include({
   _initiateStartPosition: function _initiateStartPosition() {
     if (this._options.startPosition === "full") {
       if (this._options.progressFormat === "default") {
-        this.changePosition(this._originalLatlngs.length - 1);
+        this.changePosition(this._originalLatlngs.length);
       } else if (this._options.progressFormat === "distance") {
         var max = this._detailDistance.reduce(function (result, item) {
           result = result + item;
           return result;
         }, 0);
-        this.changePosition(max);
+        this.changePosition(max + 1);
       } else if (this._options.progressFormat === "time") {
-        this.changePosition(this._originalLatlngs[this._originalLatlngs.length - 1].t);
+        this.changePosition(this._originalLatlngs[this._originalLatlngs.length - 1].t + 1);
       }
+      this._snaking = false;
       this._end(true);
     } else {
       this.changePosition(this._options.startPosition);
@@ -418,7 +435,9 @@ _leaflet2.default.LayerGroup.include({
   },
 
   _snakeNext: function _snakeNext() {
-    console.log(this);
+    if (!this._snaking && this._snakingLayersDone < this._snakingLayers.length) {
+      this._snaking = true;
+    }
     if (this._snakingLayersDone >= this._snakingLayers.length) {
       this._end(true);
       this._snaking = false;
@@ -447,6 +466,8 @@ _leaflet2.default.LayerGroup.include({
       });
       _this5._snakingLayers[prevRange + index].removePosition();
     });
-    this.snakePlay();
+    if (!this._snaking) {
+      this.snakePlay();
+    }
   }
 });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "leaflet-react-track-player",
   "description": "This is plugin to react-leaflet. It create player for control of track.",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "private": false,
   "main": "lib/index.js",
   "homepage": "https://github.com/argonavt11/leaflet-react-track-player",