Filter projects by community district

Only show capital projects that fall within a community district Highlight the selected community district with its geojson layer

closes #63

app/components/atlas.client.tsx

@@ -9,6 +9,7 @@ import {
   useCapitalProjectsLayer,
   useCommunityDistrictsLayer,
   useCityCouncilDistrictsLayer,
+  useCommunityDistrictLayer,
 } from "./layers";
 import type { MapView, MapViewState } from "@deck.gl/core";
 
@@ -26,6 +27,7 @@ const MIN_ZOOM = 10;
 export function Atlas() {
   const capitalProjectsLayer = useCapitalProjectsLayer();
   const communityDistrictsLayer = useCommunityDistrictsLayer();
+  const communityDistrictLayer = useCommunityDistrictLayer();
   const cityCouncilDistrictsLayer = useCityCouncilDistrictsLayer();
 
   const isMobile = useMediaQuery("(max-width: 767px)")[0];
@@ -67,6 +69,7 @@ export function Atlas() {
       layers={[
         capitalProjectsLayer,
         communityDistrictsLayer,
+        communityDistrictLayer,
         cityCouncilDistrictsLayer,
       ]}
       getCursor={({ isDragging, isHovering }) => {

app/components/layers/index.tsx

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

app/components/layers/useCapitalProjectsLayer.client.tsx

@@ -6,14 +6,19 @@ export interface CapitalProjectProperties {
   managingAgency: string;
 }
 export function useCapitalProjectsLayer() {
-  const { managingCode, capitalProjectId } = useParams();
+  const { managingCode, capitalProjectId, boroughId, communityDistrictId } =
+    useParams();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
+  let endpointPrefix = "";
+  if (boroughId !== undefined && communityDistrictId !== undefined)
+    endpointPrefix = `boroughs/${boroughId}/community-districts/${communityDistrictId}/`;
+
   return new MVTLayer<CapitalProjectProperties>({
     id: "capitalProjects",
     data: [
-      `${import.meta.env.VITE_ZONING_API_URL}/api/capital-projects/{z}/{x}/{y}.pbf`,
+      `${import.meta.env.VITE_ZONING_API_URL}/api/${endpointPrefix}capital-projects/{z}/{x}/{y}.pbf`,
     ],
     uniqueIdProperty: "managingCodeCapitalProjectId",
     autoHighlight: true,

app/components/layers/useCommunityDistrictLayer.client.tsx

@@ -0,0 +1,22 @@
+import { GeoJsonLayer } from "@deck.gl/layers";
+import { useParams } from "@remix-run/react";
+
+export function useCommunityDistrictLayer() {
+  const { boroughId, communityDistrictId } = useParams();
+  const hasCommunityDistrict =
+    boroughId !== undefined && communityDistrictId !== undefined;
+  const data = hasCommunityDistrict
+    ? `${import.meta.env.VITE_ZONING_API_URL}/api/boroughs/${boroughId}/community-districts/${communityDistrictId}/geojson`
+    : [];
+
+  return new GeoJsonLayer({
+    id: "CommunityDistrict",
+    data,
+    visible: hasCommunityDistrict,
+    filled: false,
+    stroked: true,
+    lineWidthUnits: "pixels",
+    getLineWidth: 3,
+    getLineColor: [49, 151, 149],
+  });
+}

app/routes/boroughs.$boroughId.community-districts.$communityDistrictId.capital-projects.tsx

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

package.json

@@ -18,10 +18,11 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
-    "@deck.gl/core": "^9.0.20",
-    "@deck.gl/geo-layers": "^9.0.20",
-    "@deck.gl/react": "^9.0.20",
-    "@deck.gl/widgets": "^9.0.20",
+    "@deck.gl/core": "^9.0.26",
+    "@deck.gl/geo-layers": "^9.0.26",
+    "@deck.gl/layers": "^9.0.26",
+    "@deck.gl/react": "^9.0.26",
+    "@deck.gl/widgets": "^9.0.26",
     "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",