Skip to content

Commit

Permalink
Merge pull request #2 from BetaNYC/map-interactive-features
Browse files Browse the repository at this point in the history 
completed
  • Loading branch information
@CloudLun
CloudLun authored Dec 6, 2023
2 parents ef0e9d3 + 116a064 commit 06c5d29
Show file tree
Hide file tree
Showing 9 changed files with 260 additions and 105 deletions.
43 changes: 30 additions & 13 deletions components/Geopanel/Geopanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,6 @@ import { EventData, MapMouseEvent } from 'mapbox-gl';








const Geopanel = () => {

const { map, districts, setDistricts, legislations, mapClickHandler, panelShown, defaultMapHandler, selectedDistrictFeatures, setSelectedDistrictFeatures, selectedDistrictOverlappedData, setSelectedDistrictOverlappedData } = useContext(MapContext) as MapContextType
Expand All @@ -32,40 +27,62 @@ const Geopanel = () => {
/* @ts-ignore */
features: ((district === "assembly" ? assembly : senate) as GeoJson).features.filter((d, i) => d.properties.District.toString() === selectedDistrict)
}

/* @ts-ignore */
mapClickHandler(map!, clickedDistrictData, legislations)

setDistricts(district)
setSelectedDistrictFeatures(clickedDistrictData.features[0])
setSelectedDistrictOverlappedData((district === "senate" ? senateOverlapped : assemblyOverlapped).filter(d => d.district === clickedDistrictData.features[0]?.properties.District)[0])
}

const districtMouseEnverHandler = (e: MouseEvent<HTMLElement>, district: Districts) => {
const targetDistrict = (e.target as HTMLElement).innerText

const hoveredDistrctData = {
features: ((district === "assembly" ? assembly : senate) as GeoJson).features.filter((d, i) => d.properties.District.toString() === targetDistrict)
}
/* @ts-ignore */
map?.getSource("districts_hovered").setData({
type: "FeatureCollection",
features: hoveredDistrctData.features
})
}

const zipcodeMouseEnterHandler = (e: MouseEvent<HTMLElement>) => {
const selectedZipcodes = (e.target as HTMLElement).innerText
map?.setPaintProperty("zipcodes", "fill-opacity", [
"case",
['all', ['==', ['get', "ZCTA5CE10"], selectedZipcodes]],
.5, 0
1, 0
])
map?.moveLayer("districts", "zipcodes")
}

const countyMouseEnterHandler = (e: MouseEvent<HTMLElement>) => {
const selectedCounty = (e.target as HTMLElement).innerText
map?.setPaintProperty("counties_borders", "fill-opacity", [
"case",
['all', ['==', ['get', "name"], selectedCounty + " County"]],
.5, 0
1, 0
])
map?.setPaintProperty("counties_labels", "text-opacity", [
"case",
['all', ['==', ['get', "name"], selectedCounty + " County"]],
1, 0
])
map?.moveLayer("districts", "counties_borders")
}

const removeHoverEventHandler = () => {
map?.setPaintProperty("counties_borders", "fill-opacity", 0)
map?.setPaintProperty("counties_labels", "text-opacity", 0)
map?.setPaintProperty("zipcodes", "fill-opacity", 0)
/* @ts-ignore */
map?.getSource("districts_hovered").setData({
type: "FeatureCollection",
features: []
})
}

