Frontend can now filter with timespan

frontend/src/app/map/map.component.html

@@ -0,0 +1,14 @@
+<mgl-map [style]="'mapbox://styles/mapbox/outdoors-v11'">
+    <mgl-geojson-source id="locHistory" [data]="data"></mgl-geojson-source>
+    <mgl-layer
+        id="locHisotryLines"
+        type="line"
+        source="locHistory"
+        [zoom]="3"
+        [paint]="{
+          'line-color': '#ff0000',
+          'line-width': 4
+        }"
+      >
+      </mgl-layer>
+</mgl-map>

frontend/src/app/map/map.component.scss

@@ -0,0 +1,8 @@
+mgl-map {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+}

frontend/src/app/map/map.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapComponent } from './map.component';
+
+describe('MapComponent', () => {
+  let component: MapComponent;
+  let fixture: ComponentFixture<MapComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MapComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/map/map.component.ts

@@ -0,0 +1,36 @@
+import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { Map } from 'mapbox-gl';
+import { APIService } from '../api.service';
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss']
+})
+export class MapComponent implements AfterViewInit {
+
+  map: Map;
+
+  data: GeoJSON.FeatureCollection<GeoJSON.LineString> = {
+    type: 'FeatureCollection', features: [
+    {
+      type: 'Feature',
+      properties: null,
+      geometry: { type: 'LineString', coordinates: [] }
+    }]
+  };
+
+  constructor(private api: APIService) {
+    this.api.beatsEvent.subscribe(beats => {
+      this.data.features[0].geometry.coordinates = [];
+      beats.forEach((beat) => {
+        this.data.features[0].geometry.coordinates.push([beat.coordinate[1], beat.coordinate[0]]);
+        this.data = {... this.data};
+      });
+    });
+  }
+
+  async ngAfterViewInit(): Promise<void> {
+  }
+
+}