made poly arrows via svg markers

src/components/Fills.jsx

@@ -3,17 +3,41 @@ import React from 'react';
 export const Fills = () => (
   <svg>
     <defs>
+
       <linearGradient id="activeButtonGradient" x1="-20%" x2="50%" y1="0%" y2="140%">
         <stop offset="0%" stopColor="#55ddff" />
         <stop offset="100%" stopColor="#7137c8" />
       </linearGradient>
-    </defs>
 
-    <defs>
       <linearGradient id="activePathGradient" x1="-20%" x2="50%" y1="0%" y2="140%">
         <stop offset="0%" stopColor="#ff7700" />
         <stop offset="100%" stopColor="#ff3344" />
       </linearGradient>
+
+      <marker
+        id="arrow"
+        viewBox="0 0 10 10"
+        refX="10"
+        refY="5"
+        markerWidth="3"
+        markerHeight="3"
+        orient="auto"
+      >
+        <path d="M0,5a5,5 0 1,0 10,0a5,5 0 1,0 -10,0" fill="#ff3344" />
+        <path d="M2.5 2L7.5 5L2.5 8z" fill="#ffffff" fillRule="even-odd" />
+      </marker>
+
+      <marker
+        id="long-arrow"
+        viewBox="0 0 15 15"
+        refX="10"
+        refY="10"
+        markerWidth="5"
+        markerHeight="5"
+        orient="auto"
+      >
+        <path d="m 2.625,3.375 h 7.5 L 10.28125,1.609375 13.5,4.25 10.484375,6.921875 10.171875,5.15625 2.625,5.125 Z" fill="#ff3344" fillRule="even-odd" />
+      </marker>
     </defs>
   </svg>
-)
+);

src/components/panels/EditorPanel.jsx

@@ -51,11 +51,11 @@ export class EditorPanel extends React.PureComponent {
 
         <div className="panel right">
           <div className="control-dist">
-              {totalDistance} км
+            {totalDistance} км
-              <Icon icon="icon-cycle" size={32} />
+            <Icon icon="icon-cycle" size={32} />
-              {
+            {
-                <span>{toHours(estimateTime)}</span>
+              <span>{toHours(estimateTime)}</span>
-              }
+            }
           </div>
 
           <div className="control-bar">

src/modules/Poly.js

@@ -1,8 +1,13 @@
 import L from 'leaflet';
 import 'leaflet-geometryutil';
 import { simplify } from '$utils/simplify';
+import { findDistance, middleCoord } from '$utils/geom';
 
-const polyStyle = { color: 'url(#activePathGradient)', weight: '6' };
+const polyStyle = {
+  color: 'url(#activePathGradient)',
+  weight: '6',
+  markerMid: 'url(#arrow)'
+};
 // const polyStyle = { color: '#ff3344', weight: '5' };
 
 export class Poly {
@@ -10,24 +15,54 @@ export class Poly {
     map, routerMoveStart, lockMapClicks, setTotalDist
   }) {
     this.poly = L.polyline([], polyStyle);
+
     this.latlngs = [];
     this.poly.addTo(map);
+
     this.map = map;
 
     this.routerMoveStart = routerMoveStart;
     this.setTotalDist = setTotalDist;
     this.lockMapClicks = lockMapClicks;
     this.bindEvents();
+
+    this.arrows = new L.LayerGroup().addTo(map);
   }
 
+  drawArrows = () => {
+    this.arrows.clearLayers();
+
+    const { latlngs } = this;
+
+    if (!latlngs || latlngs.length <= 1) return;
+
+    latlngs.map((latlng, i) => {
+      if (i === 0) return;
+      const mid = middleCoord(latlngs[i], latlngs[i - 1]);
+      const dist = findDistance(latlngs[i - 1].lat, latlngs[i - 1].lng, latlngs[i].lat, latlngs[i].lng);
+
+      if (dist > 1.5) {
+        const slide = new L.Polyline(
+          [
+            latlngs[i - 1],
+            [mid.lat, mid.lng]
+          ],
+          { color: 'none', weight: '5' }
+        ).addTo(this.arrows);
+        slide._path.setAttribute('marker-end', 'url(#long-arrow)');
+      }
+    });
+  };
+
   updateMarks = () => {
     const coords = this.poly.toGeoJSON().geometry.coordinates;
     this.latlngs = (coords && coords.length && coords.map(([lng, lat]) => ({ lng, lat }))) || [];
     const meters = (this.poly && (L.GeometryUtil.length(this.poly) / 1000)) || 0;
-    const kilometers = (meters && parseFloat(meters.toFixed(1))) || 0;
+    const kilometers = (meters && meters.toFixed(1)) || 0;
 
     this.setTotalDist(kilometers);
     this.routerMoveStart();
+    this.drawArrows();
   };
 
   bindEvents = () => {

src/utils/geom.js

@@ -0,0 +1,29 @@
+export const middleCoord = (l1, l2) => ({
+  lat: (l2.lat + ((l1.lat - l2.lat) / 2)),
+  lng: (l2.lng + ((l1.lng - l2.lng) / 2))
+});
+
+export const deg2rad = deg => deg * Math.PI / 180;
+
+export const findDistance = (t1, n1, t2, n2) => {
+  // convert coordinates to radians
+  const lat1 = deg2rad(t1);
+  const lon1 = deg2rad(n1);
+  const lat2 = deg2rad(t2);
+  const lon2 = deg2rad(n2);
+
+  // find the differences between the coordinates
+  const dlat = lat2 - lat1;
+  const dlon = lon2 - lon1;
+
+  // here's the heavy lifting
+  const a = (Math.sin(dlat / 2) ** 2) +
+    (Math.cos(lat1) * Math.cos(lat2) * (Math.sin(dlon / 2) ** 2));
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); // great circle distance in radians
+  // const dm = c * 3961; // great circle distance in miles
+  const dk = c * 6373; // great circle distance in km
+
+  // round the results down to the nearest 1/1000
+  // const mi = round(dm);
+  return (Math.round(dk * 1000) / 1000);
+};