zooming on marker click

src/map/CurrentLocation/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC, useState, useEffect, useCallback } from 'react';
 import { LatLngLiteral, marker, Marker, DivIcon } from 'leaflet';
 import { MainMap } from '~/constants/map';
 
@@ -7,6 +7,8 @@ interface IProps {
 }
 
 const CurrentLocation: FC<IProps> = ({ location }) => {
+  const zoomToLocation = useCallback(({ latlng }) => MainMap.setView(latlng, 17), [MainMap]);
+
   useEffect(() => {
     if (!location) return;
 
@@ -15,17 +17,21 @@ const CurrentLocation: FC<IProps> = ({ location }) => {
         html: `
           <div class="current-location">
             <svg width="28" height="28" viewBox="0 0 20 20">
+              <g transform="translate(5 0)">
                 <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" />    
+              </g>
             </div>
           </div>
         `,
       }),
-    }).addTo(MainMap);
+    })
+      .on('click', zoomToLocation)
+      .addTo(MainMap);
 
     return () => item.removeFrom(MainMap);
-  }, [MainMap, location]);
+  }, [MainMap, location, zoomToLocation]);
 
   return null;
 };

src/styles/map.less

@@ -340,7 +340,15 @@
 }
 
 .current-location {
+  width: 0;
+  height: 0;
+  position: relative;
+
   svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     fill: @bar_background;
     stroke: white;
     stroke-width: 0.2px;