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 });