Filter projects by ccd and highlight district

Add tiles filtering and district highlighting for ccd

Use hasDistrict boolean in both layers

Format

Use empty array instead of empty string

app/components/atlas.client.tsx

@@ -10,6 +10,7 @@ import {
   useCommunityDistrictsLayer,
   useCityCouncilDistrictsLayer,
   useCommunityDistrictLayer,
+  useCityCouncilDistrictLayer,
 } from "./layers";
 import type { MapView, MapViewState } from "@deck.gl/core";
 
@@ -29,6 +30,7 @@ export function Atlas() {
   const communityDistrictsLayer = useCommunityDistrictsLayer();
   const communityDistrictLayer = useCommunityDistrictLayer();
   const cityCouncilDistrictsLayer = useCityCouncilDistrictsLayer();
+  const cityCouncilDistrictLayer = useCityCouncilDistrictLayer();
 
   const isMobile = useMediaQuery("(max-width: 767px)")[0];
   const widgetPlacement = isMobile ? "top-right" : "bottom-right";
@@ -71,6 +73,7 @@ export function Atlas() {
         communityDistrictsLayer,
         communityDistrictLayer,
         cityCouncilDistrictsLayer,
+        cityCouncilDistrictLayer,
       ]}
       getCursor={({ isDragging, isHovering }) => {
         if (isDragging) {

app/components/layers/index.tsx

@@ -2,3 +2,4 @@ export { useCapitalProjectsLayer } from "./useCapitalProjectsLayer.client";
 export { useCommunityDistrictsLayer } from "./useCommunityDistrictsLayer.client";
 export { useCommunityDistrictLayer } from "./useCommunityDistrictLayer.client";
 export { useCityCouncilDistrictsLayer } from "./useCityCouncilDistrictsLayer.client";
+export { useCityCouncilDistrictLayer } from "./useCityCouncilDistrictLayer.client";

app/components/layers/useCapitalProjectsLayer.client.tsx

@@ -6,14 +6,25 @@ export interface CapitalProjectProperties {
   managingAgency: string;
 }
 export function useCapitalProjectsLayer() {
-  const { managingCode, capitalProjectId, boroughId, communityDistrictId } =
-    useParams();
+  const {
+    managingCode,
+    capitalProjectId,
+    boroughId,
+    communityDistrictId,
+    cityCouncilDistrictId,
+  } = useParams();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
+  const hasCityCouncilDistrict = cityCouncilDistrictId !== undefined;
+  const hasCommunityDistrict =
+    boroughId !== undefined && communityDistrictId !== undefined;
 
   let endpointPrefix = "";
-  if (boroughId !== undefined && communityDistrictId !== undefined)
+  if (hasCityCouncilDistrict) {
+    endpointPrefix = `city-council-districts/${cityCouncilDistrictId}/`;
+  } else if (hasCommunityDistrict) {
     endpointPrefix = `boroughs/${boroughId}/community-districts/${communityDistrictId}/`;
+  }
 
   return new MVTLayer<CapitalProjectProperties>({
     id: "capitalProjects",

app/components/layers/useCityCouncilDistrictLayer.client.tsx

@@ -0,0 +1,21 @@
+import { GeoJsonLayer } from "@deck.gl/layers";
+import { useParams } from "@remix-run/react";
+
+export function useCityCouncilDistrictLayer() {
+  const { cityCouncilDistrictId } = useParams();
+  const hasCityCouncilDistrict = cityCouncilDistrictId !== undefined;
+  const data = hasCityCouncilDistrict
+    ? `${import.meta.env.VITE_ZONING_API_URL}/api/city-council-districts/${cityCouncilDistrictId}/geojson`
+    : [];
+
+  return new GeoJsonLayer({
+    id: "CityCouncilDistrict",
+    data,
+    visible: hasCityCouncilDistrict,
+    filled: false,
+    stroked: true,
+    lineWidthUnits: "pixels",
+    getLineWidth: 3,
+    getLineColor: [49, 151, 149],
+  });
+}

app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx

@@ -0,0 +1,3 @@
+export default function CapitalProjectsByCityCouncilDistrictId() {
+  return <></>;
+}