From d4307ae3363cce416f1510f829faffa3b5b00741 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 17 Jan 2020 17:55:36 +0700
Subject: [PATCH] good markers for router

---
 src/map/Router/index.tsx | 12 ++++++++----
 src/styles/map.less      | 28 +++++++++++++++-------------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/map/Router/index.tsx b/src/map/Router/index.tsx
index ba24df4..16ee58f 100644
--- a/src/map/Router/index.tsx
+++ b/src/map/Router/index.tsx
@@ -59,13 +59,15 @@ const RouterUnconnected: FC<Props> = memo(
         }
 
         const totalDistance = parseFloat((summary.totalDistance / 1000).toFixed(1)) || 0;
-        const latlng = (coordinates.length && coordinates[coordinates.length - 1]) || null;
+        const latlng = waypoints[waypoints.length - 1] && (waypoints[waypoints.length - 1].latLng) || null;
 
         const angle = angleBetweenPoints(
-          MainMap.latLngToContainerPoint(coordinates[coordinates.length - 2]),
-          MainMap.latLngToContainerPoint(coordinates[coordinates.length - 3])
+          MainMap.latLngToContainerPoint(waypoints[waypoints.length - 1].latLng),
+          MainMap.latLngToContainerPoint(coordinates[coordinates.length - 1]),
         );
 
+        console.log(angle);
+
         setDist(totalDistance);
         setEnd(latlng);
         setDirection(angle > -90 && angle < 90);
@@ -74,8 +76,10 @@ const RouterUnconnected: FC<Props> = memo(
     );
 
     useEffect(() => {
-      OsrmRouter.on('waypointschanged', updateWaypoints)
+      OsrmRouter
+        .on('waypointschanged', updateWaypoints)
         .on('routesfound', updateDistance)
+        .on('routesfound', console.log)
         .addTo(MainMap);
 
       return () => {
diff --git a/src/styles/map.less b/src/styles/map.less
index 4caa85c..1d5bed3 100644
--- a/src/styles/map.less
+++ b/src/styles/map.less
@@ -189,28 +189,30 @@
 
 .router-marker {
   div {
-    color: @router_line;
+    background: @router_line;
+    color: white;
     left: auto;
-    right: 50%;
-    transform: translate(50%, 0);
-    top: -20px;
+    right: 15px;
+    // transform: translate(50%, 0);
+    top: -5px;
     position: absolute;
     z-index: -10;
-    padding: 2px 2px 2px 4px;
-    border-radius: 100%;
+    padding: 2px 8px 2px 8px;
+    border-radius: 4px;
     font-weight: bold;
   }
 
   &.right {
     div {
-      padding: 2px 4px 2px 16px;
-      left: -3px;
-      right: auto;
+    //   padding: 2px 4px 2px 16px;
+    //   left: -3px;
+    right: auto;
+    left: 15px;
 
-      &::after {
-        left: 5px;
-        right: auto;
-      }
+    //   &::after {
+    //     left: 5px;
+    //     right: auto;
+    //   }
     }
   }
 }