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,35 +39,67 @@ export default function useFeatures({
     return computedList;
   }, [alertingList, userCoords, hasUserCoords]);
 
-  const featureCollection = useShallowMemo(
+  const featureCollection = useShallowMemo(() => {
-    () => ({
+    const features = list.map((row) => {
-      type: "FeatureCollection",
+      const { alert } = row;
-      features: list.map((row) => {
+      const { level, state } = alert;
-        const { alert } = row;
+      const [longitude, latitude] = alert.location.coordinates;
-        const { level, state } = alert;
+      const coordinates = [longitude, latitude];
-        const [longitude, latitude] = alert.location.coordinates;
+      const id = `alert:${alert.id}`;
+      const icon = state === "open" ? level : `${level}Disabled`;
+      return {
+        type: "Feature",
+        id,
+        properties: {
+          id,
+          level,
+          icon,
+          alert,
+          coordinates,
+        },
+        geometry: {
+          type: "Point",
+          coordinates,
+        },
+      };
+    });
+
+    // 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}`;
+        const id = `alert:${alert.id}:initial`;
-        const icon = state === "open" ? level : `${level}Disabled`;
+
-        return {
+        features.push({
           type: "Feature",
           id,
           properties: {
             id,
-            level,
+            icon: "origin",
-            icon,
+            level: alert.level,
             alert,
             coordinates,
+            isInitialLocation: true,
           },
           geometry: {
             type: "Point",
             coordinates,
           },
-        };
+        });
-      }),
+      }
-    }),
+    });
-    [list],
+
-  );
+    return {
+      type: "FeatureCollection",
+      features,
+    };
+  }, [list]);
 
   const superCluster = useShallowMemo(() => {
     const cluster = new Supercluster({ radius: 40, maxZoom: 16 });