https://faroisdaprovinciadesaopedro.surge.sh/js/AnimatedMarker.js

1L.AnimatedMarker = L.Marker.extend({
2  options: {
3    // meters
4    distance: 200,
5    // ms
6    interval: 1000,
7    // animate on add?
8    autoStart: true,
9    // callback onend
10    onEnd: function(){},
11    clickable: false
12  },
13
14  initialize: function (latlngs, options) {
15    this.setLine(latlngs);
16    L.Marker.prototype.initialize.call(this, latlngs[0], options);
17  },
18
19  // Breaks the line up into tiny chunks (see options) ONLY if CSS3 animations
20  // are not supported.
21  _chunk: function(latlngs) {
22    var i,
23        len = latlngs.length,
24        chunkedLatLngs = [];
25
26    for (i=1;i<len;i++) {
27      var cur = latlngs[i-1],
28          next = latlngs[i],
29          dist = cur.distanceTo(next),
30          factor = this.options.distance / dist,
31          dLat = factor * (next.lat - cur.lat),
32          dLng = factor * (next.lng - cur.lng);
33
34      if (dist > this.options.distance) {
35        while (dist > this.options.distance) {
36          cur = new L.LatLng(cur.lat + dLat, cur.lng + dLng);
37          dist = cur.distanceTo(next);
38          chunkedLatLngs.push(cur);
39        }
40      } else {
41        chunkedLatLngs.push(cur);
42      }
43    }
44    chunkedLatLngs.push(latlngs[len-1]);
45
46    return chunkedLatLngs;
47  },
48
49  onAdd: function (map) {
50    L.Marker.prototype.onAdd.call(this, map);
51
52    // Start animating when added to the map
53    if (this.options.autoStart) {
54      this.start();
55    }
56  },
57
58  animate: function() {
59    var self = this,
60        len = this._latlngs.length,
61        speed = this.options.interval;
62
63    // Normalize the transition speed from vertex to vertex
64    if (this._i < len && this._i > 0) {
65      speed = this._latlngs[this._i-1].distanceTo(this._latlngs[this._i]) / this.options.distance * this.options.interval;
66    }
67
68    // Only if CSS3 transitions are supported
69    if (L.DomUtil.TRANSITION) {
70      if (this._icon) { this._icon.style[L.DomUtil.TRANSITION] = ('all ' + speed + 'ms linear'); }
71      if (this._shadow) { this._shadow.style[L.DomUtil.TRANSITION] = 'all ' + speed + 'ms linear'; }
72    }
73
74    // Move to the next vertex
75    this.setLatLng(this._latlngs[this._i]);
76    this._i++;
77
78    // Queue up the animation to the next next vertex
79    this._tid = setTimeout(function(){
80      if (self._i === len) {
81        self.options.onEnd.apply(self, Array.prototype.slice.call(arguments));
82      } else {
83        self.animate();
84      }
85    }, speed);
86  },
87
88  // Start the animation
89  start: function() {
90    this.animate();
91  },
92
93  // Stop the animation in place
94  stop: function() {
95    if (this._tid) {
96      clearTimeout(this._tid);
97    }
98  },
99
100  setLine: function(latlngs){
101    if (L.DomUtil.TRANSITION) {
102      // No need to to check up the line if we can animate using CSS3
103      this._latlngs = latlngs;
104    } else {
105      // Chunk up the lines into options.distance bits
106      this._latlngs = this._chunk(latlngs);
107      this.options.distance = 10;
108      this.options.interval = 30;
109    }
110    this._i = 0;
111  }
112
113});
114
115L.animatedMarker = function (latlngs, options) {
116  return new L.AnimatedMarker(latlngs, options);
117};