useEffect(() => {
Expand Down Expand Up @@ -99,19 +116,19 @@ const Geopanel = () => {
<div className='flex-1 p-[18px] w-full bg-white overflow-y-scroll'>
<div className='text-[10px] text-regular text-grey_1'>HCMC Campaign Support</div>
<div className="flex flex-col gap-[5px] mt-[6px] text-rtc_navy">
<div className="flex items-center gap-[5px] ">
<div className="flex items-start gap-[8px] ">
<img src={selectedDistrictFeatures?.properties!["HCMC support"].includes("Statewide RTC") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Statewide Right to Counsel</div>
</div>
<div className="flex items-center gap-[5px]">
<div className="flex items-start gap-[5px]">
<img src={selectedDistrictFeatures?.properties!["HCMC support"].includes("Winter Eviction Moratorium") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Winter Eviction Moratorium</div>
</div>
<div className="flex items-center gap-[5px]">
<div className="flex items-start gap-[5px]">
<img src={selectedDistrictFeatures?.properties!["HCMC support"].includes("Defend RTC") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Defend Right to Counsel</div>
</div>
<div className="flex items-center gap-[5px]">
<div className="flex items-start gap-[5px]">

<img src={selectedDistrictFeatures?.properties!["HCMC support"].includes("Fund Local Law 53") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Power to Organize:<br /> Fund Local Law 53</div>
Expand Down Expand Up @@ -157,9 +174,9 @@ const Geopanel = () => {
selectedDistrictOverlappedData.districts
.map((c, i) => {
if (districts === 'senate')
return <GeoInfoBtns key={i} name={c.toString()} clickHandler={(e) => districtBtnClickHandler(e, "assembly")} />
return <GeoInfoBtns key={i} name={c.toString()} clickHandler={(e) => districtBtnClickHandler(e, "assembly")} mouseEnterHandler={(e) => districtMouseEnverHandler(e, "assembly")} mouseOutHandler={removeHoverEventHandler}/>
if (districts === 'assembly')
return <GeoInfoBtns key={i} name={c.toString()} clickHandler={(e) => districtBtnClickHandler(e, "senate")} />
return <GeoInfoBtns key={i} name={c.toString()} clickHandler={(e) => districtBtnClickHandler(e, "senate")} mouseEnterHandler={(e) => districtMouseEnverHandler(e, "senate")} mouseOutHandler={removeHoverEventHandler}/>
}

)
Expand Down
41 changes: 32 additions & 9 deletions components/Geopanel/Membershippanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,27 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
setPanelShown({ ...panelShown, memberpanelShown: false, geopanelShown: true })
}

const districtMouseEnverHandler = (e: MouseEvent<HTMLElement>, district: Districts) => {
const targetDistrict = (e.target as HTMLElement).innerText

const hoveredDistrctData = {
features: ((district === "assembly" ? assembly : senate) as GeoJson).features.filter((d, i) => d.properties.District.toString() === targetDistrict)
}
/* @ts-ignore */
map?.getSource("districts_hovered").setData({
type: "FeatureCollection",
features: hoveredDistrctData.features
})
}



const countyMouseEnterHandler = (e: MouseEvent<HTMLElement>) => {
const selectedCounty = (e.target as HTMLElement).innerText
map?.setPaintProperty("counties_borders", "fill-opacity", [
"case",
['all', ['==', ['get', "name"], selectedCounty + " County"]],
.5, 0
1, 0
])

map?.setPaintProperty("counties_labels", "text-opacity", [
Expand All @@ -70,25 +83,35 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
map?.setPaintProperty("zipcodes", "fill-opacity", [
"case",
['all', ['==', ['get', "ZCTA5CE10"], selectedZipcodes]],
.5, 0
1, 0
])
map?.moveLayer("districts", "zipcodes")
}

const removeHoverEventHandler = () => {
map?.setPaintProperty("counties_borders", "fill-opacity", 0)
map?.setPaintProperty("counties_labels", "text-opacity", 0)
map?.setPaintProperty("counties_labels", "text-opacity", 0)
map?.setPaintProperty("zipcodes", "fill-opacity", 0)

/* @ts-ignore */
map?.getSource("districts_hovered").setData({
type: "FeatureCollection",
features: []
})
map?.moveLayer("districts", "counties_borders")
}


useEffect(() => {
map?.on('click', "members", (e: MapMouseEvent & EventData) => {
setSelectedMemberFeatures(e.features[0])
setPanelShown({ ...panelShown, geopanelShown: false, memberpanelShown: true })

const targetCentroid = [e.features[0].properties.lon, e.features[0].properties.lat]
map?.flyTo({
center: [e.features[0].properties.lon, e.features[0].properties.lat],
zoom: 9.5
center: targetCentroid as [number, number],
zoom: targetCentroid[0] > -74.15 && targetCentroid[1] < 41.05 ? 12 : 8
})
})
})
Expand All @@ -99,7 +122,7 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
<div className='flex flex-col absolute top-0 right-0 w-[14%] min-w-[200px] h-full z-20 overflow-y-scroll'>
<div className='px-[18px] py-[12px] w-full bg-rtc_purple'>
<div className={`flex items-start justify-between my-[12px] w-full `}>
<div className='w-[75%] font-semibold text-subheadline'>{selectedMemberFeatures?.properties.Name.toUpperCase()}</div>
<div className='w-[75%] font-bold text-subheadline'>{selectedMemberFeatures?.properties.Name.toUpperCase()}</div>
<XMarkIcon className='w-[20px] h-[20px] text-white cursor-pointer' onClick={() => defaultMapHandler(legislations)} />
</div>
<div className='flex items-center gap-[6px]'>
Expand All @@ -113,7 +136,7 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
<div className='flex-1 p-[18px] w-full bg-white'>
<div className='text-[10px] text-regular text-grey_1'>HCMC Campaign Support</div>
<div className="flex flex-col gap-[5px] mt-[6px] text-rtc_navy">
<div className="flex items-start gap-[5px] ">
<div className="flex items-start gap-[8px] ">
{/* @ts-ignore */}
<img src={selectedMemberFeatures?.properties!["Legislation"].includes("Statewide RTC") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Statewide Right to Counsel</div>
Expand Down Expand Up @@ -166,18 +189,18 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
<div>
<div className='mb-[5px] text-[10px] text-grey_1'>Senate Districts</div>
<div className='grid grid-cols-4 gap-[8px]'>
<GeoInfoBtns name={selectedMemberOverlappedData['Senate_District'].toString()} clickHandler={(e) => districtClickHandler(e, "senate")} />
<GeoInfoBtns name={selectedMemberOverlappedData['Senate_District'].toString()} clickHandler={(e) => districtClickHandler(e, "senate")} mouseEnterHandler={(e) => districtMouseEnverHandler(e, "senate")} mouseOutHandler={removeHoverEventHandler} />
</div>
</div>
<div className='my-[16px]'>
<div className='mb-[5px] text-[10px] text-grey_1'>Assembly Districts</div>
<div className='grid grid-cols-4 gap-[8px]'>
<GeoInfoBtns name={selectedMemberOverlappedData['Assembly_District'].toString()} clickHandler={(e) => districtClickHandler(e, "assembly")} />
<GeoInfoBtns name={selectedMemberOverlappedData['Assembly_District'].toString()} clickHandler={(e) => districtClickHandler(e, "assembly")} mouseEnterHandler={(e) => districtMouseEnverHandler(e, "assembly")} mouseOutHandler={removeHoverEventHandler} />
</div>
</div>
<div className='my-[16px]'>
<div className='mb-[5px] text-[10px] text-grey_1'>Counties</div>
<div className='grid grid-cols-3 gap-[12px]'>
<div className='grid grid-cols-2 gap-[12px]'>
<GeoInfoBtns name={selectedMemberOverlappedData['County'].toString().replace(" County", "")} mouseEnterHandler={countyMouseEnterHandler} mouseOutHandler={removeHoverEventHandler} />
</div>
</div>
Expand Down
Loading

0 comments on commit 06c5d29

Please sign in to comment.