feat: Limiting displayed map markers to increase performance

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>

src/app/map/map.component.scss

@@ -1,3 +1,7 @@
+.displayingOf {
+  text-align: center;
+}
+
 #map {
   height: 85vh;
   width: 100%;

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