From e2790b654c623c1087d367e0ec1cf7eeecbf3d72 Mon Sep 17 00:00:00 2001
From: Dennis <dennis@momentum.local>
Date: Tue, 28 Nov 2023 01:03:58 -0800
Subject: [PATCH 1/2] get geolocate button working end to end

---
 src/components/DeckMap.tsx | 194 ++++++++++++++++++++++++++-----------
 src/pages/_app.tsx         |   4 +
 2 files changed, 139 insertions(+), 59 deletions(-)

diff --git a/src/components/DeckMap.tsx b/src/components/DeckMap.tsx
index 6b107aa..1011434 100644
--- a/src/components/DeckMap.tsx
+++ b/src/components/DeckMap.tsx
@@ -1,5 +1,18 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import Map, { MapRef } from "react-map-gl";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import Map, {
+  GeolocateControl,
+  useMap,
+  MapRef,
+  NavigationControl,
+  ViewStateChangeEvent,
+  useControl,
+} from "react-map-gl";
 import DeckGL from "@deck.gl/react/typed";
 import mixpanel from "mixpanel-browser";
 import { ScatterplotLayer } from "@deck.gl/layers/typed";
@@ -8,6 +21,8 @@ import { Modal } from "~/shadcn/components/Modal";
 import PostCovetLogo from "/public/Post-Covet_LOGO_SVG.svg";
 import Image from "next/image";
 import { useMapStore } from "~/store/store";
+// import {Map, } from 'react-map-gl';
+
 import { useRouter } from "next/router";
 import { useUser } from "@clerk/nextjs";
 import { useDebounce } from "~/lib/hooks";
@@ -15,6 +30,9 @@ import { Button } from "./ui/button";
 import { Moon, Map as LucideMap, Plus, Home, TrendingUp } from "lucide-react";
 import { Badge } from "~/components/ui/badge";
 import { Drawer } from "vaul";
