fix marker

.eslintrc.json

@@ -67,6 +67,7 @@
       {
         "extensions": [".js", ".jsx", ".tsx", ".ts"]
       }
-    ]
+    ],
+    "jsx-a11y/mouse-events-have-key-events": "off"
   }
 }

src/components/map-tour/Legend.tsx

@@ -35,7 +35,10 @@ export const TourLegend = ({
         boxSize="67px"
         src={url}
         draggable="false"
-        onClick={() => map?.setView(position)}
+        onClick={() => {
+          map?.setView(position);
+          window.scrollTo({ top: 0, behavior: 'smooth' });
+        }}
       />
       <Text textAlign="center" fontSize="30px" m="auto 27px" mr="0">
         {name}

src/components/map-tour/Map.tsx

@@ -12,7 +12,6 @@ import { TourData, MarkerData } from '@pages/PageTour';
 import MapOhuFull from '@assets/map_ohu_full.png';
 import { motion } from 'framer-motion';
 import { getTransition } from 'src/util/transition';
-// import Mark from '@assets/marker-icon.png';
 import { TourPopup } from './Popup';
 
 interface Props {
@@ -24,7 +23,7 @@ export const TourMap = ({ data, setMap }: Props) => {
   const MapMarker = ({ id, position, name, coloredIcon }: MarkerData) => {
     const Icon = L.icon({
       iconUrl: coloredIcon,
-      iconSize: [200, 200]
+      iconSize: [45, 45]
     });
     return (
       <Marker icon={Icon} position={position}>
@@ -57,14 +56,15 @@ export const TourMap = ({ data, setMap }: Props) => {
         <MapContainer
           center={data.centerPosition}
           zoom={data.zoom}
+          maxZoom={100}
           style={{ height: '100%', width: '100%' }}
           scrollWheelZoom={false}
           ref={setMap}
         >
           <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
           <MapImage />
-          {data.markers.map((marker) => (
-            <MapMarker {...marker} />
+          {data.markers.map((marker, index) => (
+            <MapMarker {...marker} key={index} />
           ))}
         </MapContainer>
       </Box>

src/components/map-tour/Popup.tsx

@@ -12,7 +12,7 @@ import {
   Link,
   Icon
 } from '@chakra-ui/react';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import RecCard from '@components/Homepage/UnitRecommendation/_Card';
 import ShowcaseCard from '@components/Homepage/UnitShowcase/_Card';
 import { FaTimes } from 'react-icons/fa';
@@ -67,30 +67,32 @@ export const TourPopup = ({
   const [description, setDescription] = useState('');
   const [link, setLink] = useState('');
   const [onAir, setOnAir] = useState(false);
-
-  useEffect(() => {
+  const [visitors, setVisitor] = useState(0);
+  const openWrapper = async () => {
+    onOpen();
     const fetchData = async () => {
       const data = await getUnitById(id);
-      await updateVisitors(id, data.visitors + 1);
 
       setName(data.name);
       setRundown(data.rundown.data);
       setDescription(data.description);
       setLink(data.link);
+      setVisitor(data.visitors);
       if (data.video) {
         data.video = data.video.replace('youtu.be', 'youtube.com/embed');
         data.video = data.video.replace('watch?v=', 'embed/');
         setVideo(data.video);
       }
       const isLive =
-        data.rundown.data.length > 0
+        data.rundown.data?.length > 0
           ? checkLive(data.rundown.data)
           : data.isLive;
       setOnAir(isLive);
     };
 
-    fetchData();
-  }, []);
+    await fetchData();
+    await updateVisitors(id, visitors + 1);
+  };
 
   return (
     <>
@@ -100,18 +102,18 @@ export const TourPopup = ({
           isActive={isActive}
           isInView={isInView}
           img={img}
-          onClick={onOpen}
+          onClick={openWrapper}
           isFull={isFull}
           imgFull={imgFull}
         />
       ) : isShowcase ? (
-        <ShowcaseCard img={img} label={label} onClick={onOpen} />
+        <ShowcaseCard img={img} label={label} onClick={openWrapper} />
       ) : (
         <Text
           color="#278DB5"
           textAlign="center"
           cursor="pointer"
-          onClick={onOpen}
+          onClick={openWrapper}
           _hover={{ textDecoration: 'underline' }}
         >
           {children}

src/pages/PageTour.tsx

@@ -35,26 +35,26 @@ export const Tour = () => {
   const [map, setMap] = useState<Map | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
-  const fetchData = async () => {
-    const markers: {
-      id: string;
-      name: string;
-      url: string;
-      coloredIcon: string;
-      bnwIcon: string;
-      position: [number, number];
-    }[] = await getUnits('/units/map');
+  useEffect(() => {
+    const fetchData = async () => {
+      const markers: {
+        id: string;
+        name: string;
+        url: string;
+        coloredIcon: string;
+        bnwIcon: string;
+        position: [number, number];
+      }[] = await getUnits('/units/map');
 
-    const data: TourData = {
-      centerPosition: [1, 1],
-      zoom: 17,
-      markers
-    };
+      const data: TourData = {
+        centerPosition: [1, 1],
+        zoom: 17,
+        markers
+      };
 
-    setData(data);
-  };
+      setData(data);
+    };
 
-  useEffect(() => {
     fetchData()
       .then(() => setIsLoading(false))
       .catch(() => setIsLoading(false));