change the mapbox studio link

BetaNYC · Dec 12, 2023 · 21b0bec · 21b0bec
1 parent 17ebc1e
commit 21b0bec
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 48 deletions.
diff --git a/components/Geopanel/Geopanel.tsx b/components/Geopanel/Geopanel.tsx
@@ -58,16 +58,6 @@ const Geopanel = () => {
             1, 0
         ])
 
-        // map?.moveLayer("background", "zipcodes")
-        // map?.moveLayer("background", "districts")
-        // map?.moveLayer("background", "pattern")
-        // map?.moveLayer("background", 'districts_outline')
-        // map?.moveLayer("background", 'districts_outline')
-        // map?.moveLayer("districts", 'districts_outline')
-        // map?.moveLayer("pattern", 'districts_outline')
-        // map?.moveLayer("pattern", 'districts_clicked_outline')
-        // map?.moveLayer("districts", "zipcodes")
-        // map?.moveLayer("pattern", "zipcodes")
 
 
         map?.moveLayer("background", "zipcodes")

diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx
@@ -64,10 +64,10 @@ const Map = () => {
 
     useEffect(() => {
         mapboxgl.accessToken =
-            "pk.eyJ1IjoiY2xvdWRsdW4iLCJhIjoiY2s3ZWl4b3V1MDlkejNkb2JpZmtmbHp4ZiJ9.MbJU7PCa2LWBk9mENFkgxw";
+            "pk.eyJ1IjoiYmV0YW55YyIsImEiOiJhdEk0RmZ3In0.z3ayA_ZWlFP7Co7h-T-6WQ";
         const m = new mapboxgl.Map({
             container: mapContainer.current || "",
-            style: "mapbox://styles/cloudlun/clm6k2n6y02gi01ns267c139m",
+            style: "mapbox://styles/betanyc/clq1zgqf500ms01ol2wkifjlu",
             center: [lng, lat],
             zoom: zoom,
             minZoom: 6,
@@ -177,26 +177,6 @@ const Map = () => {
                 },
             });
 
-            m.addLayer({
-                'id': 'districts_outline',
-                'type': 'line',
-                'source': 'districts',
-                'layout': {},
-                'paint': {
-                    'line-color': [
-                        "case",
-                        ["all", ["==", ["get", "Party_x"], "Democratic"]],
-                        "#006fd6",
-                        "#D04E40"
-                    ],
-                    'line-width': 1
-                }
-            });
-
-
-
-
-
             m.addLayer({
                 id: "pattern",
                 type: "fill",
@@ -215,6 +195,22 @@ const Map = () => {
                 }
             })
 
+            m.addLayer({
+                'id': 'districts_outline',
+                'type': 'line',
+                'source': 'districts',
+                'layout': {},
+                'paint': {
+                    'line-color': [
+                        "case",
+                        ["all", ["==", ["get", "Party_x"], "Democratic"]],
+                        "#006fd6",
+                        "#D04E40"
+                    ],
+                    'line-width': 1
+                }
+            });
+
 
             m.addLayer({
                 'id': 'members',
@@ -315,10 +311,11 @@ const Map = () => {
 
             m.moveLayer("background", "districts")
             m.moveLayer("background", "zipcodes")
-            m.moveLayer('districts_outline',  'districts_hovered')
+            m.moveLayer('districts_outline', 'districts_hovered')
             m.moveLayer("districts", "members")
             m.moveLayer('pattern', 'members')
-
+            m.moveLayer("districts", "counties_borders")
+            m.moveLayer('pattern', "counties_borders")
             m.moveLayer("districts", "zipcodes")
             m.moveLayer("pattern", "zipcodes")
 

diff --git a/context/MapContext.tsx b/context/MapContext.tsx
@@ -74,7 +74,13 @@ const MapProvider = ({ children }: Props) => {
         while (coordinatesArray.length === 1) coordinatesArray = coordinatesArray[0]
         const targetPolygon = turf.polygon([coordinatesArray])
         /* @ts-ignore */
-        const targetCentroid = turf.center(targetPolygon).geometry.coordinates
+        let targetCentroid = turf.center(targetPolygon).geometry.coordinates
+        console.log(targetCentroid)
+        if(district === 48) targetCentroid[1] = targetCentroid[1] - 0.25
+        if(district === 49) {
+            targetCentroid[0] = targetCentroid[0] - 0.275
+            targetCentroid[1] = targetCentroid[1] + 0.1
+        } 
         const labelData = {
             'type': 'FeatureCollection',
             'features': [
@@ -100,12 +106,15 @@ const MapProvider = ({ children }: Props) => {
 
         m.setPaintProperty("district_label", "text-opacity", 1)
 
-
-
+        m.flyTo({
+            center: targetCentroid as [number, number],
+            zoom: targetCentroid[0] > -74.15 && targetCentroid[1] < 41.05 ? 11 : 8
+        })
 
         m.moveLayer("districts", "districts_clicked_outline")
         m.moveLayer("districts", "members")
         m.moveLayer('districts', "counties_borders")
+        m.moveLayer('pattern', "counties_borders")
         m.moveLayer("background", "zipcodes")
         m.moveLayer("districts", "zipcodes")
         m.moveLayer("districts_outline", "members")
@@ -116,17 +125,6 @@ const MapProvider = ({ children }: Props) => {
         m.moveLayer('pattern', 'districts_clicked_outline')
         m.moveLayer('pattern', 'members')
 
-
-
-
-
-
-
-        m.flyTo({
-            center: targetCentroid as [number, number],
-            zoom: targetCentroid[0] > -74.15 && targetCentroid[1] < 41.05 ? 11 : 8
-        })
-
         setPanelShown({ geopanelShown: true, memberpanelShown: false })
         setSelectedDistrictFeatures(e.features[0])
         setSelectedDistrictOverlappedData((e.features[0].properties.House.toLowerCase() === "senate" ? senateOverlapped : assemblyOverlapped).filter(d => +d.district === +e.features[0]?.properties.District)[0])