Tel 109 add lap marker to map (#97)

* added finish line marker to ReactMap * trying to figure zoom out * FEAT: Lap Flag's coordinates (lng,lat) are passed in from the parent * Combined the map inputs into one state * Fix: Implemented the refocus when the car's location and the flag location are not visible. Still need to figure out how to implement debounce to make it smoother. * Fix: map reloads only when both the car and the lap location go out of frame In the future if needed we can add a min zoom for large distances. * Maximum zoom so that if the flag is very nearby it won't zoom in too much * Fixed sqlite (#95) * started the SQLite class. Still have to fix types. * fixed the issues with the sqlite class. Co-authored-by: Ideen <[email protected]> * mobile view fixed (#94) * Amplify working code * Final Backend Deployment cahnges * Bump next from 14.1.0 to 14.1.1 (#88) Bumps [next](https://github.com/vercel/next.js) from 14.1.0 to 14.1.1. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](vercel/next.js@v14.1.0...v14.1.1) --- updated-dependencies: - dependency-name: next dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Tel 107 add unit conversion to pis transformer (#86) * started unit conversion logic * Create dockerfile for backend (#77) * make the CarGraphicComponent SSR instead of the HeroComponent (#80) * local storage and darkmode settings implemented * Create dockerfile for backend (#77) * make the CarGraphicComponent SSR instead of the HeroComponent (#80) * local storage and darkmode settings implemented * continued unit conversion function Co-authored-by: JenniferJa <[email protected]> * finsihed unit handler function without changes from setting modal changes * yarn issue fixed by brian * local storage and darkmode settings implemented * yarn issue fixed by brian * moved enum to appStateContext * fixed small issue with displaying units * fixed PR comments * made unit conversion logic work with setting modal * made speed adapt value adapt to change in units * addressed comments. Changed to switch, case and destructured appState * changed to switch * fixed bug with undefined units and addressed comment * fixed the miles per hour to 0 decimal places --------- Co-authored-by: alexwhelan12 <[email protected]> Co-authored-by: brian nguyen <[email protected]> Co-authored-by: jenniferja <[email protected]> Co-authored-by: JenniferJa <[email protected]> * mobile view fixed * some changes * Should be good * change to scrollbars * scrollbar spacing * oops * please im begging --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: ideen1 <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ideen <[email protected]> Co-authored-by: alexwhelan12 <[email protected]> Co-authored-by: brian nguyen <[email protected]> Co-authored-by: jenniferja <[email protected]> Co-authored-by: JenniferJa <[email protected]> * removed database.sqlite file * Fixed package * Add SQLITE back --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Ideen <[email protected]> Co-authored-by: Burton Jong <[email protected]> Co-authored-by: ideen1 <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ideen <[email protected]> Co-authored-by: brian nguyen <[email protected]> Co-authored-by: jenniferja <[email protected]> Co-authored-by: JenniferJa <[email protected]> * Fix package-lock.json * package lock accepted from remote --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: alexwhelan12 <[email protected]> Co-authored-by: alexwhelan12 <[email protected]> Co-authored-by: Ideen <[email protected]> Co-authored-by: Burton Jong <[email protected]> Co-authored-by: ideen1 <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ideen <[email protected]> Co-authored-by: brian nguyen <[email protected]> Co-authored-by: jenniferja <[email protected]> Co-authored-by: JenniferJa <[email protected]>
UCSolarCarTeam · Jun 5, 2024 · de76984 · de76984
1 parent 5a0c8e5
commit de76984
Show file tree

Hide file tree

Showing 3 changed files with 15,669 additions and 27,858 deletions.
diff --git a/client/src/components/containers/MapContainer.tsx b/client/src/components/containers/MapContainer.tsx
@@ -4,22 +4,33 @@ import Map from "@/components/molecules/MapMolecules/Map";
 import MapText from "@/components/molecules/MapMolecules/MapText";
 
 function MapContainer(): JSX.Element {
-  const [carLocation, setCarLocation] = useState({
-    lat: 38.9277572,
-    lng: -95.6777937,
+  const [mapInputs, setMapInputs] = useState({
+    carLocation: { lat: 38.9277572, lng: -95.6777937 },
+    lapLocation: { lat: 38.9377572, lng: -95.677937 },
   });
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setCarLocation({ lat: carLocation.lat + 0.0001, lng: carLocation.lng });
+      setMapInputs((prevState) => ({
+        ...prevState,
+        carLocation: {
+          lat: prevState.carLocation.lat + 0.0001,
+          lng: prevState.carLocation.lng,
+        },
+      }));
     }, 1000);
+
     return () => clearInterval(interval);
-  }, [carLocation]);
+  }, []);
 
   return (
     <div className="size-full">
       <div className="grid h-[90%]">
-        <Map carLocation={carLocation} mapLocation={carLocation} />
+        <Map
+          carLocation={mapInputs.carLocation}
+          mapLocation={mapInputs.carLocation}
+          lapLocation={mapInputs.lapLocation}
+        />
       </div>
       <div className="grid h-[10%]">
         <MapText />

diff --git a/client/src/components/molecules/MapMolecules/Map.tsx b/client/src/components/molecules/MapMolecules/Map.tsx
@@ -1,6 +1,10 @@
+import type { LngLatBoundsLike } from "mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
 import Image from "next/image";
-import ReactMap, { Marker } from "react-map-gl";
+import { useEffect, useRef } from "react";
+import ReactMapGL, { Marker } from "react-map-gl";
+
+import SportsScoreIcon from "@mui/icons-material/SportsScore";
 
 type ILocation = {
   lat: number;
@@ -10,44 +14,96 @@ type ILocation = {
 type IMapProps = {
   carLocation: ILocation;
   mapLocation: ILocation;
+  lapLocation: ILocation;
 };
 
+const fitToBounds = (
+  map: mapboxgl.Map | null,
+  carLocation: ILocation,
+  lapLocation: ILocation,
+) => {
+  if (!map) return;
+  const bounds: LngLatBoundsLike = [
+    [carLocation.lng, carLocation.lat],
+    [lapLocation.lng, lapLocation.lat],
+  ];
+
+  map.fitBounds(bounds, {
+    padding: { top: 35, bottom: 35, left: 35, right: 35 },
+    linear: true,
+    maxZoom: 16,
+  });
+};
 function Map(props: IMapProps): JSX.Element {
-  const { carLocation, mapLocation } = props;
+  const { carLocation, mapLocation, lapLocation } = props;
+  const mapRef = useRef<mapboxgl.Map | null>(null);
+  useEffect(() => {
+    const isOutsideBounds = () => {
+      if (!mapRef.current) return false;
+
+      const { lng, lat } = mapRef.current.getBounds().getNorthEast();
+      const { lng: westLng, lat: southLat } = mapRef.current
+        .getBounds()
+        .getSouthWest();
+
+      return (
+        carLocation.lng < westLng ||
+        carLocation.lng > lng ||
+        carLocation.lat > lat ||
+        carLocation.lat < southLat ||
+        lapLocation.lng < westLng ||
+        lapLocation.lng > lng ||
+        lapLocation.lat > lat ||
+        lapLocation.lat < southLat
+      );
+    };
+
+    if (isOutsideBounds() && mapRef.current) {
+      fitToBounds(mapRef.current, carLocation, lapLocation);
+    }
+  }, [carLocation, lapLocation]);
+
   if (!process.env.NEXT_PUBLIC_MAPSAPIKEY) return <></>;
   return (
-    <ReactMap
-      mapLib={import("mapbox-gl")}
-      mapboxAccessToken={process.env.NEXT_PUBLIC_MAPSAPIKEY}
-      longitude={mapLocation.lng}
-      latitude={mapLocation.lat}
-      initialViewState={{
-        longitude: mapLocation.lng,
-        latitude: mapLocation.lat,
-        zoom: 14,
-      }}
-      style={{ width: "100%", height: "100%" }}
-      mapStyle="mapbox://styles/mapbox/dark-v11"
-      boxZoom={false}
-      doubleClickZoom={false}
-      dragPan={false}
-      dragRotate={false}
-      scrollZoom={false}
-      keyboard={false}
-    >
-      <Marker
-        longitude={carLocation.lng}
-        latitude={carLocation.lat}
-        anchor={"center"}
+    <div style={{ width: "100%", height: "100%" }}>
+      <ReactMapGL
+        mapLib={import("mapbox-gl")}
+        mapboxAccessToken={process.env.NEXT_PUBLIC_MAPSAPIKEY}
+        initialViewState={{
+          longitude: mapLocation.lng,
+          latitude: mapLocation.lat,
+          zoom: 14,
+        }}
+        style={{ width: "100%", height: "100%" }}
+        mapStyle="mapbox://styles/mapbox/dark-v11"
+        boxZoom={false}
+        doubleClickZoom={false}
+        dragPan={false}
+        dragRotate={false}
+        scrollZoom={false}
+        keyboard={false}
+        onLoad={(event) => {
+          mapRef.current = event.target;
+          fitToBounds(mapRef.current, carLocation, lapLocation);
+        }}
       >
-        <Image
-          src="/assets/HeliosBirdseye.png"
-          alt="map-pin"
-          width={20}
-          height={50}
-        />
-      </Marker>
-    </ReactMap>
+        <Marker longitude={carLocation.lng} latitude={carLocation.lat}>
+          <Image
+            src="/assets/HeliosBirdseye.png"
+            alt="map-pin"
+            width={20}
+            height={50}
+          />
+        </Marker>
+        <Marker
+          longitude={lapLocation.lng}
+          latitude={lapLocation.lat}
+          style={{ color: "white" }}
+        >
+          <SportsScoreIcon />
+        </Marker>
+      </ReactMapGL>
+    </div>
   );
 }