fixed the updated members issues

BetaNYC · Dec 28, 2023 · e249e77 · e249e77
1 parent e651cf5
commit e249e77
Show file tree

Hide file tree

Showing 4 changed files with 7,696 additions and 234 deletions.
diff --git a/components/Geopanel/Membershippanel.tsx b/components/Geopanel/Membershippanel.tsx
@@ -11,8 +11,8 @@ import senate from "../../public/senate.geo.json"
 
 import assemblyOverlapped from "../../public/assembly_overlapping_boundaries.json"
 import senateOverlapped from "../../public/senate_overlapping_boundaries.json"
-import membersOverlapped from "../../public/rtc_members_info.json"
-
+import membersOverlapped from "../../public/rtc_members.geo.json"
+import membersInfo from "../../public/rtc_members_info.json"
 import { EventData, MapMouseEvent } from 'mapbox-gl';
 
 
@@ -25,7 +25,7 @@ type Props = {
 const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }: Props) => {
 
     const { map, setDistricts, legislations, panelShown, setPanelShown, defaultMapHandler, mapClickHandler, setSelectedDistrictFeatures, setSelectedDistrictOverlappedData } = useContext(MapContext) as MapContextType
-    const selectedMemberOverlappedData = (membersOverlapped).filter(m => m.Name === selectedMemberFeatures?.properties.Name)[0]
+    const selectedMemberOverlappedData = (membersOverlapped.features).filter(m => m.properties.Name === selectedMemberFeatures?.properties.Name)[0]?.properties
 
 
     const districtClickHandler = (e: MouseEvent<HTMLElement>, district: Districts) => {
@@ -151,7 +151,7 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
             setSelectedMemberFeatures(e.features[0])
             setPanelShown({ ...panelShown, geopanelShown: false, memberpanelShown: true })
 
-            const targetCentroid = [e.features[0].properties.lon, e.features[0].properties.lat]
+            const targetCentroid = [e.features[0].geometry.coordinates[0], e.features[0].geometry.coordinates[1]]
             map?.flyTo({
                 center: targetCentroid as [number, number],
                 zoom: targetCentroid[0] > -74.15 && targetCentroid[1] < 41.05 ? 13 : 8
@@ -237,24 +237,28 @@ 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]'>
+                                 {/* @ts-ignore */}
                                 <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]'>
+                                 {/* @ts-ignore */}
                                 <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-2 gap-[12px]'>
+                                 {/* @ts-ignore */}
                                 <GeoInfoBtns name={selectedMemberOverlappedData['County'].toString().replace(" County", "")} mouseEnterHandler={countyMouseEnterHandler} mouseOutHandler={removeHoverEventHandler} />
                             </div>
                         </div>
                         <div>
                             <div className='mb-[5px] text-[10px] text-grey_1'>Zip Codes</div>
                             <div className='grid grid-cols-3 gap-[12px]'>
+                                 {/* @ts-ignore */}
                                 <GeoInfoBtns name={selectedMemberOverlappedData['Zip_Code'].toString()} mouseEnterHandler={zipcodeMouseEnterHandler} mouseOutHandler={removeHoverEventHandler} />
                             </div>
                         </div>

diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx
@@ -128,10 +128,10 @@ const Map = () => {
             })
 
             m.addSource("counties_label", {
-                type:"geojson",
+                type: "geojson",
                 data: {
-                    type:"FeatureCollection",
-                    features:[]
+                    type: "FeatureCollection",
+                    features: []
                 }
             })
 
@@ -395,6 +395,7 @@ const Map = () => {
             })
 
             m.on('click', "members", (e: MapMouseEvent & EventData) => {
+                console.log(e.features[0].properties.Name)
                 setSelectedMemberFeatures(e.features[0])
                 setPanelShown({ geopanelShown: false, memberpanelShown: true })
 
@@ -408,7 +409,7 @@ const Map = () => {
                             },
                             "geometry": {
                                 'type': 'Point',
-                                'coordinates': [e.features[0].properties.lon, e.features[0].properties.lat]
+                                'coordinates': [e.features[0].geometry.coordinates[0], e.features[0].geometry.coordinates[1]]
                             }
                         }
                     ]
@@ -505,7 +506,7 @@ const Map = () => {
                     <div class="w-[150px] font-bold text-[14px]">${properties.Name}</div>
                     <div class="flex flex-col items-center">
                         <img src=${properties['Membership Status'].includes('Member') ? "/icons/checked_member.svg" : "/icons/empty_member.svg"} alt="" className="w-[16px] h-[16px]" />
-                        <div class="font-regular text-[8px] text-center">${properties['Membership Status']}</div>
+                        <div class="font-regular text-[8px] text-center">${properties['Membership Status'].replaceAll(`"`, "").replaceAll(`[`, "").replaceAll(`]`, "")}</div>
                     </div>
                 </div>
                 <div class="px-[17px] pt-[8px] pb-[12px] text-navy bg-white rounded-b-[20px]">