diff --git a/app/page.tsx b/app/page.tsx index 4f77899..69c356f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -52,16 +52,16 @@ export default function Home() { return ( <>
+ + + + { (windowSize.width < 820) &&
This website is best viewed on desktop
} - - - -
diff --git a/components/Geopanel/Membershippanel.tsx b/components/Geopanel/Membershippanel.tsx index bbdf14e..f11d7a9 100644 --- a/components/Geopanel/Membershippanel.tsx +++ b/components/Geopanel/Membershippanel.tsx @@ -122,8 +122,8 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }: {panelShown["memberpanelShown"] && (
-
-
{selectedMemberFeatures?.properties.Name.toUpperCase()}
+
+
{selectedMemberFeatures?.properties.Name.toUpperCase()}
defaultMapHandler(legislations)} />
diff --git a/components/Map/Legend.tsx b/components/Map/Legend.tsx index 39426c3..3a9f6df 100644 --- a/components/Map/Legend.tsx +++ b/components/Map/Legend.tsx @@ -37,7 +37,7 @@ const Legend = () => { />
{panelShown && ( -
+

{legislations === "Statewide RTC" ? "Statewide Right to Counsel " : legislations === "Defend RTC" ? "Defend Right to Counsel " : "Winter Eviction Moratorium "} @@ -45,39 +45,42 @@ const Legend = () => {

panelClickHandler(false)} />
-
-
-
-
-
Support, Democrat
-
-
-
-
Support, Republican
-
-
-
-
- No Support, Democrat -
No Support, Democrat
+
+
+
+
+
+
Support, Democrat
+
+
+
+
Support, Republican
+
-
- No Support, Republican -
No Support, Republican
+
+
+ No Support, Democrat +
No Support, Democrat
+
+
+ No Support, Republican +
No Support, Republican
+
+ {membershipShown && ( -
+
Member, Right to Counsel Coalition
diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx index 2e09588..bdcfb31 100644 --- a/components/Map/Map.tsx +++ b/components/Map/Map.tsx @@ -131,18 +131,32 @@ const Map = () => { }) - let patternRepImg = new Image(80, 80) + let patternRepImg = new Image(75, 75) patternRepImg.onload = () => m.addImage("pattern_rep", patternRepImg, { sdf: true, }) patternRepImg.src = pattern_red.src - let patternDemoImg = new Image(80, 80) + let patternDemoImg = new Image(75, 75) patternDemoImg.onload = () => m.addImage("pattern_demo", patternDemoImg, { sdf: true, }) patternDemoImg.src = pattern_blue.src + m.addLayer({ + id: "background", + type: "fill", + source: 'districts', + paint: { + "fill-color": "white", + 'fill-opacity': [ + "case", + ["all", ["!", ["in", legislations, ["get", "HCMC support"]]]], + 1, 0 + ] + } + }) + m.addLayer({ 'id': 'districts', 'type': 'fill', @@ -179,59 +193,9 @@ const Map = () => { } }); - m.addLayer({ - 'id': 'districts_clicked_outline', - 'type': 'line', - 'source': 'districts', - 'layout': {}, - 'paint': { - 'line-color': [ - "case", - ["all", ["==", ["get", "Party_x"], "Democratic"]], - "#006fd6", - "#D04E40" - ], - 'line-width': 0 - } - }); - m.addLayer({ - 'id': 'districts_hovered', - 'type': 'fill', - 'source': 'districts_hovered', - 'layout': {}, - 'paint': { - 'fill-color': "black", - 'fill-opacity': 1 - }, - }); - m.addLayer({ - id: "district_label", - type: 'symbol', - source: 'district_label', - layout: { - 'text-field': ['get', 'label'], - 'text-justify': 'auto', - 'text-size': 14, - 'text-variable-anchor': ['top', 'bottom', 'left', 'right'], - // 'text-radial-offset': 0.5, - 'text-font': ["Arial Unicode MS Bold"], - "text-offset": [0, -1.5] - }, - paint: { - 'text-opacity': 1, - "text-color": [ - "case", - ["all", ["==", ["get", "party"], "Democratic"]], - "#121D3E", - "#121D3E" - ], - 'text-halo-color': 'white', - "text-halo-width": 0.6 - } - }) m.addLayer({ id: "pattern", @@ -272,6 +236,32 @@ const Map = () => { }, }); + m.addLayer({ + id: "district_label", + type: 'symbol', + source: 'district_label', + layout: { + 'text-field': ['get', 'label'], + 'text-justify': 'auto', + 'text-size': 14, + 'text-variable-anchor': ['top', 'bottom', 'left', 'right'], + // 'text-radial-offset': 0.5, + 'text-font': ["Arial Unicode MS Bold"], + "text-offset": [0, -1.5] + }, + paint: { + 'text-opacity': 1, + "text-color": [ + "case", + ["all", ["==", ["get", "party"], "Democratic"]], + "#121D3E", + "#121D3E" + ], + 'text-halo-color': 'white', + "text-halo-width": 0.6 + } + }) + m.addLayer({ id: "members_label", type: 'symbol', @@ -294,8 +284,39 @@ const Map = () => { }) + m.addLayer({ + 'id': 'districts_clicked_outline', + 'type': 'line', + 'source': 'districts', + 'layout': {}, + 'paint': { + 'line-color': [ + "case", + ["all", ["==", ["get", "Party_x"], "Democratic"]], + "#006fd6", + "#D04E40" + ], + 'line-width': 0 + } + }); + m.addLayer({ + 'id': 'districts_hovered', + 'type': 'fill', + 'source': 'districts_hovered', + 'layout': {}, + 'paint': { + 'fill-color': "black", + 'fill-opacity': 1 + }, + }); + + + + + m.moveLayer('districts_outline', 'districts_hovered') m.moveLayer("districts", "members") + m.moveLayer('pattern', 'members') m.on("click", "districts", (e: MapMouseEvent & EventData) => { @@ -350,6 +371,7 @@ const Map = () => { m.moveLayer("districts_outline", "members_label") m.moveLayer("districts_outline", "members") + }) @@ -405,7 +427,6 @@ const Map = () => { 1 ]) - m.moveLayer("districts", "districts_outline") }) m.on("mouseleave", "districts", () => { @@ -468,14 +489,6 @@ const Map = () => { }; }, []) - // useEffect(() => { - // const cover = d3.select("body") - // .append("div") - // .attr('class', 'cover') - // .attr('fill', "#121D3E") - - // if (mapShown === false) cover.attr("visibility", "visible") - // }, [mapShown]) diff --git a/components/SidePanel/SidePanel.tsx b/components/SidePanel/SidePanel.tsx index c24673c..9cc272a 100644 --- a/components/SidePanel/SidePanel.tsx +++ b/components/SidePanel/SidePanel.tsx @@ -44,6 +44,12 @@ const SidePanel = () => { 1, 0 ]) + map?.setPaintProperty("background", 'fill-opacity', [ + "case", + ["in", l, ["get", "HCMC support"]], + 0, 1 + ]) + map?.setPaintProperty("pattern", 'fill-opacity', [ "case", ["in", l, ["get", "HCMC support"]], @@ -95,7 +101,7 @@ const SidePanel = () => {
{mapShown === false && -
+
The Clean Hands legislation is in development.
Map information will be available in the near future
} diff --git a/context/MapContext.tsx b/context/MapContext.tsx index 3f8422d..de1a3ee 100644 --- a/context/MapContext.tsx +++ b/context/MapContext.tsx @@ -102,11 +102,18 @@ const MapProvider = ({ children }: Props) => { m.moveLayer("districts", "districts_clicked_outline") + m.moveLayer("districts", "members") m.moveLayer('districts', "counties_borders") m.moveLayer("districts", "zipcodes") + m.moveLayer("districts_outline", "members") + m.moveLayer('districts_outline', 'districts_clicked_outline') m.moveLayer("districts_clicked_outline", "members") m.moveLayer("districts_clicked_outline", "district_label") m.moveLayer("pattern", "district_label") + m.moveLayer('pattern', 'districts_clicked_outline') + m.moveLayer('pattern', 'members') + + @@ -114,7 +121,7 @@ const MapProvider = ({ children }: Props) => { m.flyTo({ center: targetCentroid as [number, number], - zoom: targetCentroid[0] > -74.15 && targetCentroid[1] < 41.05 ? 11 : 8 + zoom: targetCentroid[0] > -74.15 && targetCentroid[1] < 41.05 ? 11 : 7.5 }) setPanelShown({ geopanelShown: true, memberpanelShown: false }) diff --git a/public/legislations_info.json b/public/legislations_info.json index 6d9a5bc..0981b87 100644 --- a/public/legislations_info.json +++ b/public/legislations_info.json @@ -10,7 +10,7 @@ }, { "Assembly Sponsor": "Linda Rosenthal", - "Senate Number": "", + "Senate Number": "TBD", "Link to bill text": "https://nyassembly.gov/leg/?default_fld=&leg_video=&bn=A00490&term=&Summary=Y&Actions=Y", "Assembly Number": "A490", "Bill Name": "Clean Hands",