create the marker custom hook

BetaNYC · Feb 27, 2024 · 068869a · 068869a
1 parent 2197abb
commit 068869a
Show file tree

Hide file tree

Showing 4 changed files with 535 additions and 67 deletions.
diff --git a/components/infoPage/infoBox/InfoBox.tsx b/components/infoPage/infoBox/InfoBox.tsx
@@ -40,7 +40,7 @@ const InfoBox = () => {
             <div className={`absolute top-[36%] lg:top-0 w-full h-[64%] lg:h-full bg-white lg:bg-secondary_blue rounded-t-[1rem] lg:rounded-none z-30 overflow-y-auto ${boxShown ? "translate-y-0 duration-700" : "translate-y-full duration-700"}`}>
                 <div className=' px-5 lg:px-16 pt-[3rem] lg:pt-[5rem] pb-8 w-full rounded-t-[1rem]'>
                     <Image width={isDesktop ? 203 : 80} height={isDesktop ? 38.17 : 15.4} src="./logos/floodgen.svg" alt='floodgen' />
-                    {/* <InfoTitle /> */}Ｆ
+                    {/* <InfoTitle /> */}
                     <div className='lg:flex lg:mt-8'>
                         <div className='flex lg:flex-col gap-3 lg:gap-5 lg:mr-[8.25rem] w-full lg:w-[12.68rem]'>
                             <div className={`w-[50%] text-heading lg:text-[1.625rem] text-title_black cursor-pointer ${selected === "About" && "pb-[0.05rem] font-bold border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("About")}>About</div>

diff --git a/components/map/Map.tsx b/components/map/Map.tsx
@@ -3,25 +3,22 @@ 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 directionSVG from "../../public/icons/direction.svg"
-import markerSVG from "../../public/icons/marker.svg"
+import useCreateMarker from '@/hooks/useCreateMarker'
 
 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"
 
 
 const Map = () => {
 
     const mapContainer = useRef<HTMLInputElement>(null)
     const { setMap } = useContext(MapContext) as MapContextType
     const { openStreetView, setOpenStreetView } = useContext(StreetViewContext) as StreetViewType
-    const { setDirection, setMarker } = useContext(MarkerContext) as MarkerContextType
 
     const [lng, setLng] = useState(-73.913);
     const [lat, setLat] = useState(40.763);
@@ -81,31 +78,9 @@ const Map = () => {
                 data: neightborhood as GeoJSON.FeatureCollection
             })
 
-            m.addSource('try-out', {
-                'type': 'geojson',
-                'data': {
-                    type: 'Feature',
-                    geometry: {
-                        type: 'Point',
-                        coordinates:
-                            [-73.913, 40.763]
-                    },
-                    properties: {},
-                }
-            })
-
-
-            m.addSource('try-second', {
-                'type': 'geojson',
-                'data': {
-                    type: 'Feature',
-                    geometry: {
-                        type: 'Point',
-                        coordinates:
-                            [-73.815, 40.763]
-                    },
-                    properties: {},
-                }
+            m.addSource('sites', {
+                type: 'geojson',
+                data: sites as GeoJSON.FeatureCollection
             })
 
             m.addLayer({
@@ -198,18 +173,8 @@ const Map = () => {
             });
 
             m.addLayer({
-                'id': 'try-out',
-                'source': 'try-out',
-                'type': 'circle',
-                'paint': {
-                    'circle-color': "#306DDD",
-                    'circle-radius': 6,
-                }
-            })
-
-            m.addLayer({
-                'id': 'try-second',
-                'source': 'try-second',
+                'id': 'sites',
+                'source': 'sites',
                 'type': 'circle',
                 'paint': {
                     'circle-color': "#306DDD",
@@ -218,7 +183,7 @@ const Map = () => {
             })
 
 
-            m.on("click", 'try-out', (e: MapMouseEvent) => {
+            m.on("click", 'sites', (e: MapMouseEvent) => {
                 setOpenStreetView(true)
                 setTimeout(() => {
                     m.flyTo({
@@ -227,29 +192,7 @@ const Map = () => {
                     });
                 }, 1500)
 
-
-
-                let directionImg = new Image(50, 50)
-                directionImg.onload = () => m.addImage('direciton', directionImg, {
-                    sdf: true
-                })
-                directionImg.src = directionSVG.src
-
-                const direction = new mapboxgl.Marker(directionImg, {
-                    offset: [-.5, -25]
-                }).setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(m)
-                setDirection(direction)
-
-                let markerImg = new Image(25, 25)
-                markerImg.onload = () => m.addImage('marker', markerImg, {
-                    sdf: true
-                })
-                markerImg.src = markerSVG.src
-
-                const marker = new mapboxgl.Marker(markerImg, {
-                    offset: [0, 0]
-                }).setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(m)
-                setMarker(marker)
+                useCreateMarker(e, m)
 
             })
 

diff --git a/hooks/useCreateMarker.tsx b/hooks/useCreateMarker.tsx
@@ -0,0 +1,35 @@
+import React, { useState, useContext } from "react";
+import mapboxgl, { MapMouseEvent } from "mapbox-gl";
+import { MarkerContext, MarkerContextType } from '@/contexts/MarkerContext'
+
+import directionSVG from "../public/icons/direction.svg"
+import markerSVG from "../public/icons/marker.svg"
+
+const useCreateMarker = (e: MapMouseEvent, m: mapboxgl.Map) => {
+    const { setDirection, setMarker } = useContext(MarkerContext) as MarkerContextType
+
+
+    let directionImg = new Image(50, 50)
+    directionImg.onload = () => m.addImage('direciton', directionImg, {
+        sdf: true
+    })
+    directionImg.src = directionSVG.src
+
+    const direction = new mapboxgl.Marker(directionImg, {
+        offset: [-.5, -25]
+    }).setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(m)
+    setDirection(direction)
+
+    let markerImg = new Image(25, 25)
+    markerImg.onload = () => m.addImage('marker', markerImg, {
+        sdf: true
+    })
+    markerImg.src = markerSVG.src
+
+    const marker = new mapboxgl.Marker(markerImg, {
+        offset: [0, 0]
+    }).setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(m)
+    setMarker(marker)
+}
+
+export default useCreateMarker