refactored rerendering speed

src/utils/arrow.ts

@@ -23,11 +23,6 @@ export const createArrow = (latlng: LatLngLiteral, angle: number): Marker => mar
 export const arrowClusterIcon = (cluster): DivIcon => {
   const markers = cluster.getAllChildMarkers();
 
-  // search for nearest marker to cluster (slow)
-  // const nearest = markers.sort((a, b) => (
-  //   dist2(a.getLatLng(), cluster.getLatLng()) - dist2(b.getLatLng(), cluster.getLatLng())
-  // ));
-
   // faster way
   cluster.setLatLng(markers[markers.length - 1].getLatLng());
   return markers[markers.length - 1].options.icon;

src/utils/map/Arrows.ts

@@ -0,0 +1,65 @@
+import { LatLngLiteral, LayerGroup, Map } from "leaflet";
+import { arrowClusterIcon, createArrow } from "~/utils/arrow";
+import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
+import { angleBetweenPoints, dist2, middleCoord } from "~/utils/geom";
+
+class Component extends LayerGroup {
+  constructor(props){
+    super(props);
+  }
+
+  setLatLngs = (latlngs: LatLngLiteral[]): void => {
+    if (!this.map) return;
+
+    this.arrowLayer.clearLayers();
+
+    if (latlngs.length === 0) return;
+
+    const midpoints = latlngs.reduce((res, latlng, i) => (
+      latlngs[i + 1] && dist2(latlngs[i], latlngs[i + 1]) > 0.00005
+        ? [
+          ...res,
+          {
+            latlng: middleCoord(latlngs[i], latlngs[i + 1]),
+            angle: angleBetweenPoints(
+              this.map.latLngToContainerPoint(latlngs[i]),
+              this.map.latLngToContainerPoint(latlngs[i + 1])
+            ),
+          }
+        ]
+        : res
+    ), []);
+
+    midpoints.forEach(({ latlng, angle }) => (
+      this.arrowLayer.addLayer(createArrow(latlng, angle))
+    ));
+  };
+
+  map: Map;
+  arrowLayer: MarkerClusterGroup = new MarkerClusterGroup({
+    spiderfyOnMaxZoom: false,
+    showCoverageOnHover: false,
+    zoomToBoundsOnClick: false,
+    animate: false,
+    maxClusterRadius: 120,
+    iconCreateFunction: arrowClusterIcon,
+  });
+}
+
+
+Component.addInitHook(function () {
+  this.once('add', (event) => {
+    if (event.target instanceof Arrows) {
+      this.map = event.target._map;
+      this.arrowLayer.addTo(this.map);
+    }
+  });
+
+  this.once('remove', (event) => {
+    if (event.target instanceof Arrows) {
+      this.arrowLayer.removeFrom(this.map);
+    }
+  });
+});
+
+export const Arrows = Component;

src/utils/map/DomMarker.js

@@ -15,7 +15,7 @@ export const DomMarker = DivIcon.extend({
 
     this._setIconStyles(element, 'icon');
 
-    return element;
+    return element; 
   }
 });
 

src/utils/map/InteractivePoly.ts

@@ -576,7 +576,6 @@ InteractivePoly.addInitHook(function() {
   });
 });
 
-// export const InteractivePoly = Component;
 /*
   events:
   vertexdragstart,

src/utils/map/OsrmRouter.ts

@@ -1,7 +1,7 @@
 import { Marker } from 'leaflet';
 import * as Routing from 'leaflet-routing-machine/src/index';
 import { CLIENT } from '~/config/frontend';
-import { DomMarker } from '~/utils/DomMarker';
+import { DomMarker } from '~/utils/map/DomMarker';
 import { MainMap } from '~/constants/map';
 
 const createWaypointMarker = (): DomMarker => {