Update pin rendering logic

bcgov · Feb 11, 2024 · ebc986a · ebc986a
1 parent 72e5f96
commit ebc986a
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 3 deletions.
diff --git a/...ce/frontend/src/components/maps/leaflet/Control/AdvancedFilter/FilterContentContainer.tsx b/...ce/frontend/src/components/maps/leaflet/Control/AdvancedFilter/FilterContentContainer.tsx
@@ -16,7 +16,7 @@ export const FilterContentContainer: React.FC<
 > = ({ View }) => {
   const mapMachine = useMapStateMachine();
 
-  const setVisiblePimsProperties = mapMachine.setVisiblePimsProperties;
+  const { setVisiblePimsProperties, setShowDisposed } = mapMachine;
 
   const { getMatchingProperties } = usePimsPropertyRepository();
 
@@ -36,8 +36,9 @@ export const FilterContentContainer: React.FC<
   const onChange = useCallback(
     (model: PropertyFilterFormModel) => {
       filterProperties(model.toApi());
+      setShowDisposed(model.isDisposed);
     },
-    [filterProperties],
+    [filterProperties, setShowDisposed],
   );
 
   return <View onChange={onChange} isLoading={getMatchingProperties.loading} />;

diff --git a/source/frontend/src/components/maps/leaflet/Layers/util.tsx b/source/frontend/src/components/maps/leaflet/Layers/util.tsx
@@ -79,6 +79,28 @@ export const otherInterestIconSelect = L.icon({
   shadowSize: [41, 41],
 });
 
+// disposed icon (grey)
+export const disposedIcon = L.icon({
+  iconUrl: require('@/assets/images/pins/disposed.png') ?? 'assets/images/pins/disposed.png',
+  shadowUrl: require('@/assets/images/pins/marker-shadow.png') ?? 'marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
+
+// disposed icon (grey) highlighted
+export const disposedIconSelect = L.icon({
+  iconUrl:
+    require('@/assets/images/pins/disposed-highlight.png') ??
+    'assets/images/pins/disposed-highlight.png',
+  shadowUrl: require('@/assets/images/pins/marker-shadow.png') ?? 'marker-shadow.png',
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
+
 // not owned property icon (orange)
 export const notOwnedPropertyIcon = L.icon({
   iconUrl:
@@ -155,7 +177,16 @@ export function pointToLayer<P extends MarkerFeature, C extends Supercluster.Clu
 export function getMarkerIcon(
   feature: Supercluster.PointFeature<PIMS_Property_Location_View | PIMS_Property_Boundary_View>,
   selected: boolean,
+  showDisposed: boolean = false,
 ): L.Icon<L.IconOptions> {
+  if (showDisposed && feature.properties.IS_DISPOSED) {
+    if (selected) {
+      return disposedIconSelect;
+    } else {
+      return disposedIcon;
+    }
+  }
+
   if (feature.properties.IS_PROPERTY_OF_INTEREST) {
     if (selected) {
       return propertyOfInterestIconSelect;

diff --git a/source/frontend/src/components/maps/leaflet/Markers/SingleMarker.tsx b/source/frontend/src/components/maps/leaflet/Markers/SingleMarker.tsx
@@ -37,7 +37,7 @@ const SinglePropertyMarker: React.FC<React.PropsWithChildren<SinglePropertyMarke
 
   const getIcon = () => {
     if (isOwned) {
-      return getMarkerIcon(pointFeature, isSelected);
+      return getMarkerIcon(pointFeature, isSelected, mapMachine.showDisposed);
     } else {
       return getNotOwnerMarkerIcon(isSelected);
     }

diff --git a/source/frontend/src/mocks/mapFSM.mock.ts b/source/frontend/src/mocks/mapFSM.mock.ts
@@ -36,6 +36,7 @@ export const mapMachineBaseMock: IMapStateMachineContext = {
   isSelecting: false,
   isFiltering: false,
   isShowingMapLayers: false,
+  showDisposed: false,
 
   requestFlyToLocation: jest.fn(),
 
@@ -56,4 +57,5 @@ export const mapMachineBaseMock: IMapStateMachineContext = {
   toggleMapFilter: jest.fn(),
 
   toggleMapLayer: jest.fn(),
+  setShowDisposed: jest.fn(),
 };
diff --git a/source/frontend/src/models/layers/pimsPropertyLocationView.ts b/source/frontend/src/models/layers/pimsPropertyLocationView.ts
@@ -35,6 +35,7 @@ export interface PIMS_Property_Location_View {
   readonly IS_SENSITIVE: string | null;
   readonly IS_OWNED: string | null;
   readonly IS_PROPERTY_OF_INTEREST: string | null;
+  readonly IS_DISPOSED: string | null;
   readonly IS_VISIBLE_TO_OTHER_AGENCIES: string | null;
   readonly ZONING: string | null;
   readonly ZONING_POTENTIAL: string | null;
@@ -74,6 +75,7 @@ export const EmptyPropertyLocation: PIMS_Property_Location_View = {
   IS_SENSITIVE: null,
   IS_OWNED: null,
   IS_PROPERTY_OF_INTEREST: null,
+  IS_DISPOSED: null,
   IS_VISIBLE_TO_OTHER_AGENCIES: null,
   ZONING: null,
   ZONING_POTENTIAL: null,
@@ -116,6 +118,7 @@ export interface PIMS_Property_Boundary_View {
   readonly IS_SENSITIVE: string | null;
   readonly IS_OWNED: string | null;
   readonly IS_PROPERTY_OF_INTEREST: string | null;
+  readonly IS_DISPOSED: string | null;
   readonly IS_VISIBLE_TO_OTHER_AGENCIES: string | null;
   readonly ZONING: string | null;
   readonly ZONING_POTENTIAL: string | null;