From 737820f72a227696d0a8f04debc0ed52df3bc89c Mon Sep 17 00:00:00 2001
From: Konstantinos Kamaropoulos <kamaropoulos@outlook.com>
Date: Mon, 2 Mar 2020 15:27:55 +0200
Subject: [PATCH] feat: Limiting displayed map markers to increase performance

---
 src/app/map/map.component.html | 7 +++----
 src/app/map/map.component.scss | 4 ++++
 src/app/map/map.component.ts   | 8 ++++++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html
index 8e4c7f1..e47e9c4 100644
--- a/src/app/map/map.component.html
+++ b/src/app/map/map.component.html
@@ -7,8 +7,7 @@
   <div class="mapDiv">
     <div #mapContainer id="map"></div>
   </div>
-  <!-- </div> -->
-  <ul>
-    <li *ngFor="let log of data; let i = index">{{ log.gps_data.longitude }} | {{ log.gps_data.latitude }}</li>
-  </ul>
+  <div *ngIf="displayedPoints" class="displayingOf">
+    Displaying last {{ displayedPoints }} records (ommited {{ ommitedPoints }} data points)
+  </div>
 </div>
diff --git a/src/app/map/map.component.scss b/src/app/map/map.component.scss
index ec8ebe5..3757a23 100644
--- a/src/app/map/map.component.scss
+++ b/src/app/map/map.component.scss
@@ -1,3 +1,7 @@
+.displayingOf {
+  text-align: center;
+}
+
 #map {
   height: 85vh;
   width: 100%;
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index 53d6dae..6071842 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -26,6 +26,9 @@ export class MapComponent implements OnInit {
 
   lastPoint: number[];
 
+  ommitedPoints: Number;
+  displayedPoints: Number;
+
   constructor(private logsService: LogsService) {}
 
   async ngOnInit() {
@@ -47,6 +50,11 @@ export class MapComponent implements OnInit {
       if (firstRun) {
         data = await this.logsService.getLogsFirstRun();
         firstRun = false;
+        if (data.length > 100) {
+          this.ommitedPoints = data.length;
+          data = data.slice(data.length - 100, data.length);
+        }
+        this.displayedPoints = data.length;
       } else {
         data = await this.logsService.getUpdates();
       }