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 };