Skip to content

Commit

Permalink
apply axios for data import
Browse files Browse the repository at this point in the history
  • Loading branch information
@CloudLun
CloudLun committed Mar 6, 2024
1 parent a637ee2 commit 699d94c
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 174 deletions.
8 changes: 3 additions & 5 deletions components/infoPage/infoBox/InfoBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import InfoCredit from './InfoCredit'
import Image from 'next/image'



const InfoBox = () => {


Expand All @@ -34,12 +33,11 @@ const InfoBox = () => {
setBoxShown(b)
}


return (
<>
<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' />
<div className=' px-5 lg:px-16 pt-8 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' className='mb-2'/>
{/* <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]'>
Expand All @@ -52,7 +50,7 @@ const InfoBox = () => {
</div>
</div>
</div>
<div className={`absolute top-7 left-4 lg:left-[calc(100%_-_4.5rem)] flex items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-30 shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
<div className={`absolute top-[1.125rem] left-4 lg:left-[calc(100%_-_4.5rem)] flex items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-30 shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
{
boxShown ? <XMarkIcon className='w-6 h-6 text-black' /> : <Bars3Icon className='w-5 h-5 text-black' />
}
Expand Down
313 changes: 154 additions & 159 deletions components/map/Map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'



Expand All @@ -22,169 +17,169 @@ const Map = () => {
const mapContainer = useRef<HTMLInputElement>(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])



Expand Down
Loading

0 comments on commit 699d94c

Please sign in to comment.