fix map

src/components/leaderboards/Search.tsx

@@ -29,8 +29,8 @@ const Search = ({ handleSubmit }: Props) => {
           filter.length === 0
             ? addedFilter
             : filter.includes(addedFilter)
-              ? filter
-              : filter.concat(`,${addedFilter}`),
+            ? filter
+            : filter.concat(`,${addedFilter}`),
         query: ''
       });
     } else {

src/components/map-tour/Map.tsx

@@ -1,16 +1,18 @@
 import { Box } from '@chakra-ui/react';
 import {
-  Circle,
   ImageOverlay,
   MapContainer,
   Popup,
-  TileLayer
+  TileLayer,
+  Marker
 } from 'react-leaflet';
-import { Map } from 'leaflet';
+import L, { Map } from 'leaflet';
+
 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 {
@@ -19,17 +21,19 @@ interface Props {
   setMap: (map: Map) => void | null;
 }
 export const TourMap = ({ data, setMap }: Props) => {
-  const MapMarker = ({ id, position, name }: MarkerData) => (
-    <Circle
-      center={position}
-      radius={11}
-      pathOptions={{ color: 'transparent', fillColor: 'transparent' }}
-    >
-      <Popup>
-        <TourPopup id={id}>{name}</TourPopup>
-      </Popup>
-    </Circle>
-  );
+  const MapMarker = ({ id, position, name, coloredIcon }: MarkerData) => {
+    const Icon = L.icon({
+      iconUrl: coloredIcon,
+      iconSize: [200, 200]
+    });
+    return (
+      <Marker icon={Icon} position={position}>
+        <Popup>
+          <TourPopup id={id}>{name}</TourPopup>
+        </Popup>
+      </Marker>
+    );
+  };
 
   const MapImage = () => {
     const imageSize = 0.003; // 0.5*image real width

src/context/index.ts

@@ -1,3 +1,3 @@
 import { createContext } from 'react';
 
-export const UserContext = createContext({});
+export const UserContext = createContext({});

src/pages/PageTour.tsx

@@ -13,6 +13,8 @@ export interface MarkerData {
   id: string;
   name: string;
   url: string;
+  coloredIcon: string;
+  bnwIcon: string;
   position: [number, number];
 }
 
@@ -38,6 +40,8 @@ export const Tour = () => {
       id: string;
       name: string;
       url: string;
+      coloredIcon: string;
+      bnwIcon: string;
       position: [number, number];
     }[] = await getUnits('/units/map');