Skip to content

Commit

Permalink
revise the map layers z index
Browse files Browse the repository at this point in the history
  • Loading branch information
@CloudLun
CloudLun committed Dec 11, 2023
1 parent 847a025 commit 16cc565
Show file tree
Hide file tree
Showing 7 changed files with 129 additions and 100 deletions.
8 changes: 4 additions & 4 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,16 @@ export default function Home() {
return (
<>
<div className='relative w-[100vw] h-[100vh] leading-[1.2]'>
<MapProvider >
<SidePanel />
<Map />
</MapProvider>
{
(windowSize.width < 820) &&
<div className='absolute top-0 left-0 flex justify-center items-center w-full h-full leading-[1.2] font-bold text-headline text-black bg-background_blue z-[100]'>
This website is best viewed on desktop
</div>
}
<MapProvider >
<SidePanel />
<Map />
</MapProvider>
</div>
</>

Expand Down
4 changes: 2 additions & 2 deletions components/Geopanel/Membershippanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,8 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
{panelShown["memberpanelShown"] && (
<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-bold text-subheadline'>{selectedMemberFeatures?.properties.Name.toUpperCase()}</div>
<div className={`flex items-start justify-between my-[12px] w-full text-white`}>
<div className='w-[75%] font-bold text-subheadline text-white'>{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 Down
63 changes: 33 additions & 30 deletions components/Map/Legend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,47 +37,50 @@ const Legend = () => {
/>
</div>
{panelShown && (
<div className='absolute left-[37%] md:left-[34%] lg:left-[32%] xl:left-[30%] top-[20px] p-[15px] text-rtc_navy bg-white rounded-[8px] drop-shadow-xl z-20'>
<div className='absolute left-[37%] md:left-[34%] lg:left-[32%] xl:left-[30%] top-[20px] p-[15px] text-rtc_navy bg-white rounded-[8px] drop-shadow-xl z-20'>
<div className='flex justify-between'>
<h2 className='w-[220px] mb-[8px] font-bold text-[13px] lg:text-title leading-[22.5px]'>
{legislations === "Statewide RTC" ? "Statewide Right to Counsel " : legislations === "Defend RTC" ? "Defend Right to Counsel " : "Winter Eviction Moratorium "}
{districts.charAt(0).toUpperCase() + districts.slice(1)} District Support Map
</h2>
<XMarkIcon className='w-[22px] h-[22px] text-grey_2 cursor-pointer' onClick={() => panelClickHandler(false)} />
</div>
<div className={`grid grid-cols-[1fr_1fr] ${membershipShown ? "lg:grid-cols-[1fr_1fr_1fr] grid-rows-2 lg:grid-rows-1" : "grid-rows-1"} gap-[10px] mt-[10px]`}>
<div className='lg:row-start-1 flex flex-col gap-[5px]'>
<div className='flex items-center gap-[10px]'>
<div className='w-[16px] h-[16px] bg-demo'></div>
<div className='text-label'>Support, Democrat</div>
</div>
<div className='flex items-center gap-[10px]'>
<div className='w-[16px] h-[16px] bg-rep'></div>
<div className='text-label'>Support, Republican</div>
</div>
</div>
<div className='lg:row-start-1 flex flex-col gap-[5px]'>
<div className='flex items-center gap-[10px]'>
<Image
src="/patterns/blue.svg"
width={16}
height={16}
alt="No Support, Democrat"
/>
<div className='text-label'>No Support, Democrat</div>
<div className={`mt-[5px]`}>
<div className='flex items-center gap-[15px] '>
<div className=' flex flex-col gap-[5px]'>
<div className=' flex items-center gap-[5px]'>
<div className='w-[16px] h-[16px] bg-demo'></div>
<div className='text-label'>Support, Democrat</div>
</div>
<div className='flex items-center gap-[5px]'>
<div className='w-[16px] h-[16px] bg-rep'></div>
<div className='text-label'>Support, Republican</div>
</div>
</div>
<div className='flex items-center gap-[10px]'>
<Image
src="/patterns/red.svg"
width={16}
height={16}
alt="No Support, Republican"
/>
<div className='text-label '>No Support, Republican</div>
<div className=' flex flex-col gap-[5px]'>
<div className='flex items-center gap-[5px]'>
<Image
src="/patterns/blue.svg"
width={16}
height={16}
alt="No Support, Democrat"
/>
<div className='text-label'>No Support, Democrat</div>
</div>
<div className='flex items-center gap-[5px]'>
<Image
src="/patterns/red.svg"
width={16}
height={16}
alt="No Support, Republican"
/>
<div className='text-label '>No Support, Republican</div>
</div>
</div>
</div>

{membershipShown && (
<div className='lg:row-start-1 flex flex-col gap-[5px]'>
<div className=' flex flex-col gap-[5px] mt-[13px]'>
<div className='flex items-center gap-[10px]'>
<div className='w-[16px] h-[16px] bg-[#802948] border-[2px] border-[#802948] rounded-full'></div>
<div className='text-label'>Member, Right to Counsel Coalition </div>
Expand Down
135 changes: 74 additions & 61 deletions components/Map/Map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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',
Expand All @@ -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) => {
Expand Down Expand Up @@ -350,6 +371,7 @@ const Map = () => {
m.moveLayer("districts_outline", "members_label")
m.moveLayer("districts_outline", "members")


})


Expand Down Expand Up @@ -405,7 +427,6 @@ const Map = () => {
1
])

m.moveLayer("districts", "districts_outline")
})

m.on("mouseleave", "districts", () => {
Expand Down Expand Up @@ -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])



Expand Down
8 changes: 7 additions & 1 deletion components/SidePanel/SidePanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"]],
Expand Down Expand Up @@ -95,7 +101,7 @@ const SidePanel = () => {
</div>
</div>
{mapShown === false &&
<div className="absolute top-0 left z-50 left-[35%] md:left-[32%] lg:left-[30%] xl:left-[28%] flex justify-center items-center align-middle w-[65%] md:w-[68%] lg:w-[70%] xl:w-[72%] h-[100vh] font-bold text-subheadline text-rtc_navy bg-background_blue bg-opacity-95">
<div className="absolute top-0 left z-50 left-[35%] md:left-[32%] lg:left-[30%] xl:left-[28%] flex justify-center items-center align-middle w-[65%] md:w-[68%] lg:w-[70%] xl:w-[72%] h-[100vh] font-bold text-subheadline text-white bg-black bg-opacity-[70%]">
The Clean Hands legislation is in development. <br /> Map information will be available in the near future
</div>
}
Expand Down
9 changes: 8 additions & 1 deletion context/MapContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,19 +102,26 @@ 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')







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 })
Expand Down
2 changes: 1 addition & 1 deletion public/legislations_info.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 16cc565

Please sign in to comment.