add the sites on the map

components/map/Map.tsx

@@ -3,22 +3,28 @@ import mapboxgl, { MapMouseEvent } from 'mapbox-gl'
 
 import { MapContext, MapContextType } from '@/contexts/MapContext'
 import { StreetViewContext, StreetViewType } from '@/contexts/StreetViewContext'
+import { MarkerContext, MarkerContextType } from '@/contexts/MarkerContext'
 
 import MapLayer from './mapLayer/MapLayer'
-import useCreateMarker from '@/hooks/useCreateMarker'
+import { markerCreator } from '@/utils/markerCreator'
+
 
 import coastalFlooding from "../../public/data/CoastalFlood.geo.json"
 import justiceArea from "../../public/data/EnvironmentalJusticeArea.geo.json"
 import evacuationZone from "../../public/data/HurricaneEvacuationZones.geo.json"
 import neightborhood from "../../public/data/2020_nys_neigborhood.geo.json"
 import sites from "../../public/data/floodgen_sites.geo.json"
 
+import directionSVG from "../../public/icons/direction.svg"
+import markerSVG from "../../public/icons/marker.svg"
+
 
 const Map = () => {
 
     const mapContainer = useRef<HTMLInputElement>(null)
     const { setMap } = useContext(MapContext) as MapContextType
     const { openStreetView, setOpenStreetView } = useContext(StreetViewContext) as StreetViewType
+    const { setDirection, setMarker, setDirectionDegree } = useContext(MarkerContext) as MarkerContextType
 
     const [lng, setLng] = useState(-73.913);
     const [lat, setLat] = useState(40.763);
@@ -83,6 +89,20 @@ const Map = () => {
                 data: sites as GeoJSON.FeatureCollection
             })
 
+            let directionImg = new Image(50, 50)
+            let markerImg = new Image(25, 25)
+
+            directionImg.onload = () => m?.addImage('direcitonImg', directionImg, {
+                sdf: true
+            })
+            directionImg.src = directionSVG.src
+
+            markerImg.onload = () => m?.addImage('markerImg', markerImg, {
+                sdf: true
+            })
+            markerImg.src = markerSVG.src
+
+
             m.addLayer({
                 id: 'coastal_flooding',
                 type: 'fill',
@@ -192,8 +212,10 @@ const Map = () => {
                     });
                 }, 1500)
 
-                useCreateMarker(e, m)
-
+                const { direction, marker } = markerCreator(e, m, directionImg, markerImg)
+                setDirectionDegree(0)
+                setDirection(direction),
+                setMarker(marker)
             })
 
 

components/streetView/StreetView.tsx

@@ -74,20 +74,22 @@ const StreetView = () => {
         const degree = 45
         switch (o) {
             case 'previous':
-                marker!.setRotation(directionDegree - degree)
+                direction!.setRotation(directionDegree - degree)
                 setDirectionDegree(curr => curr - degree)
                 break
             case 'next':
-                marker!.setRotation(directionDegree + degree)
+                direction!.setRotation(directionDegree + degree)
                 setDirectionDegree(curr => curr + degree)
                 break
         }
     }
 
     const closeStreetViewClickHandler = () => {
         setOpenStreetView(false)
+        setDirectionDegree(0)
         marker?.remove()
         direction?.remove()
+
     }
 
     return (

contexts/MapContext.tsx

@@ -1,5 +1,8 @@
 import { createContext, useState, Dispatch, SetStateAction, ReactNode } from "react";
 
+import directionSVG from "../public/icons/direction.svg"
+import markerSVG from "../public/icons/marker.svg"
+
 import mapboxgl from 'mapbox-gl';
 
 
@@ -19,7 +22,8 @@ const MapProvider = ({ children }: Props) => {
     const [map, setMap] = useState<mapboxgl.Map | null>(null)
 
 
-    return <MapContext.Provider value={{ map, setMap }} >
+
+    return <MapContext.Provider value={{ map, setMap}} >
         {children}
     </MapContext.Provider>
 }

contexts/MarkerContext.tsx

@@ -1,5 +1,6 @@
 import { createContext, useState, Dispatch, SetStateAction, ReactNode } from "react";
 
+
 export type MarkerContextType = {
     marker: mapboxgl.Marker | null,
     setMarker: Dispatch<SetStateAction<mapboxgl.Marker | null>>
@@ -21,6 +22,8 @@ const MarkerProvider = ({ children }: Props) => {
     const [direction, setDirection] = useState<mapboxgl.Marker | null>(null)
     const [directionDegree, setDirectionDegree] = useState(0)
 
+
+
     return <MarkerContext.Provider value={{ marker, setMarker, direction, setDirection,directionDegree, setDirectionDegree }} >
         {children}
     </MarkerContext.Provider>

utils/markerCreator.ts

@@ -0,0 +1,20 @@
+import mapboxgl, { MapMouseEvent } from "mapbox-gl";
+
+import directionSVG from "../public/icons/direction.svg"
+import markerSVG from "../public/icons/marker.svg"
+
+export const markerCreator = (e: MapMouseEvent, m: mapboxgl.Map, directionImg:HTMLElement, markerImg:HTMLElement) => {
+
+    const direction = new mapboxgl.Marker(directionImg, {
+        offset: [-.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 }
+
+}
+