From 699d94c9b3ef74c72771bacc3dc1bd6890a4b309 Mon Sep 17 00:00:00 2001 From: CloudLun Date: Wed, 6 Mar 2024 15:40:02 -0500 Subject: [PATCH] apply axios for data import --- components/infoPage/infoBox/InfoBox.tsx | 8 +- components/map/Map.tsx | 313 +++++++++++------------ components/map/mapLayer/MapLayerBtns.tsx | 15 +- hooks/useFetchMapLayerData.tsx | 42 +++ next.config.js | 6 +- 5 files changed, 210 insertions(+), 174 deletions(-) create mode 100644 hooks/useFetchMapLayerData.tsx diff --git a/components/infoPage/infoBox/InfoBox.tsx b/components/infoPage/infoBox/InfoBox.tsx index 3b8a1e1..8ac5b62 100644 --- a/components/infoPage/infoBox/InfoBox.tsx +++ b/components/infoPage/infoBox/InfoBox.tsx @@ -13,7 +13,6 @@ import InfoCredit from './InfoCredit' import Image from 'next/image' - const InfoBox = () => { @@ -34,12 +33,11 @@ const InfoBox = () => { setBoxShown(b) } - return ( <>
-
- floodgen +
+ floodgen {/* */}
@@ -52,7 +50,7 @@ const InfoBox = () => {
-
boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}> +
boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}> { boxShown ? : } diff --git a/components/map/Map.tsx b/components/map/Map.tsx index a50f766..29e0b9c 100644 --- a/components/map/Map.tsx +++ b/components/map/Map.tsx @@ -8,12 +8,7 @@ import useOnClickSites from '@/hooks/useOnClickSites' import MapLayer from './mapLayer/MapLayer' - -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 useFetchMapLayerData from '@/hooks/useFetchMapLayerData' @@ -22,169 +17,169 @@ const Map = () => { const mapContainer = useRef(null) const { setMap } = useContext(MapContext) as MapContextType const { openStreetView } = useContext(StreetViewContext) as StreetViewType + const { mapLayerData } = useFetchMapLayerData() + useOnClickSites() useEffect(() => { - mapboxgl.accessToken = "pk.eyJ1IjoiYmV0YW55YyIsImEiOiJhdEk0RmZ3In0.z3ayA_ZWlFP7Co7h-T-6WQ" as string - // process.env.NEXT_PUBLIC_MAPBOX_TOKEN + mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN as string + const lng = -73.913; const lat = 40.763; const zoom = 11; - const m = new mapboxgl.Map({ - container: mapContainer.current || "", - style: "mapbox://styles/betanyc/clrrs5fv200h101o87qwn1sw1", - center: [lng, lat], - zoom: zoom, - minZoom: 6, - maxZoom: 12, - interactive: true, - doubleClickZoom: false, - }) - - m.dragRotate.disable(); - m.touchZoomRotate.disableRotation(); - - m.addControl(new mapboxgl.NavigationControl(), 'bottom-right') - - m.on("load", () => { - setMap(m) - - m.addSource("coastal_flooding", { - type: 'geojson', - data: coastalFlooding as GeoJSON.FeatureCollection - }) - - m.addSource('environmental_justice_areas', { - type: 'geojson', - data: justiceArea as GeoJSON.FeatureCollection - }) - - m.addSource('hurricane_evacuation_zones', { - type: 'geojson', - data: evacuationZone as GeoJSON.FeatureCollection - }) - - m.addSource('stormwater_flooding', { - type: 'geojson', - data: neightborhood as GeoJSON.FeatureCollection + if (mapLayerData.coastalFlooding !== null) { + const m = new mapboxgl.Map({ + container: mapContainer.current || "", + style: "mapbox://styles/betanyc/clrrs5fv200h101o87qwn1sw1", + center: [lng, lat], + zoom: zoom, + minZoom: 6, + maxZoom: 12, + interactive: true, + doubleClickZoom: false, }) - m.addSource('neighborhood', { - type: 'geojson', - data: neightborhood as GeoJSON.FeatureCollection - }) + m.dragRotate.disable(); + m.touchZoomRotate.disableRotation(); + + m.addControl(new mapboxgl.NavigationControl(), 'bottom-right') + + m.on("load", () => { + setMap(m) + + m.addSource("coastal_flooding", { + type: 'geojson', + data: mapLayerData.coastalFlooding! as GeoJSON.FeatureCollection + }) + + m.addSource('environmental_justice_areas', { + type: 'geojson', + data: mapLayerData.justiceArea! as GeoJSON.FeatureCollection + }) + + m.addSource('hurricane_evacuation_zones', { + type: 'geojson', + data: mapLayerData.evacuationZone! as GeoJSON.FeatureCollection + }) + + m.addSource('stormwater_flooding', { + type: 'geojson', + data: mapLayerData.neighborhood! as GeoJSON.FeatureCollection + }) + + m.addSource('neighborhood', { + type: 'geojson', + data: mapLayerData.neighborhood! as GeoJSON.FeatureCollection + }) + + m.addSource('sites', { + type: 'geojson', + data: mapLayerData.sites! as GeoJSON.FeatureCollection + }) + + + m.addLayer({ + id: 'coastal_flooding', + type: 'fill', + source: 'coastal_flooding', + paint: { + "fill-color": [ + 'case', + ['all', ['==', ['get', "FLD_ZONE"], "VE"]], + "#3B9CD9", + ['all', ['==', ['get', "FLD_ZONE"], "AE"]], + "#7FBEE6", + "#3C9CD9", + ], + 'fill-opacity': 1 + } + }) + + m.addLayer({ + id: 'environmental_justice_areas', + type: 'fill', + source: 'environmental_justice_areas', + paint: { + "fill-color": [ + 'case', + ['all', ['==', ['get', "ejdesignat"], "EJ Area"]], + "#F7A848", + ['all', ['==', ['get', "ejdesignat"], "Potential EJ Area"]], + "#FBD4A3", + 'transparent' + ], + 'fill-opacity': 0 + } + }) + + m.addLayer({ + id: 'hurricane_evacuation_zones', + type: 'fill', + source: 'hurricane_evacuation_zones', + paint: { + "fill-color": [ + 'case', + ['all', ['==', ['get', "hurricane_"], "1"]], + "#2F8890", + ['all', ['==', ['get', "hurricane_"], "2"]], + "#529CA4", + ['all', ['==', ['get', "hurricane_"], "3"]], + "#74B0B5", + ['all', ['==', ['get', "hurricane_"], "4"]], + "#96C3C8", + ['all', ['==', ['get', "hurricane_"], "5"]], + "#B9D7DA", + ['all', ['==', ['get', "hurricane_"], "6"]], + "#D9E8EA", + 'transparent' + ], + 'fill-opacity': 0 + } + }) + + + m.addLayer({ + id: 'stormwater_flooding', + type: 'fill', + source: 'stormwater_flooding', + paint: { + "fill-color": [ + 'case', + ['all', ['==', ['get', "ejdesignat"], "EJ Area"]], + "#F7A848", + ['all', ['==', ['get', "ejdesignat"], "Potential EJ Area"]], + "#FBD4A3", + 'transparent' + ], + 'fill-opacity': 0 + } + }) + + m.addLayer({ + 'id': 'neighborhood_outline', + 'type': 'line', + 'source': 'neighborhood', + 'layout': {}, + 'paint': { + 'line-color': 'black', + 'line-width': .5, + 'line-opacity': .3 + } + }); + + m.addLayer({ + 'id': 'sites', + 'source': 'sites', + 'type': 'circle', + 'paint': { + 'circle-color': "#306DDD", + 'circle-radius': 6, + } + }) - m.addSource('sites', { - type: 'geojson', - data: sites as GeoJSON.FeatureCollection }) - - - m.addLayer({ - id: 'coastal_flooding', - type: 'fill', - source: 'coastal_flooding', - paint: { - "fill-color": [ - 'case', - ['all', ['==', ['get', "FLD_ZONE"], "VE"]], - "#3B9CD9", - ['all', ['==', ['get', "FLD_ZONE"], "AE"]], - "#7FBEE6", - "#3C9CD9", - ], - 'fill-opacity': 1 - } - }) - - m.addLayer({ - id: 'environmental_justice_areas', - type: 'fill', - source: 'environmental_justice_areas', - paint: { - "fill-color": [ - 'case', - ['all', ['==', ['get', "ejdesignat"], "EJ Area"]], - "#F7A848", - ['all', ['==', ['get', "ejdesignat"], "Potential EJ Area"]], - "#FBD4A3", - 'transparent' - ], - 'fill-opacity': 0 - } - }) - - m.addLayer({ - id: 'hurricane_evacuation_zones', - type: 'fill', - source: 'hurricane_evacuation_zones', - paint: { - "fill-color": [ - 'case', - ['all', ['==', ['get', "hurricane_"], "1"]], - "#2F8890", - ['all', ['==', ['get', "hurricane_"], "2"]], - "#529CA4", - ['all', ['==', ['get', "hurricane_"], "3"]], - "#74B0B5", - ['all', ['==', ['get', "hurricane_"], "4"]], - "#96C3C8", - ['all', ['==', ['get', "hurricane_"], "5"]], - "#B9D7DA", - ['all', ['==', ['get', "hurricane_"], "6"]], - "#D9E8EA", - 'transparent' - ], - 'fill-opacity': 0 - } - }) - - - m.addLayer({ - id: 'stormwater_flooding', - type: 'fill', - source: 'stormwater_flooding', - paint: { - "fill-color": [ - 'case', - ['all', ['==', ['get', "ejdesignat"], "EJ Area"]], - "#F7A848", - ['all', ['==', ['get', "ejdesignat"], "Potential EJ Area"]], - "#FBD4A3", - 'transparent' - ], - 'fill-opacity': 0 - } - }) - - m.addLayer({ - 'id': 'neighborhood_outline', - 'type': 'line', - 'source': 'neighborhood', - 'layout': {}, - 'paint': { - 'line-color': 'black', - 'line-width': .5, - 'line-opacity': .3 - } - }); - - m.addLayer({ - 'id': 'sites', - 'source': 'sites', - 'type': 'circle', - 'paint': { - 'circle-color': "#306DDD", - 'circle-radius': 6, - } - }) - - }) - - }, []) - - useOnClickSites() - + } + }, [mapLayerData]) diff --git a/components/map/mapLayer/MapLayerBtns.tsx b/components/map/mapLayer/MapLayerBtns.tsx index e970fae..1817fbe 100644 --- a/components/map/mapLayer/MapLayerBtns.tsx +++ b/components/map/mapLayer/MapLayerBtns.tsx @@ -1,14 +1,13 @@ -import React, { useState, useContext } from 'react' +import React, { useContext } from 'react' import useHoverStatus from '@/hooks/useHoverStatus' -import Image from 'next/image' - import Button from '@/shared/Button' -import Previous from '@/shared/Order' import { btnsType } from './MapLayer' import { StreetViewContext, StreetViewType } from '@/contexts/StreetViewContext' +import { useMediaQuery } from 'react-responsive' + type Props = { clicked: btnsType buttonClickHandler: (title: btnsType) => void @@ -16,7 +15,9 @@ type Props = { const MapLayerBtns = ({ clicked, buttonClickHandler }: Props) => { - const { openStreetView, setOpenStreetView } = useContext(StreetViewContext) as StreetViewType + const { openStreetView } = useContext(StreetViewContext) as StreetViewType + + const isDesktop = useMediaQuery({ query: "(min-width : 1024px)" }) const btnsData: { src: string, src_white: string, title: btnsType }[] = [ { @@ -37,13 +38,13 @@ const MapLayerBtns = ({ clicked, buttonClickHandler }: Props) => { return ( <> -
+
{/* previous */} {/* { openStreetView && } */}
diff --git a/hooks/useFetchMapLayerData.tsx b/hooks/useFetchMapLayerData.tsx new file mode 100644 index 0000000..9111580 --- /dev/null +++ b/hooks/useFetchMapLayerData.tsx @@ -0,0 +1,42 @@ +import React, { useState, useEffect, Dispatch, SetStateAction, } from 'react' + +import axios from 'axios' + +const useFetchMapLayerData = () => { + const [mapLayerData, setMapLayerData] = useState({ + coastalFlooding: null, + justiceArea: null, + evacuationZone: null, + neighborhood: null, + stormwaterFlooding: null, + sites: null + }) + + useEffect(() => { + const fetchMapLayerData = async () => { + const resCoastalFlooding = await axios.get("./data/CoastalFlood.geo.json") + const resJusticeArea = await axios.get("./data/EnvironmentalJusticeArea.geo.json") + const resEvacuationZone = await axios.get("./data/HurricaneEvacuationZones.geo.json") + const resNeighborhood = await axios.get("./data/2020_nys_neigborhood.geo.json") + const resStormwaterFlooding = await axios.get("./data/2020_nys_neigborhood.geo.json") + const resSites = await axios.get("./data/floodgen_sites.geo.json") + + setMapLayerData({ + ...mapLayerData, + coastalFlooding: resCoastalFlooding.data, + justiceArea: resJusticeArea.data, + evacuationZone: resEvacuationZone.data, + neighborhood: resNeighborhood.data, + stormwaterFlooding: resStormwaterFlooding.data, + sites: resSites.data + }) + } + fetchMapLayerData() + + }, []) + + + return { mapLayerData } +} + +export default useFetchMapLayerData \ No newline at end of file diff --git a/next.config.js b/next.config.js index 3281bf3..de1ac53 100644 --- a/next.config.js +++ b/next.config.js @@ -3,9 +3,9 @@ const nextConfig = { output: "export", basePath: '/floodgen', reactStrictMode: true, - // env: { - // BASE_URL: process.env.NEXT_PUBLIC_MAPBOX_API_KEY, - // } + env: { + BASE_URL: process.env.NEXT_PUBLIC_MAPBOX_API_KEY, + } }