Merge pull request #28 from rezahedi/direction-polyline

Show Plan Direction Route on Map

Author: rezahedi

src/Components/Map/Map.tsx

@@ -15,8 +15,8 @@ import { debounce, getThemeColor } from "@/lib/utils";
 
 // Bay Area
 const MAP_INITIAL_VIEW = {
-  defaultCenter: { lat: 37.70580795161106, lng: -122.51368137617244 },
-  defaultZoom: 11,
+  defaultCenter: { lat: 37.78895639668091, lng: -122.43377970356813 },
+  defaultZoom: 13,
 };
 
 const Map = ({

src/Components/Map/Polyline.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable no-undef */
+
+import {
+  forwardRef,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+
+import { GoogleMapsContext, useMapsLibrary } from "@vis.gl/react-google-maps";
+
+import type { Ref } from "react";
+
+type PolylineEventProps = {
+  onClick?: (e: google.maps.MapMouseEvent) => void;
+  onDrag?: (e: google.maps.MapMouseEvent) => void;
+  onDragStart?: (e: google.maps.MapMouseEvent) => void;
+  onDragEnd?: (e: google.maps.MapMouseEvent) => void;
+  onMouseOver?: (e: google.maps.MapMouseEvent) => void;
+  onMouseOut?: (e: google.maps.MapMouseEvent) => void;
+};
+
+type PolylineCustomProps = {
+  /**
+   * this is an encoded string for the path, will be decoded and used as a path
+   */
+  encodedPath?: string;
+};
+
+export type PolylineProps = google.maps.PolylineOptions &
+  PolylineEventProps &
+  PolylineCustomProps;
+
+export type PolylineRef = Ref<google.maps.Polyline | null>;
+
+function usePolyline(props: PolylineProps) {
+  const {
+    onClick,
+    onDrag,
+    onDragStart,
+    onDragEnd,
+    onMouseOver,
+    onMouseOut,
+    encodedPath,
+    ...polylineOptions
+  } = props;
+  // This is here to avoid triggering the useEffect below when the callbacks change (which happen if the user didn't memoize them)
+  const callbacks = useRef<Record<string, (e: unknown) => void>>({});
+  Object.assign(callbacks.current, {
+    onClick,
+    onDrag,
+    onDragStart,
+    onDragEnd,
+    onMouseOver,
+    onMouseOut,
+  });
+
+  const geometryLibrary = useMapsLibrary("geometry");
+
+  const polyline = useRef(new google.maps.Polyline()).current;
+  // update PolylineOptions (note the dependencies aren't properly checked
+  // here, we just assume that setOptions is smart enough to not waste a
+  // lot of time updating values that didn't change)
+  useMemo(() => {
+    polyline.setOptions(polylineOptions);
+  }, [polyline, polylineOptions]);
+
+  const map = useContext(GoogleMapsContext)?.map;
+
+  // update the path with the encodedPath
+  useMemo(() => {
+    if (!encodedPath || !geometryLibrary) return;
+    const path = geometryLibrary.encoding.decodePath(encodedPath);
+    polyline.setPath(path);
+  }, [polyline, encodedPath, geometryLibrary]);
+
+  // create polyline instance and add to the map once the map is available
+  useEffect(() => {
+    if (!map) {
+      if (map === undefined)
+        console.error("<Polyline> has to be inside a Map component.");
+
+      return;
+    }
+
+    polyline.setMap(map);
+
+    return () => {
+      polyline.setMap(null);
+    };
+  }, [map]);
+
+  // attach and re-attach event-handlers when any of the properties change
+  useEffect(() => {
+    if (!polyline) return;
+
+    // Add event listeners
+    const gme = google.maps.event;
+    [
+      ["click", "onClick"],
+      ["drag", "onDrag"],
+      ["dragstart", "onDragStart"],
+      ["dragend", "onDragEnd"],
+      ["mouseover", "onMouseOver"],
+      ["mouseout", "onMouseOut"],
+    ].forEach(([eventName, eventCallback]) => {
+      gme.addListener(polyline, eventName, (e: google.maps.MapMouseEvent) => {
+        const callback = callbacks.current[eventCallback];
+        if (callback) callback(e);
+      });
+    });
+
+    return () => {
+      gme.clearInstanceListeners(polyline);
+    };
+  }, [polyline]);
+
+  return polyline;
+}
+
+/**
+ * Component to render a polyline on a map
+ */
+export const Polyline = forwardRef((props: PolylineProps, ref: PolylineRef) => {
+  const polyline = usePolyline(props);
+
+  useImperativeHandle(ref, () => polyline, []);
+
+  return null;
+});
+
+Polyline.displayName = "Polyline";

src/context/ItineraryContext.tsx

@@ -11,6 +11,7 @@ type contextType = {
   setTitle: (title: string) => void;
   setDescription: (description: string) => void;
   addImage: (image: string) => void;
+  setPolyline: (polyline: string) => void;
   addPlace: (place: Place) => void;
   removePlace: (placeId: string) => void;
   createPlan: (plan: PlanType) => void;
@@ -80,6 +81,12 @@ const ItineraryProvider = ({ children }: { children: React.ReactNode }) => {
     // dispatch({ type: "addImage", payload: image, init: plan.images || [] });
   };
 
+  const setPolyline = (polyline: string) => {
+    if (!plan || !polyline) return;
+
+    setPlan({ ...plan, polyline });
+  };
+
   const addPlace = (place: Place) => {
     if (!plan || !place) return;
 
@@ -96,6 +103,7 @@ const ItineraryProvider = ({ children }: { children: React.ReactNode }) => {
     <ItineraryContext.Provider
       value={{
         plan,
+        setPolyline,
         setTitle,
         setDescription,
         addImage,

src/context/PlanTypes.ts

@@ -14,6 +14,7 @@ export interface PlanType {
   images?: string[];
   cities?: CityType[];
   stops?: PlaceType[];
+  polyline?: string;
 }
 
 export interface CityType {

src/pages/ExplorePage/MapBox.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Map, LocateMeButton, InfoWindow } from "@/Components/Map";
 import { usePlans } from "./PlansContext";
 import Markers from "./Markers";
@@ -7,6 +7,8 @@ import PlanPopup from "./PlanPopup";
 import { Plan } from "@/types";
 import Popup from "./places/Popup";
 import { MapMouseEvent } from "@vis.gl/react-google-maps";
+import { fetchData } from "@/util";
+import { Polyline } from "@/Components/Map/Polyline";
 
 const MapBox = ({
   className = "",
@@ -15,11 +17,28 @@ const MapBox = ({
   className?: string;
   children?: React.ReactNode;
 }) => {
-  const { plans, selection, setSelection, setBoundingBox } = usePlans();
+  const { plans, setPlanPolyline, selection, setSelection, setBoundingBox } =
+    usePlans();
 
   const selectedPlan: Plan | null =
     plans.find((p) => p._id === selection?.placeId) || null;
 
+  useEffect(() => {
+    if (!selectedPlan || selectedPlan.polyline) return;
+
+    (async () => {
+      // fetch planDetails
+      const planDetail: Plan | null = await fetchData(
+        `plans/${selectedPlan._id}`,
+        null,
+        () => {},
+      );
+      if (!planDetail) return;
+
+      setPlanPolyline(planDetail._id, planDetail.polyline || "");
+    })();
+  }, [selection]);
+
   const handlePopupClose = () => {
     setSelection(null);
   };
@@ -50,12 +69,22 @@ const MapBox = ({
       )}
       <Markers />
       {selectedPlan && (
-        <InfoWindow
-          position={selectedPlan.startLocation}
-          onClose={handlePopupClose}
-        >
-          <PlanPopup plan={selectedPlan} />
-        </InfoWindow>
+        <>
+          <InfoWindow
+            position={selectedPlan.startLocation}
+            onClose={handlePopupClose}
+          >
+            <PlanPopup plan={selectedPlan} />
+          </InfoWindow>
+          {selectedPlan.polyline && (
+            <Polyline
+              strokeWeight={5}
+              strokeOpacity={0.7}
+              strokeColor={"#fea403"}
+              encodedPath={selectedPlan.polyline}
+            />
+          )}
+        </>
       )}
       <LocateMeButton />
     </Map>

src/pages/ExplorePage/PlansContext.tsx

@@ -22,6 +22,7 @@ type ItemType = {
 
 type PlansContextType = {
   plans: Plan[];
+  setPlanPolyline: (planId: string, polyline: string) => void;
   places: Place[];
   isLoading: boolean;
   error: string | null;
@@ -86,10 +87,17 @@ const PlansProvider = ({ children }: { children: React.ReactNode }) => {
     })();
   }, [map, boundingBox, token]);
 
+  const setPlanPolyline = (planId: string, polyline: string) => {
+    setPlans((prev) =>
+      prev.map((plan) => (plan._id === planId ? { ...plan, polyline } : plan)),
+    );
+  };
+
   return (
     <PlansContext.Provider
       value={{
         plans,
+        setPlanPolyline,
         places,
         isLoading,
         error,

src/pages/PlanPage/MapBox.tsx

@@ -3,13 +3,16 @@ import { APIProvider, Map } from "@vis.gl/react-google-maps";
 import { Stop as StopType } from "@/types";
 import { calculateBounds, cn, getThemeColor, throttle } from "@/lib/utils";
 import Markers from "./Markers";
+import { Polyline } from "@/Components/Map/Polyline";
 
 const MapBox = ({
   className,
   stops,
+  polyline,
 }: {
   className?: string;
   stops: StopType[];
+  polyline: string;
 }) => {
   const mapRef = useRef<HTMLDivElement | null>(null);
   const defaultBounds =
@@ -50,6 +53,14 @@ const MapBox = ({
           fullscreenControl={false}
           colorScheme={getThemeColor()}
         >
+          {polyline && (
+            <Polyline
+              strokeWeight={5}
+              strokeOpacity={0.7}
+              strokeColor={"#fea403"}
+              encodedPath={polyline}
+            />
+          )}
           <Markers stops={stops} />
         </Map>
       </APIProvider>

src/pages/PlanPage/PlanDetails.tsx

@@ -23,6 +23,7 @@ const PlanDetails = ({ plan }: { plan: PlanWithStops }) => {
     images,
     cities,
     stops,
+    polyline,
     type,
     stopCount,
     distance,
@@ -112,7 +113,7 @@ const PlanDetails = ({ plan }: { plan: PlanWithStops }) => {
         <MapSyncProvider>
           <ListProvider>
             <div className="flex gap-4 my-4 flex-col md:flex-row-reverse">
-              <MapBox stops={stops} />
+              <MapBox stops={stops} polyline={polyline || ""} />
               <div className="grow md:flex-2/3">
                 {images?.length > 0 && (
                   <ImageBlock

src/pages/dashboard/create/MapBox.tsx

@@ -6,6 +6,7 @@ import { useItinerary } from "@/context/ItineraryContext";
 import { calculateBounds, getBoundsFromViewport } from "@/lib/utils";
 import Markers from "./Markers";
 import { ListProvider } from "@/context/ListContext";
+import { Polyline } from "@/Components/Map/Polyline";
 
 const MapBox = () => {
   const { setBoundingBox, setSelection } = usePlaces();
@@ -40,6 +41,14 @@ const MapBox = () => {
       defaultBounds={defaultBounds}
       className="w-full flex-5/12 md:flex-auto"
     >
+      {plan.polyline && (
+        <Polyline
+          strokeWeight={5}
+          strokeOpacity={0.7}
+          strokeColor={"#fea403"}
+          encodedPath={plan.polyline}
+        />
+      )}
       <ListProvider>
         <Markers />
       </ListProvider>