add close features on the layers

BetaNYC · Feb 22, 2024 · d351852 · d351852
1 parent 4254f73
commit d351852
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/components/map/Map.tsx b/components/map/Map.tsx
@@ -29,7 +29,7 @@ const Map = () => {
 
 
     useEffect(() => {
-        mapboxgl.accessToken = "pk.eyJ1IjoiYmV0YW55YyIsImEiOiJhdEk0RmZ3In0.z3ayA_ZWlFP7Co7h-T-6WQ" as string
+        mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN as string
 
         const m = new mapboxgl.Map({
             container: mapContainer.current || "",

diff --git a/components/map/mapLayer/Legend.tsx b/components/map/mapLayer/Legend.tsx
@@ -18,7 +18,7 @@ function Legend({ buttonClickHandler }: Props) {
 
     return (
         <div className={`absolute ${openStreetView ? "left-[10.971rem] bottom-[calc(50%_-_10.375rem)] lg:bottom-[1.875rem]" : "left-4 bottom-4"} lg:left-[1.875rem] lg:bottom-[1.875rem]  p-3 min-w-[10.5rem] bg-background_white rounded-[1rem] z-20 shadow-2xl`}>
-            <div className='mb-4 w-full flex justify-between items-start '>
+            <div className='flex justify-between items-start mb-4 w-full'>
                 <div className='font-bold text-small lg:text-heading text-black'>Legend</div>
                 <Image
                     src="./icons/cross.svg"

diff --git a/components/map/mapLayer/MapLayer.tsx b/components/map/mapLayer/MapLayer.tsx
@@ -19,7 +19,7 @@ const MapLayer = () => {
     return (
         <>
             <MapLayerBtns clicked={clicked} buttonClickHandler={buttonClickHandler} />
-            {clicked === 'Layers' ? <MapLayerCards /> : clicked === 'Legend' ? <Legend buttonClickHandler={buttonClickHandler} /> : null}
+            {clicked === 'Layers' ? <MapLayerCards buttonClickHandler={buttonClickHandler} /> : clicked === 'Legend' ? <Legend buttonClickHandler={buttonClickHandler} /> : null}
         </>
     )
 }

diff --git a/components/map/mapLayer/MapLayerCards.tsx b/components/map/mapLayer/MapLayerCards.tsx
@@ -1,10 +1,18 @@
 import React, { useContext, useState } from 'react'
 
+import Image from 'next/image'
+
 import { MapContext, MapContextType } from '../../../contexts/MapContext'
 
 import MapLayerCard from './MapLayerCard'
 import useHoverStatus from '@/hooks/useHoverStatus'
 
+import { btnsType } from './MapLayer'
+
+type Props = {
+    buttonClickHandler: (btn: btnsType) => void
+}
+
 const layers: {
     image: string,
     image_white: string,
@@ -38,13 +46,13 @@ const layers: {
     ]
 
 
-const MapLayerCards = () => {
+const MapLayerCards = ({ buttonClickHandler }: Props) => {
 
     const { map } = useContext(MapContext) as MapContextType
 
     const [clicked, setClicked] = useState(layers.map(l => false))
 
-    const {hovered, mouseEnterHandler, mouseLeaveHandler} = useHoverStatus(layers)
+    const { hovered, mouseEnterHandler, mouseLeaveHandler } = useHoverStatus(layers)
 
 
     const clickHandler = (title: floodingTypes, index: number) => {
@@ -60,11 +68,23 @@ const MapLayerCards = () => {
         })
     }
 
+
     return (
-        <div className={`absolute lg:left-[1.875rem] bottom-0 lg:bottom-[1.875rem] flex flex-col justify-center px-[1rem] py-[1.8125rem] h-[50%] lg:h-[16.375rem] w-full lg:w-[48rem] bg-background_white rounded-[1rem] z-30 shadow-2xl`}>
+        <div className={`absolute lg:left-[1.875rem] bottom-0 lg:bottom-[1.875rem] flex flex-col justify-center px-[1rem] py-8 h-[50%] lg:h-[16.375rem] w-full lg:w-[48rem] bg-background_white rounded-[1rem] z-30 shadow-2xl`}>
             {/* <div className='m-auto w-[5.5rem] h-[0.375rem] bg-[#D9D9D9] rounded-[23.62px]'></div> */}
             <div>
-                <div className='mb-5 font-bold text-heading text-black'>Choose Map Layer</div>
+                <div className='flex justify-between items-center mb-5 w-full'>
+                    <div className='font-bold text-heading text-black'>Choose Map Layer</div>
+                    <Image
+                        src='./icons/cross.svg'
+                        width={15}
+                        height={15}
+                        alt='cross'
+                        className='cursor-pointer'
+                        onClick={() => buttonClickHandler('Close')}
+                    />
+                </div>
+
                 <div className='grid grid-cols-2 lg:grid-cols-4 gap-4'>
                     {layers.map((layer, i) => <MapLayerCard clicked={clicked[i]} image={clicked[i] || hovered[i] ? layer.image_white : layer.image} title={layer.title} content={layer.content} key={layer.title} clickHandler={() => clickHandler(layer.title, i)} mouseEnterHandler={() => mouseEnterHandler(i)} mouseLeaveHandler={mouseLeaveHandler} />)}
                 </div>

diff --git a/next.config.js b/next.config.js
@@ -2,9 +2,9 @@
 const nextConfig = {
     output: "export",
     basePath: '/floodgen',
-    // env: {
-    //     BASE_URL: process.env.NEXT_PUBLIC_MAPBOX_API_KEY,
-    // }
+    env: {
+        BASE_URL: process.env.NEXT_PUBLIC_MAPBOX_API_KEY,
+    }
 
 }