title: Adding an animated arrow on an offset Leaflet polyline
body: <p>I have a project which consist in visualizing the exchange of data between points on a map.
  I'm using Leaflet to draw polylines from coordinates in a GeoJson file and Leaflet.polylineDecorator (<a href="https://github.com/bbecquet/Leaflet.PolylineDecorator" rel="nofollow">https://github.com/bbecquet/Leaflet.PolylineDecorator</a>) to put an animated arrow on the polyline.</p>
  
  <p>The thing is that I need to visualize the stream in both directions. I started by adding to my Geojson file polylines in the other direction but the issue is when I zoom out, the two polylines are stacked.
  So I found Leaflet.polylineOffset (<a href="https://github.com/bbecquet/Leaflet.PolylineOffset" rel="nofollow">https://github.com/bbecquet/Leaflet.PolylineOffset</a>) which allows to create an another polyline just by setting the offset option.
  I thought, i just had to do the same to put the animated arrow on it but when i'm doing it, the animation is affected to the original polyline. In fact, the offset polyline keeps the coordinates from the original one.</p>
  
  <p>I wanted to know if there is a way to apply this animation to the offset polyline.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> d3.json("data/trajetsFibreDCSigma.json",function (data){ // getting polylines' data from a json file to add them on the map
                  L.geoJson(data, {
                  style: function(feature){return {color : feature.properties.stroke,opacity: 1};}, // setting the style of the polylines
                  onEachFeature: function(feature){
                              
                                  // getting the coordinates of the polyline from the json file
                                  var latlng = feature.geometry.coordinates;
                                  var size = feature.geometry.coordinates.length;
                                  var buffer;
                                  
                                  
                                  
                                  
                                  // reversing the order of latitude and longitude in the array because a L.latLng object needs the latitude first and I have the opposite in my json file
                                  for (i=0;i&lt;size;i++)
                                  {
                                      buffer = latlng[i][0];
                                      latlng[i][0] = latlng[i][1];
                                      latlng[i][1] = buffer;
                                  }
                                  
                                  var polylineOffset = L.polyline(latlng,{offset: 5,color: 'blue',opacity: 1}).addTo(map); // putting an offset to the polyline 
                                  
                                  addArrow(latlng,feature);
                                  addArrow(polylineOffset,feature);
                                  
  
  
  
  
                  
                   }
                                             
                  }).addTo(map);
                     
                  
              });
                            
              function addArrow(polyline,feature){ // function to add an arrow on the map
                  
                  var arrowHead = L.polylineDecorator(polyline).addTo(map); // creating an arrow which will be put on the polyline
                  var arrowOffset = 0;
                                  
                  window.setInterval(function() { // creating an animation for the arrow to cross the polyline
                      arrowHead.setPatterns([
                              {offset: arrowOffset+'%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 10, polygon: false, 
                              pathOptions: {stroke: true,color: feature.properties.stroke,opacity: 1}})}
                                                            ]);
                      if(++arrowOffset &gt; 100)
                              arrowOffset = 0;
                        }, 100);
              }</code></pre>
  </div>
  </div>
  </p>
  
  <p>(If I'm just calling addArrow with the offset polyline, it will pop on the original one).</p>