From f4cd6bd44af639a328ffaeeab5c22f5d295e405d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 16 Jan 2020 16:26:56 +0700
Subject: [PATCH] combined arrows with km marks for better performace

---
 src/map/Map/index.tsx        |  1 -
 src/utils/map/ArrowsLayer.ts |  7 +++++++
 src/utils/marks.ts           | 16 ++++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/map/Map/index.tsx b/src/map/Map/index.tsx
index 7ca22ef..b2ad195 100644
--- a/src/map/Map/index.tsx
+++ b/src/map/Map/index.tsx
@@ -78,7 +78,6 @@ const MapUnconnected: React.FC<IProps> = ({
       <Router />
 
       <KmMarks />
-      <Arrows />
     </div>,
     document.getElementById('canvas')
   );
diff --git a/src/utils/map/ArrowsLayer.ts b/src/utils/map/ArrowsLayer.ts
index bcc4ab2..cf9c58f 100644
--- a/src/utils/map/ArrowsLayer.ts
+++ b/src/utils/map/ArrowsLayer.ts
@@ -1,3 +1,10 @@
+/*
+
+  TODO: increase step between arrows, but detect if arrows' count less than i.e. 5, so when draw additional ones
+  TODO: or, maybe, combine arrows with km marks
+
+*/
+
 import { LatLngLiteral, LayerGroup, Map, LatLng, Marker, marker } from 'leaflet';
 import { arrowClusterIcon, createArrow, createArrowIcon } from '~/utils/arrow';
 import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
diff --git a/src/utils/marks.ts b/src/utils/marks.ts
index a22498b..2235c0f 100644
--- a/src/utils/marks.ts
+++ b/src/utils/marks.ts
@@ -7,6 +7,7 @@ import classNames from 'classnames';
 interface KmMarksOptions {
   showMiddleMarkers: boolean;
   showEndMarker: boolean;
+  showArrows: boolean;
   kmMarksStep: number;
 }
 
@@ -17,6 +18,7 @@ class KmMarksLayer extends LayerGroup {
     this.options = {
       showMiddleMarkers: true,
       showEndMarker: true,
+      showArrows: true,
       kmMarksStep: 10,
       ...(options || {}),
     } as KmMarksOptions;
@@ -27,6 +29,7 @@ class KmMarksLayer extends LayerGroup {
 
     this.marksLayer.clearLayers();
     this.endMarker.clearLayers();
+    this.arrowsLayer.clearLayers();
 
     this.distance = 0;
 
@@ -38,6 +41,7 @@ class KmMarksLayer extends LayerGroup {
 
   drawMiddleMarkers = (latlngs: LatLngLiteral[]) => {
     const marks = [];
+    const arrows = [];
     let last_km_mark = 0;
 
     this.distance = latlngs.reduce((dist, current, index) => {
@@ -66,6 +70,7 @@ class KmMarksLayer extends LayerGroup {
           };
 
           marks.push(this.createMiddleMarker(coords, angle, step));
+          arrows.push(createArrow(coords, angle));
         }
 
         last_km_mark = rounded;
@@ -75,6 +80,7 @@ class KmMarksLayer extends LayerGroup {
     }, 0);
 
     this.marksLayer.addLayers(marks);
+    this.arrowsLayer.addLayers(arrows);
   };
 
   createMiddleMarker = (latlng: LatLngLiteral, angle: number, distance: number): Marker =>
@@ -136,6 +142,14 @@ class KmMarksLayer extends LayerGroup {
     maxClusterRadius: 120,
     iconCreateFunction: arrowClusterIcon,
   });
+  arrowsLayer: MarkerClusterGroup = new MarkerClusterGroup({
+    spiderfyOnMaxZoom: false,
+    showCoverageOnHover: false,
+    zoomToBoundsOnClick: false,
+    animate: false,
+    maxClusterRadius: 120,
+    iconCreateFunction: arrowClusterIcon,
+  });
   endMarker: LayerGroup = new LayerGroup();
   distance: number = 0;
 }
@@ -146,6 +160,7 @@ KmMarksLayer.addInitHook(function() {
       this.map = event.target._map;
       this.marksLayer.addTo(this.map);
       this.endMarker.addTo(this.map);
+      this.arrowsLayer.addTo(this.map);
     }
   });
 
@@ -153,6 +168,7 @@ KmMarksLayer.addInitHook(function() {
     if (event.target instanceof KmMarksLayer) {
       this.marksLayer.removeFrom(this.map);
       this.endMarker.removeFrom(this.map);
+      this.arrowsLayer.removeFrom(this.map);
     }
   });
 });