Browse Source

feat: Limiting displayed map markers to increase performance

master
Konstantinos Kamaropoulos 5 years ago
parent
commit
737820f72a
  1. 7
      src/app/map/map.component.html
  2. 4
      src/app/map/map.component.scss
  3. 8
      src/app/map/map.component.ts

7
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>

4
src/app/map/map.component.scss

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

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

Loading…
Cancel
Save