Implement fly to on selection for CCD, CD, and project layers with ne…

…w FlyToGeoJsonExtension

Co-authored-by: horatio <[email protected]>

app/components/atlas.client.tsx

@@ -11,6 +11,7 @@ import {
   useCityCouncilDistrictsLayer,
   useCommunityDistrictLayer,
   useCityCouncilDistrictLayer,
+  useCapitalProjectBudgetedGeoJsonLayer,
 } from "./layers";
 import type { MapView, MapViewState } from "@deck.gl/core";
 
@@ -27,6 +28,8 @@ const MIN_ZOOM = 10;
 
 export function Atlas() {
   const capitalProjectsLayer = useCapitalProjectsLayer();
+  const capitalProjectBudgetedGeoJsonLayer =
+    useCapitalProjectBudgetedGeoJsonLayer();
   const communityDistrictsLayer = useCommunityDistrictsLayer();
   const communityDistrictLayer = useCommunityDistrictLayer();
   const cityCouncilDistrictsLayer = useCityCouncilDistrictsLayer();
@@ -56,6 +59,7 @@ export function Atlas() {
       viewState={viewState}
       onViewStateChange={({ viewState: newViewState }) => {
         setViewState({
+          ...newViewState,
           longitude: Math.min(
             -73.6311,
             Math.max(-74.3308, newViewState.longitude),
@@ -70,6 +74,7 @@ export function Atlas() {
       style={{ height: "100vh", width: "100vw" }}
       layers={[
         capitalProjectsLayer,
+        capitalProjectBudgetedGeoJsonLayer,
         communityDistrictsLayer,
         communityDistrictLayer,
         cityCouncilDistrictsLayer,

app/components/layers/index.tsx

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

app/components/layers/useCapitalProjectBudgetedGeoJsonLayer.client.tsx

@@ -0,0 +1,33 @@
+import { GeoJsonLayer } from "@deck.gl/layers";
+import { CapitalProjectBudgetedGeoJson } from "~/gen";
+import { useParams } from "@remix-run/react";
+import { FlyToGeoJsonExtension } from "../../extensions";
+
+export function useCapitalProjectBudgetedGeoJsonLayer() {
+  const { managingCode, capitalProjectId } = useParams();
+
+  return new GeoJsonLayer<CapitalProjectBudgetedGeoJson>({
+    id: "capitalProjectBudgetedGeoJson",
+    data:
+      managingCode === undefined || capitalProjectId === undefined
+        ? []
+        : `${import.meta.env.VITE_ZONING_API_URL}/api/capital-projects/${managingCode}/${capitalProjectId}/geojson`,
+    pickable: true,
+    getFillColor: ({ id }) => {
+      switch (id) {
+        case `${managingCode}${capitalProjectId}`:
+          return [56, 178, 172, 166];
+        default:
+          return [217, 107, 39, 166];
+      }
+    },
+    getPointRadius: 5,
+    getLineColor: [255, 255, 255, 255],
+    getLineWidth: 1,
+    updateTriggers: {
+      getFillColor: [managingCode, capitalProjectId],
+      getPointColor: [managingCode, capitalProjectId],
+    },
+    extensions: [new FlyToGeoJsonExtension()],
+  });
+}

app/components/layers/useCityCouncilDistrictLayer.client.tsx

@@ -1,5 +1,6 @@
 import { GeoJsonLayer } from "@deck.gl/layers";
 import { useParams } from "@remix-run/react";
+import { FlyToGeoJsonExtension } from "../../extensions";
 
 export function useCityCouncilDistrictLayer() {
   const { cityCouncilDistrictId } = useParams();
@@ -17,5 +18,6 @@ export function useCityCouncilDistrictLayer() {
     lineWidthUnits: "pixels",
     getLineWidth: 3,
     getLineColor: [49, 151, 149],
+    extensions: [new FlyToGeoJsonExtension()],
   });
 }

app/components/layers/useCommunityDistrictLayer.client.tsx

@@ -1,5 +1,6 @@
 import { GeoJsonLayer } from "@deck.gl/layers";
 import { useParams } from "@remix-run/react";
+import { FlyToGeoJsonExtension } from "../../extensions";
 
 export function useCommunityDistrictLayer() {
   const { boroughId, communityDistrictId } = useParams();
@@ -18,5 +19,6 @@ export function useCommunityDistrictLayer() {
     lineWidthUnits: "pixels",
     getLineWidth: 3,
     getLineColor: [49, 151, 149],
+    extensions: [new FlyToGeoJsonExtension()],
   });
 }

app/extensions/FlyToGeoJsonExtension.ts

@@ -0,0 +1,45 @@
+import {
+  Layer,
+  LayerExtension,
+  UpdateParameters,
+  FlyToInterpolator,
+  WebMercatorViewport,
+} from "@deck.gl/core";
+import { bbox } from "@turf/bbox";
+import { Geometry } from "geojson";
+
+export class FlyToGeoJsonExtension extends LayerExtension {
+  updateState(
+    this: Layer,
+    { props, oldProps, changeFlags }: UpdateParameters<Layer>,
+  ): void {
+    const { deck: deckInstance } = this.context;
+    if (deckInstance === undefined) {
+      throw new Error("Deck instance undefined in FlyToGeoJsonExtension");
+    }
+    if (
+      !Array.isArray(props.data) &&
+      ((Array.isArray(oldProps.data) && oldProps.data.length === 0) ||
+        changeFlags.dataChanged)
+    ) {
+      const viewport = this.context.viewport as WebMercatorViewport;
+      const [minX, minY, maxX, maxY] = bbox(props.data as Geometry);
+      const { longitude, latitude, zoom } = viewport.fitBounds([
+        [minX, minY],
+        [maxX, maxY],
+      ]);
+      const newViewState = {
+        longitude,
+        latitude,
+        zoom: zoom - 0.25,
+        transitionDuration: 750,
+        transitionInterpolator: new FlyToInterpolator(),
+      };
+      deckInstance.props.onViewStateChange({
+        viewState: newViewState,
+        viewId: viewport.id,
+        interactionState: {},
+      });
+    }
+  }
+}

app/extensions/index.ts

@@ -0,0 +1 @@
+export { FlyToGeoJsonExtension } from './FlyToGeoJsonExtension';