current user location

src/map/CurrentLocation/index.tsx

@@ -0,0 +1,33 @@
+import React, { FC, useState, useEffect } from 'react';
+import { LatLngLiteral, marker, Marker, DivIcon } from 'leaflet';
+import { MainMap } from '~/constants/map';
+
+interface IProps {
+  location: LatLngLiteral;
+}
+
+const CurrentLocation: FC<IProps> = ({ location }) => {
+  useEffect(() => {
+    if (!location) return;
+
+    const item = new Marker(location, {
+      icon: new DivIcon({
+        html: `
+          <div class="current-location">
+            <svg width="28" height="28" viewBox="0 0 20 20">
+              <circle r="1.846" cy="1.846" cx="5.088"/>
+              <path d="M3.004 4.326h4l2-3 1 1-3 4v10h-1l-1-7-1 7h-1v-10s-3.125-4-3-4l1-1z"/>
+              <ellipse ry="1" rx="4" cy="16.326" cx="5.004" opacity=".262" fill="black" />    
+            </div>
+          </div>
+        `,
+      }),
+    }).addTo(MainMap);
+
+    return () => item.removeFrom(MainMap);
+  }, [MainMap, location]);
+
+  return null;
+};
+
+export { CurrentLocation };

src/map/Map/index.tsx

@@ -11,11 +11,12 @@ import { Router } from '~/map/Router';
 import { TileLayer } from '~/map/TileLayer';
 import { Stickers } from '~/map/Stickers';
 import { KmMarks } from '~/map/KmMarks';
-import { Arrows } from '~/map/Arrows';
+import { CurrentLocation } from '~/map/CurrentLocation';
 
 import 'leaflet/dist/leaflet.css';
 import { selectEditorEditing, selectEditorMode } from '~/redux/editor/selectors';
 import { MODES } from '~/constants/modes';
+import { selectUserLocation } from '~/redux/user/selectors';
 
 const mapStateToProps = state => ({
   provider: selectMapProvider(state),
@@ -23,6 +24,7 @@ const mapStateToProps = state => ({
   stickers: selectMapStickers(state),
   editing: selectEditorEditing(state),
   mode: selectEditorMode(state),
+  location: selectUserLocation(state),
 });
 
 const mapDispatchToProps = {
@@ -41,6 +43,7 @@ const MapUnconnected: React.FC<IProps> = ({
   stickers,
   editing,
   mode,
+  location,
 
   mapClicked,
   mapSetSticker,
@@ -78,6 +81,7 @@ const MapUnconnected: React.FC<IProps> = ({
       <Router />
 
       <KmMarks />
+      <CurrentLocation location={location} />
     </div>,
     document.getElementById('canvas')
   );