From af16786342956b5e7cd79f4de3334c95058508db Mon Sep 17 00:00:00 2001
From: CloudLun <cloud830902@gmail.com>
Date: Fri, 15 Dec 2023 05:01:16 +0800
Subject: [PATCH] revise county labels

---
 components/Geopanel/Geopanel.tsx | 49 ++++++++++++++++++++++++++------
 components/Map/Map.tsx           | 34 ++++++++++++++++++++++
 2 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/components/Geopanel/Geopanel.tsx b/components/Geopanel/Geopanel.tsx
index e7c22ba..a71dff3 100644
--- a/components/Geopanel/Geopanel.tsx
+++ b/components/Geopanel/Geopanel.tsx
@@ -9,6 +9,7 @@ import * as turf from "@turf/turf";
 
 import assembly from "../../public/assembly.geo.json"
 import senate from "../../public/senate.geo.json"
+import counties from "../../public/nys_counties.geo.json"
 
 import assemblyOverlapped from "../../public/assembly_overlapping_boundaries.json"
 import senateOverlapped from "../../public/senate_overlapping_boundaries.json"
@@ -20,6 +21,10 @@ import { EventData, MapMouseEvent } from 'mapbox-gl';
 const Geopanel = () => {
 
     const { map, districts, setDistricts, legislations, mapClickHandler, panelShown, defaultMapHandler, selectedDistrictFeatures, setSelectedDistrictFeatures, selectedDistrictOverlappedData, setSelectedDistrictOverlappedData } = useContext(MapContext) as MapContextType
+
+    /* @ts-ignore */
+    const countiesFeatures = (counties as GeoJson).features
+
     const districtBtnClickHandler = (e: MouseEvent<HTMLElement>, district: Districts) => {
         const selectedDistrict = (e.target as HTMLElement).innerText
         /* @ts-ignore */
@@ -104,25 +109,51 @@ const Geopanel = () => {
         map?.moveLayer('districts_outline', "zipcodes")
         map?.moveLayer('districts_clicked_outline', "zipcodes")
 
+    }
 
-4
+    const countyMouseEnterHandler = (e: MouseEvent<HTMLElement>) => {
+        const selectedCounty = (e.target as HTMLElement).innerText
 
+        const hoveredCountyData = {
+            /* @ts-ignore */
+            features: (counties as GeoJson).features.filter((d, i) => d.properties.name === selectedCounty + " County")
+        }
 
 
-    }
+        let coordinatesArray = hoveredCountyData.features[0].geometry.coordinates[0]
+        while (coordinatesArray.length === 1) coordinatesArray = coordinatesArray[0]
+        const targetPolygon = turf.polygon([coordinatesArray])
+        /* @ts-ignore */
+        const targetCentroid = turf.center(targetPolygon).geometry.coordinates
+        const labelData = {
+            'type': 'FeatureCollection',
+            'features': [
+                {
+                    "type": "Feature",
+                    "properties": {
+                        "label": hoveredCountyData.features[0].properties.name,
+                    },
+                    "geometry": {
+                        'type': 'Point',
+                        'coordinates': targetCentroid
+                    }
+                }
+            ]
+        }
+
+        /* @ts-ignore */
+        map?.getSource("counties_label").setData({
+            type: "FeatureCollection",
+            features: labelData.features as GeoJson["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"]],
             .7, 0
         ])
-        map?.setPaintProperty("counties_labels", "text-opacity", [
-            "case",
-            ['all', ['==', ['get', "name"], selectedCounty + " County"]],
-            1, 0
-        ])
+        map?.setPaintProperty("counties_labels", "text-opacity", 1)
+
         map?.moveLayer("background", "counties_borders")
         map?.moveLayer("districts", "counties_borders")
         map?.moveLayer('pattern', "counties_borders")
diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx
index 1c59276..077985f 100644
--- a/components/Map/Map.tsx
+++ b/components/Map/Map.tsx
@@ -6,11 +6,14 @@ import { MapContext, MapContextType } from "../../context/MapContext";
 import mapboxgl, { EventData, MapMouseEvent } from 'mapbox-gl';
 import { GeoJSONSource } from 'mapbox-gl';
 
+
+
 import assembly from "../../public/assembly.geo.json"
 import senate from "../../public/senate.geo.json"
 import member from "../../public/rtc_members.geo.json"
 
 
+
 import Legend from "./Legend";
 import MapLayers from "./MapLayers";
 import Geopanel from "../Geopanel/Geopanel";
@@ -34,6 +37,7 @@ const Map = () => {
     /* @ts-ignore */
     const memberFeatures = (member as GeoJson).features
 
+
     const [lng, setLng] = useState(-78.5);
     const [lat, setLat] = useState(43.05);
     const [zoom, setZoom] = useState(-6.25);
@@ -123,6 +127,14 @@ const Map = () => {
                 },
             })
 
+            m.addSource("counties_label", {
+                type:"geojson",
+                data: {
+                    type:"FeatureCollection",
+                    features:[]
+                }
+            })
+
             m.addSource("members", {
                 type: "geojson",
                 data: {
@@ -219,6 +231,8 @@ const Map = () => {
                 }
             });
 
+
+
             m.addLayer({
                 'id': 'members',
                 'type': 'circle',
@@ -313,6 +327,26 @@ const Map = () => {
                 },
             });
 
+            m.addLayer({
+                id: "counties_labels",
+                type: 'symbol',
+                source: 'counties_label',
+                layout: {
+                    'text-field': ['get', 'label'],
+                    'text-justify': 'auto',
+                    'text-size': 12,
+                    'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
+                    'text-font': ["Arial Unicode MS Bold"],
+                    "text-offset": [0, -1.5]
+                },
+                paint: {
+                    'text-opacity': 0,
+                    "text-color": "white",
+                    'text-halo-color': 'black',
+                    "text-halo-width": .6
+                }
+            })
+
             m.addLayer({
                 id: "districts_hovered_label",
                 type: 'symbol',