diff --git a/src/assets/img/marker-origin.png b/src/assets/img/marker-origin.png
new file mode 100644
index 0000000..9a2eaa3
Binary files /dev/null and b/src/assets/img/marker-origin.png differ
diff --git a/src/containers/Map/FeatureImages.js b/src/containers/Map/FeatureImages.js
index cc46db2..90b19e2 100644
--- a/src/containers/Map/FeatureImages.js
+++ b/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() {
diff --git a/src/containers/Map/ShapePoints.js b/src/containers/Map/ShapePoints.js
index edc5ed2..943ecd2 100644
--- a/src/containers/Map/ShapePoints.js
+++ b/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 }) {
+
+
{children}
);
diff --git a/src/scenes/AlertCurMap/useFeatures.js b/src/scenes/AlertCurMap/useFeatures.js
index d14d001..0db219e 100644
--- a/src/scenes/AlertCurMap/useFeatures.js
+++ b/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(
- () => ({
- type: "FeatureCollection",
- features: list.map((row) => {
- const { alert } = row;
- const { level, state } = alert;
- const [longitude, latitude] = alert.location.coordinates;
+ const featureCollection = useShallowMemo(() => {
+ const features = list.map((row) => {
+ const { alert } = row;
+ const { level, state } = alert;
+ const [longitude, latitude] = alert.location.coordinates;
+ const coordinates = [longitude, latitude];
+ 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 icon = state === "open" ? level : `${level}Disabled`;
- return {
+ const id = `alert:${alert.id}:initial`;
+
+ features.push({
type: "Feature",
id,
properties: {
id,
- level,
- icon,
+ icon: "origin",
+ 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 });