+import { MapboxOverlay, MapboxOverlayProps } from "@deck.gl/mapbox/typed";
+import { DeckProps, PickingInfo } from "@deck.gl/core/typed";
+import { ArcLayer } from "@deck.gl/layers/typed";
 
 import {
   Command,
@@ -74,6 +92,16 @@ const slate300 = [203, 213, 225];
 const suggestionListIDs = [16500, 19054, 26754];
 const suggestionListData = suggestionListIDs.map((id) => cleanedData[id]!);
 
+function DeckGLOverlay(
+  props: MapboxOverlayProps & {
+    interleaved?: boolean;
+  },
+) {
+  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
+  overlay.setProps(props);
+  return null;
+}
+
 export default function DeckMap() {
   const [searchValue, setSearchValue] = useState("");
   const router = useRouter();
@@ -98,6 +126,12 @@ export default function DeckMap() {
   const nextIndex = useRef<null | number>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
+  // for react-map-gl: FLYTO interpolate
+  // const { current: map } = useMap();
+
+  // const mapRef = useRef();
+  const mapRef = useRef<MapRef>(null);
+
   useEffect(() => {
     if (!drawerOpen && typeof nextIndex.current === "number") {
       setSelectedIndex(nextIndex.current);
@@ -166,8 +200,8 @@ export default function DeckMap() {
           : data.length > 10000
           ? 10
           : data.length > 100
-          ? 20
-          : 50,
+          ? 11
+          : 12,
       radiusMinPixels: 1,
       radiusMaxPixels: 100,
       lineWidthMinPixels: 0,
@@ -199,6 +233,11 @@ export default function DeckMap() {
   }, [data, isSatelliteMapStyle, selectedIndex]);
 
   const layers = [ScatterPlayLayer];
+  const geolocateStyle: React.CSSProperties = {
+    marginRight: "1.3em",
+    marginBottom: "10em",
+    zIndex: 1,
+  };
 
   useEffect(() => {
     if (typeof selectedIndex === "number" && selectedIndex > -1) {
@@ -207,17 +246,43 @@ export default function DeckMap() {
         return;
       }
 
-      setViewState((prev) => {
-        return {
-          ...prev,
-          latitude: point.lat,
-          longitude: point.lon,
-          zoom: 17,
-          transitionDuration: 1000,
-        };
+      console.log("9999. viewState", viewState);
+
+      console.log("map", mapRef);
+      mapRef.current?.flyTo({
+        center: [point.lon, point.lat],
+        // maxDuration: 2000,
+        speed: 1.2,
+        zoom: 17,
+        curve: 1.42,
+        easing(t) {
+          return t;
+        },
       });
     }
-  }, [selectedIndex, data]);
+  }, [selectedIndex, data, viewState]);
+
+  const onUserInput = useCallback(
+    (evt: ViewStateChangeEvent) => {
+      const { viewState } = evt;
+
+      console.log("111.", viewState);
+      if (evt.type === "move") {
+        setViewState({ ...viewState, transitionDuration: 1000 });
+        return;
+      }
+
+      if (typeof selectedIndex === "number" && selectedIndex > -1) {
+        const point = cleanedData[selectedIndex];
+        if (!point) {
+          console.log("0. what is clicked here", point);
+          setViewState({ ...viewState, transitionDuration: 1 });
+          return;
+        }
+      }
+    },
+    [selectedIndex],
+  );
 
   function getSearchSuggestions() {
     function getSuggestionFooter() {
@@ -336,62 +401,73 @@ export default function DeckMap() {
 
   return (
     <>
-      <DeckGL
-        initialViewState={viewState}
+      <Map
+        mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
+        mapStyle={isSatelliteMapStyle ? satelliteMapStyle : darkMapStyle}
+        {...viewState}
+        ref={mapRef}
+        onMove={onUserInput}
         style={{
           height: "100vh",
           width: "100vw",
           position: "fixed",
           overflow: "hidden",
         }}
-        getTooltip={({ object }: { object?: DataPoint | null }) => {
-          return object
-            ? {
+      >
+        <DeckGLOverlay
+          interleaved={true}
+          getTooltip={({ object }: { object?: DataPoint | null }) => {
+            if (object?.prettyLocation) {
+              return {
                 text: `Property Location: ${object.prettyLocation.toUpperCase()}
-              Grantor: ${object.grantor}
-              Grantee: ${object.grantee}`,
-              }
-            : null;
-        }}
-        controller={true}
-        layers={layers}
-        onClick={(data) => {
-          setSuggestionsVisible(false);
-          if (!data.layer) {
-            console.log("setting to null 215");
-            setSelectedIndex(null);
-            return;
-          }
+            Grantor: ${object.grantor}
+            Grantee: ${object.grantee}`,
+              };
+            } else {
+              return null;
+            }
+          }}
+          layers={layers}
+          onClick={(data) => {
+            setSuggestionsVisible(false);
+            if (!data.layer) {
+              console.log("setting to null 215");
+              setSelectedIndex(null);
+              return;
+            }
 
-          if (data.index === -1) {
-            return;
-          }
-          const pointMetaData = data.object as DataPoint;
+            if (data.index === -1) {
+              return;
+            }
+            const pointMetaData = data.object as DataPoint;
+
+            if (addressCounter > 4 && !isSignedIn) {
+              void router.replace("/sign-in");
+              return;
+            } else {
+              increaseAddressCounter(1);
+            }
 
-          if (addressCounter > 4 && !isSignedIn) {
-            void router.replace("/sign-in");
+            mixpanel.track("click address", {
+              "Property name": pointMetaData?.propertyLocation,
+              Grantor: pointMetaData?.grantor,
+              Grantee: pointMetaData?.grantee,
+            });
+            if (!drawerOpen) {
+              setSelectedIndex(pointMetaData.id);
+            } else {
+              nextIndex.current = pointMetaData.id;
+            }
             return;
-          } else {
-            increaseAddressCounter(1);
-          }
-
-          mixpanel.track("click address", {
-            "Property name": pointMetaData?.propertyLocation,
-            Grantor: pointMetaData?.grantor,
-            Grantee: pointMetaData?.grantee,
-          });
-          if (!drawerOpen) {
-            setSelectedIndex(pointMetaData.id);
-          } else {
-            nextIndex.current = pointMetaData.id;
-          }
-          return;
-        }}
-      >
-        <Map
-          mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
-          mapStyle={isSatelliteMapStyle ? satelliteMapStyle : darkMapStyle}
+          }}
         />
+        <GeolocateControl
+          style={geolocateStyle}
+          positionOptions={{ enableHighAccuracy: true }}
+          trackUserLocation={true}
+          position="bottom-right"
+        />
+
         {window.innerWidth > 800 ? (
           <Modal
             location={selectedPointData?.propertyLocation}
@@ -429,7 +505,7 @@ export default function DeckMap() {
             />
           </BottomSheet>
         )}
-      </DeckGL>
+      </Map>
       <div className="absolute z-0 flex w-full flex-col items-start gap-x-8 gap-y-2 p-4 sm:flex-row md:p-8">
         <Image src={PostCovetLogo as string} alt="postcovet" />
         <Command
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index da6b0d1..671c082 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -40,6 +40,10 @@ const MyApp: AppType<{ session: Session | null }> = ({
         <meta name="twitter:image" content={image} />
         <title>{title}</title>
         <link rel="icon" href="/covet-favicon2.ico" />
+        <link
+          href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css"
+          rel="stylesheet"
+        />
       </Head>
       <ClerkProvider {...pageProps}>
         <Component {...pageProps} />

From 83d0bb15ad3564daffa67e60b913d564eaee7473 Mon Sep 17 00:00:00 2001
From: Dennis <dennis@momentum.local>
Date: Mon, 4 Dec 2023 10:42:06 -0800
Subject: [PATCH 2/2] merge and add geolocation

---
 src/pages/_app.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 671c082..6129cc2 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -11,6 +11,7 @@ import {
 
 import "~/styles/globals.css";
 import Head from "next/head";
+import "mapbox-gl/dist/mapbox-gl.css";
 
 const title = "PostCovet";
 const description =
@@ -40,10 +41,6 @@ const MyApp: AppType<{ session: Session | null }> = ({
         <meta name="twitter:image" content={image} />
         <title>{title}</title>
         <link rel="icon" href="/covet-favicon2.ico" />
-        <link
-          href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css"
-          rel="stylesheet"
-        />
       </Head>
       <ClerkProvider {...pageProps}>
         <Component {...pageProps} />