feat(follow-location): map wip

src/containers/Map/FeatureImages.js

@@ -8,6 +8,7 @@ import markerGreen from "~/assets/img/marker-green.png";
 import markerRedDisabled from "~/assets/img/marker-red-disabled.png";
 import markerYellowDisabled from "~/assets/img/marker-yellow-disabled.png";
 import markerGreenDisabled from "~/assets/img/marker-green-disabled.png";
+import markerOrigin from "~/assets/img/marker-origin.png";
 
 const images = {
   red: markerRed,
@@ -16,6 +17,7 @@ const images = {
   redDisabled: markerRedDisabled,
   yellowDisabled: markerYellowDisabled,
   greenDisabled: markerGreenDisabled,
+  origin: markerOrigin,
 };
 
 export default function FeatureImages() {

src/containers/Map/ShapePoints.js

@@ -12,6 +12,11 @@ const hitbox = {
   height: HITBOX_SIZE,
 };
 
+const iconStyle = {
+  iconImage: ["get", "icon"],
+  iconSize: 0.5,
+};
+
 const useStyles = createStyles(({ theme: { colors } }) => ({
   clusterCount: {
     textField: "{point_count_abbreviated}",
@@ -46,6 +51,13 @@ export default function ShapePoints({ shape, children, ...shapeSourceProps }) {
       <AlertSymbolLayer level="yellow" isDisabled />
       <AlertSymbolLayer level="green" isDisabled />
 
+      <Maplibre.SymbolLayer
+        filter={["==", ["get", "icon"], "origin"]}
+        key="points-origin"
+        id="points-origin"
+        style={iconStyle}
+      />
+
       {children}
     </Maplibre.ShapeSource>
   );

src/scenes/AlertCurMap/useFeatures.js

@@ -3,6 +3,7 @@ import { getDistance } from "geolib";
 import Supercluster from "supercluster";
 import useShallowMemo from "~/hooks/useShallowMemo";
 import useShallowEffect from "~/hooks/useShallowEffect";
+import { deepEqual } from "fast-equals";
 
 export default function useFeatures({
   clusterFeature,
@@ -38,10 +39,8 @@ export default function useFeatures({
     return computedList;
   }, [alertingList, userCoords, hasUserCoords]);
 
-  const featureCollection = useShallowMemo(
+  const featureCollection = useShallowMemo(() => {
-    () => ({
+    const features = list.map((row) => {
-      type: "FeatureCollection",
-      features: list.map((row) => {
       const { alert } = row;
       const { level, state } = alert;
       const [longitude, latitude] = alert.location.coordinates;
@@ -63,10 +62,44 @@ export default function useFeatures({
           coordinates,
         },
       };
-      }),
+    });
-    }),
+
-    [list],
+    // Add initial location marker if locations are different
-  );
+    list.forEach((row) => {
+      const { alert } = row;
+      if (
+        alert.initialLocation &&
+        alert.location &&
+        !deepEqual(alert.initialLocation, alert.location)
+      ) {
+        const [longitude, latitude] = alert.initialLocation.coordinates;
+        const coordinates = [longitude, latitude];
+        const id = `alert:${alert.id}:initial`;
+
+        features.push({
+          type: "Feature",
+          id,
+          properties: {
+            id,
+            icon: "origin",
+            level: alert.level,
+            alert,
+            coordinates,
+            isInitialLocation: true,
+          },
+          geometry: {
+            type: "Point",
+            coordinates,
+          },
+        });
+      }
+    });
+
+    return {
+      type: "FeatureCollection",
+      features,
+    };
+  }, [list]);
 
   const superCluster = useShallowMemo(() => {
     const cluster = new Supercluster({ radius: 40, maxZoom: 16 });