Render capital projects layer

Add capital projects layer to the map
Enable auto highlighting
Link selection between route and map style

closes #8

app/components/atlas.client.tsx

@@ -1,6 +1,7 @@
 import { DeckGL } from "@deck.gl/react";
 import { Map } from "react-map-gl/maplibre";
 import "maplibre-gl/dist/maplibre-gl.css";
+import { useCapitalProjectsLayer } from "./layers";
 
 const INITIAL_VIEW_STATE = {
   longitude: -74.0008,
@@ -11,11 +12,13 @@ const INITIAL_VIEW_STATE = {
 };
 
 export function Atlas() {
+  const capitalProjectsLayer = useCapitalProjectsLayer();
   return (
     <DeckGL
       initialViewState={INITIAL_VIEW_STATE}
       controller={true}
       style={{ height: "100vh", width: "100vw" }}
+      layers={[capitalProjectsLayer]}
     >
       <Map
         mapStyle={"https://tiles.planninglabs.nyc/styles/positron/style.json"}

app/components/layers/index.tsx

@@ -0,0 +1 @@
+export { useCapitalProjectsLayer } from "./useCapitalProjectsLayer.client";

app/components/layers/useCapitalProjectsLayer.client.tsx

@@ -0,0 +1,52 @@
+import { MVTLayer } from "@deck.gl/geo-layers";
+import { useNavigate, useParams } from "@remix-run/react";
+
+export interface CapitalProjectProperties {
+  managingCodeCapitalProjectId: string;
+  managingAgency: string;
+}
+export function useCapitalProjectsLayer() {
+  const { managingCode, capitalProjectId } = useParams();
+  const navigate = useNavigate();
+
+  return new MVTLayer<CapitalProjectProperties>({
+    id: "capitalProjects",
+    data: [
+      `${import.meta.env.VITE_ZONING_API_URL}/api/capital-projects/{z}/{x}/{y}.pbf`,
+    ],
+    uniqueIdProperty: "managingCodeCapitalProjectId",
+    autoHighlight: true,
+    highlightColor: [129, 230, 217, 218],
+    pickable: true,
+    getFillColor: ({ properties }) => {
+      const { managingCodeCapitalProjectId } = properties;
+      switch (managingCodeCapitalProjectId) {
+        case `${managingCode}${capitalProjectId}`:
+          return [56, 178, 172, 166];
+        default:
+          return [217, 107, 39, 166];
+      }
+    },
+    getPointRadius: 5,
+    getLineColor: [255, 255, 255, 255],
+    getLineWidth: 1,
+    onClick: (data) => {
+      const managingCodeCapitalProjectId =
+        data.object?.properties?.managingCodeCapitalProjectId;
+
+      if (managingCodeCapitalProjectId === undefined) return;
+      // Avoid adding the same capital project to the history stack
+      if (managingCodeCapitalProjectId === `${managingCode}${capitalProjectId}`)
+        return;
+      const [nextManagingCode, nextCapitalProjectId] = [
+        managingCodeCapitalProjectId.slice(0, 3),
+        managingCodeCapitalProjectId.slice(3),
+      ];
+      navigate(`capital-projects/${nextManagingCode}/${nextCapitalProjectId}`);
+    },
+    updateTriggers: {
+      getFillColor: [managingCode, capitalProjectId],
+      getPointColor: [managingCode, capitalProjectId],
+    },
+  });
+}

app/routes/capital-projects.$managingCode.$capitalProjectId.tsx

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