added km marks

src/containers/map/KmMarks/index.tsx

@@ -0,0 +1,37 @@
+import React, { FC, useEffect, useState } from 'react';
+import { KmMarksLayer } from '~/utils/marks';
+import { MainMap } from '~/constants/map';
+import { selectMap } from '~/redux/map/selectors';
+import pick from 'ramda/es/pick';
+import { connect } from 'react-redux';
+
+const mapStateToProps = state => ({
+  map: pick(['route'], selectMap(state)),
+});
+
+const mapDispatchToProps = {};
+type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const KmMarksUnconnected: FC<Props> = ({
+  map: { route },
+}) => {
+  const [layer, setLayer] = useState(null);
+
+  useEffect(() => {
+    const layer = new KmMarksLayer([]);
+    layer.addTo(MainMap);
+    setLayer(layer);
+    return () => MainMap.removeLayer(layer);
+  }, [MainMap]);
+
+  useEffect(() => {
+    if (!layer) return;
+    
+    layer.setLatLngs(route);
+  }, [layer, route]);
+  return null;
+};
+
+const KmMarks = connect(mapStateToProps, mapDispatchToProps)(KmMarksUnconnected);
+
+export { KmMarks };

src/containers/map/Map/index.tsx

@@ -10,6 +10,7 @@ import { Route } from '~/containers/map/Route';
 import { Router } from '~/containers/map/Router';
 import { TileLayer } from '~/containers/map/TileLayer';
 import { Stickers } from '~/containers/map/Stickers';
+import { KmMarks } from '~/containers/map/KmMarks';
 
 import 'leaflet/dist/leaflet.css';
 import { selectEditorEditing } from '~/redux/editor/selectors';
@@ -73,6 +74,7 @@ const MapUnconnected: React.FC<IProps> = ({
       <Route />
 
       <Router />
+      <KmMarks />
     </div>,
     document.getElementById('canvas')
   );