solved the duplicated image name issue

components/map/Map.tsx

@@ -17,12 +17,15 @@ import sites from "../../public/data/floodgen_sites.geo.json"
 
 
 
-
 const Map = () => {
 
     const mapContainer = useRef<HTMLInputElement>(null)
     const { setMap } = useContext(MapContext) as MapContextType
-    const { openStreetView} = useContext(StreetViewContext) as StreetViewType
+    const { openStreetView } = useContext(StreetViewContext) as StreetViewType
+
+
+    let directionImg = new Image(50, 50)
+    let markerImg = new Image(25, 25)
 
     useEffect(() => {
         mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN as string
@@ -178,6 +181,7 @@ const Map = () => {
                     'circle-radius': 6,
                 }
             })
+
         })
 
     }, [])

hooks/useOnClickSites.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, useMemo } from 'react'
+import React, { useEffect, useContext } from 'react'
 import mapboxgl, { MapMouseEvent } from 'mapbox-gl'
 
 import { MapContext, MapContextType } from '@/contexts/MapContext'
@@ -7,34 +7,18 @@ import { MarkerContext, MarkerContextType } from '@/contexts/MarkerContext'
 
 import { markerCreator } from '@/utils/markerCreator'
 
-import directionSVG from "../public/icons/direction.svg"
-import markerSVG from "../public/icons/marker.svg"
+
 
 const useOnClickSites = () => {
 
   const { map } = useContext(MapContext) as MapContextType
   const { openStreetView, setOpenStreetView } = useContext(StreetViewContext) as StreetViewType
   const { setDirection, setMarker, setDirectionDegree } = useContext(MarkerContext) as MarkerContextType
 
-  // let directionImg = new Image(50, 50)
-  // let markerImg = new Image(25, 25)
-  // useMemo(() => {
-  //   directionImg.onload = () => map?.addImage('direcitonImg', directionImg, {
-  //     sdf: true
-  //   })
-  //   directionImg.src = directionSVG.src
-
-  //   markerImg.onload = () => map?.addImage('markerImg', markerImg, {
-  //     sdf: true
-  //   })
-  //   markerImg.src = markerSVG.src
-  // }, [])
-
-
-
   useEffect(() => {
-    console.log(openStreetView);
+
     map?.on("click", 'sites', (e: MapMouseEvent) => {
+      console.log('aaa')
       if (!openStreetView) {
         setOpenStreetView(prevOpenStreetView => {
           if (!prevOpenStreetView) {
@@ -48,13 +32,16 @@ const useOnClickSites = () => {
           return true;
         });
       }
+
+
+      const { direction, marker } = markerCreator(e, map)
+      setDirectionDegree(0)
+      setDirection(direction)
+      setMarker(marker)
     });
 
 
-    // const { direction, marker } = markerCreator(e, map, directionImg, markerImg)
-    // setDirectionDegree(0)
-    // setDirection(direction)
-    // setMarker(marker)
+
 
   }, [map, openStreetView]);
 

utils/markerCreator.ts

@@ -1,17 +1,43 @@
 import mapboxgl, { MapMouseEvent } from "mapbox-gl";
 
-export const markerCreator = (e: MapMouseEvent, m: mapboxgl.Map, directionImg:HTMLElement, markerImg:HTMLElement) => {
+import directionSVG from "../public/icons/direction.svg";
+import markerSVG from "../public/icons/marker.svg";
 
-    const direction = new mapboxgl.Marker(directionImg, {
-        offset: [-.5, -25]
-    }).setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(m)
+export const markerCreator = (e: MapMouseEvent, m: mapboxgl.Map) => {
+  let directionImg = new Image(50, 50);
+  let markerImg = new Image(25, 25);
 
+  directionImg.onload = () =>
+    m?.addImage("directionImg", directionImg, {
+      sdf: true,
+    });
+  markerImg.onload = () =>
+    m?.addImage("markerImg", markerImg, {
+      sdf: true,
+    });
 
-    const marker = new mapboxgl.Marker(markerImg, {
-        offset: [0, 0]
-    }).setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(m)
+  // Set the src attribute after attaching onload event handler
+  directionImg.src = directionSVG.src;
+  markerImg.src = markerSVG.src;
 
-    return { direction, marker }
+  if (m.hasImage("directionImg")) {
+    m.removeImage("directionImg");
+  }
+  if (m.hasImage("markerImg")) {
+    m.removeImage("markerImg");
+  }
 
-}
+  const direction = new mapboxgl.Marker(directionImg, {
+    offset: [-0.5, -25],
+  })
+    .setLngLat([e.lngLat.lng, e.lngLat.lat])
+    .addTo(m);
 
+  const marker = new mapboxgl.Marker(markerImg, {
+    offset: [0, 0],
+  })
+    .setLngLat([e.lngLat.lng, e.lngLat.lat])
+    .addTo(m);
+
+  return { direction, marker };
+};