diff --git a/web/src/app/components/main-page/map/map.component.ts b/web/src/app/components/main-page/map/map.component.ts
index 2d424609e..c119be13d 100644
--- a/web/src/app/components/main-page/map/map.component.ts
+++ b/web/src/app/components/main-page/map/map.component.ts
@@ -370,12 +370,11 @@ export class MapComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
-  // TODO(#1445): override equals function in LocationOfInterest after making it concrete and removing all its inherent classes
   private isLocationOfInterestEqual(
     a: LocationOfInterest,
     b: LocationOfInterest
   ): boolean {
-    return JSON.stringify(a) === JSON.stringify(b);
+    return a.equals(b);
   }
 
   /**
diff --git a/web/src/app/models/loi.model.ts b/web/src/app/models/loi.model.ts
index c44a2d12e..850473d97 100644
--- a/web/src/app/models/loi.model.ts
+++ b/web/src/app/models/loi.model.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { List, Map } from 'immutable';
+import { List, Map, is } from 'immutable';
 
 import { Geometry } from './geometry/geometry';
 
@@ -29,6 +29,18 @@ export class LocationOfInterest {
     readonly submissionCount: number = 0
   ) {}
 
+  equals(other: LocationOfInterest): boolean {
+    return (
+      this.id === other.id &&
+      this.jobId === other.jobId &&
+      this.customId === other.customId &&
+      this.predefined === other.predefined &&
+      this.submissionCount === other.submissionCount &&
+      is(this.geometry, other.geometry) &&
+      is(this.properties, other.properties)
+    );
+  }
+
   static getSmallestByArea(
     lois: List<LocationOfInterest>
   ): LocationOfInterest | undefined {
diff --git a/web/src/app/services/loi/loi.service.ts b/web/src/app/services/loi/loi.service.ts
index 54d2e1ab5..4c07cfe3f 100644
--- a/web/src/app/services/loi/loi.service.ts
+++ b/web/src/app/services/loi/loi.service.ts
@@ -56,11 +56,13 @@ export class LocationOfInterestService {
             )
       ),
       map(lois =>
-        lois.sort((a, b) =>
-          LocationOfInterestService.getDisplayName(a).localeCompare(
-            LocationOfInterestService.getDisplayName(b)
-          )
-        )
+        lois
+          .map(loi => ({
+            loi,
+            name: LocationOfInterestService.getDisplayName(loi),
+          }))
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .map(({ loi }) => loi)
       )
     );
   }