fix(web)

oxymore-tech · Oct 17, 2024 · da65446 · da65446
1 parent 8ae5844
commit da65446
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 70 deletions.
diff --git a/web/src/app/dashboard/trip-records/[itemId]/page.tsx b/web/src/app/dashboard/trip-records/[itemId]/page.tsx
@@ -17,6 +17,7 @@ import { useLocalization } from "@/api/intl";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { GeojsonSource } from "@/components/map/GeojsonSource";
 import { Popup } from "@/components/map/Popup";
+import { RallyingPointsLayer } from "@/components/map/layers/RallyingPointsLayer";
 
 const RegenButton = ({ id }: { id: string }) => {
   const [loading, setLoading] = useState(false);
@@ -240,6 +241,7 @@ export default function TripRecordItemPage({ params }: { params: { itemId: strin
         </div>
       )}
       <Map center={from?.rallyingPoint.location}>
+        <RallyingPointsLayer />
         {!!record && <RouteLayer points={record.wayPoints.map(w => w.rallyingPoint)} />}
         {!!markerFeatures && <PingsMarkersLayer features={markerFeatures!} />}
         {!!record && !!markerFeatures && (

diff --git a/web/src/components/map/layers/base/MarkersLayer.tsx b/web/src/components/map/layers/base/MarkersLayer.tsx
@@ -1,8 +1,7 @@
 import { useMapContext } from "@/components/map/Map";
 import { SymbolLayerSpecification } from "@maplibre/maplibre-gl-style-spec";
 import { MapGeoJSONFeature, MapMouseEvent } from "maplibre-gl";
-import React, { useEffect, useMemo, useState } from "react";
-import { SymbolLayer } from "@/components/map/layers/base/SymbolLayer";
+import React, { useEffect, useState } from "react";
 
 export const MarkersLayer = (config: MarkersLayerConfig) => {
   useMarkersLayer(config);
@@ -52,6 +51,7 @@ export const useMarkersLayer = ({ source, id, props, onMouseLeavePoint, onMouseE
       layout: {
         ...props.layout,
         "icon-image": "pin",
+        "icon-size": 2,
         "icon-allow-overlap": true,
         "icon-optional": false,
         "icon-anchor": "bottom"
@@ -98,71 +98,3 @@ export const useMarkersLayer = ({ source, id, props, onMouseLeavePoint, onMouseE
     };
   }, [ready, source, onMouseEnterPoint, onMouseLeavePoint, onClickPoint, map]);
 };
-
-/*export const RPMarkersLayer = ({
-  onClickListener,
-  sourceId
-}: {
-  sourceId: string;
-  onClickListener?: (e: MapMouseEvent & { features?: MapGeoJSONFeature[] | undefined } & Object) => void;
-}) => {
-  const map = useMapContext();
-  const [ready, setReady] = useState(false);
-  useEffect(() => {
-    const loadImage = () =>
-      map.current?.loadImage("/pin.png", function (error, image) {
-        if (error) throw error;
-        if (!image) console.warn("No image found");
-        else if (!map.current?.hasImage("pin")) {
-          map.current?.addImage("pin", image, { sdf: true });
-          setReady(true);
-        }
-        console.log("here");
-      });
-
-    console.log(map.current?.loaded());
-    if (map.current?.loaded()) loadImage();
-    else map.current?.once("idle", loadImage);
-    return () => {
-      if (map.current?.hasImage("pin")) map.current?.removeImage("pin");
-    };
-  }, [map]);
-  console.log("ready", ready);
-
-  return useMemo(
-    () =>
-      ready ? (
-        <SymbolLayer
-          id={sourceId}
-          source={sourceId}
-          // @ts-ignore
-          onClickPoint={onClickListener}
-          props={{
-            layout: {
-              "icon-image": "pin",
-              "icon-size": ["interpolate", ["linear"], ["zoom"], 7, 0.3, 9, 0.5, 11, 0.7],
-              "icon-allow-overlap": true,
-              "icon-optional": false,
-              "icon-anchor": "bottom",
-              "text-field": "", //["step", ["zoom"], "", 11, ["get", "label"]],
-              "text-allow-overlap": false,
-              "text-anchor": "bottom",
-              "text-offset": [0, -3.4],
-              "text-max-width": 5.4,
-              "text-size": 12,
-              "text-optional": true
-            },
-            paint: {
-              "text-halo-width": 1.5,
-              "text-color": ["case", ["boolean", ["feature-state", "selected"], false], "#073852", "#52070c"],
-              "text-halo-color": "#fff",
-              "icon-color": ["case", ["boolean", ["feature-state", "selected"], false], "#0094ff", "#e35374"],
-              "icon-halo-color": "#000",
-              "icon-halo-width": 0.6
-            }
-          }}
-        />
-      ) : null,
-    [onClickListener, ready, sourceId]
-  );
-};*/