fix bug with stream data

Author: arg0navt

lib/index.js

@@ -314,7 +314,7 @@ var LeafletReactTrackPlayer = function (_MapLayer) {
       // icon
       this.createIcon = function (rotate) {
         return _leaflet2.default.divIcon({
-          html: "<div class=\"custom-marker-player" + (!_this2.props.customMarker ? " default" : "") + "\" style=\"background: url('" + (_this2.props.customMarker ? _this2.props.markerIcon : "https://unpkg.com/leaflet@1.3.4/dist/images/marker-icon-2x.png") + "') no-repeat center; height: 100%; transform: rotate(" + (_this2.props.customMarker && _this2.props.customCourse ? rotate : 0) + "deg)" + _this2.props.styleMarker + "\"></div>",
+          html: "<div class=\"custom-marker-player" + (!_this2.props.customMarker ? " default" : "") + "\" style=\"background: url('" + (_this2.props.customMarker ? _this2.props.iconCustomMarker : "https://unpkg.com/leaflet@1.3.4/dist/images/marker-icon-2x.png") + "') no-repeat center; height: 100%; transform: rotate(" + (_this2.props.customMarker && _this2.props.customCourse ? rotate : 0) + "deg)" + _this2.props.styleMarker + "\"></div>",
           iconSize: [35, 35]
         });
       };
@@ -375,6 +375,9 @@ var LeafletReactTrackPlayer = function (_MapLayer) {
           this.updateProgressByTime(toProps, distanceNewPoints);
         }
       }
+      if (fromProps.iconCustomMarker !== toProps.iconCustomMarker) {
+        this.leafletElement.finishMarker._icon.children[0].style.background = "url(" + toProps.iconCustomMarker + ") center center no-repeat";
+      }
     }
   }, {
     key: "render",

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.2",
+  "version": "1.2.4",
   "private": false,
   "main": "lib/index.js",
   "homepage": "https://github.com/argonavt11/leaflet-react-track-player",

src/laeflet-react-track-player/snake.js

@@ -267,9 +267,14 @@ L.LayerGroup.include({
   },
 
   snakePlay: function() {
-    this._snakingLayers.map(item => {
+    const findLast = this._snakingLayers.some((itm) => 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(value) {
@@ -440,18 +445,19 @@ L.LayerGroup.include({
   _initiateStartPosition: function() {
     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") {
         const max = this._detailDistance.reduce((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._originalLatlngs[this._originalLatlngs.length - 1].t + 1
         );
       }
+      this._snaking = false;
       this._end(true);
     } else {
       this.changePosition(this._options.startPosition);
@@ -460,7 +466,9 @@ L.LayerGroup.include({
   },
 
   _snakeNext: function() {
-    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;
@@ -487,6 +495,8 @@ L.LayerGroup.include({
       });
       this._snakingLayers[prevRange + index].removePosition();
     });
-    this.snakePlay();
+    if (!this._snaking) {
+      this.snakePlay();
+    }
   }
 });