Updates now run in NgZone

Sample/Frontend/opensky-app/src/app/app.component.html

@@ -1,3 +1,11 @@
+<div id="heading">
+ <h1>Flight Tracker</h1>
+ <p>
+ Click on a plane to get its associated state vector.
+ </p>
+ <pre id="features">{{features}}</pre>
+</div>
+
 <div class="main-container">
  <mapbox-map [mapStyle]="mapStyle" [center]="mapCenter" [zoom]="mapZoom"></mapbox-map>
 </div>

Sample/Frontend/opensky-app/src/app/app.component.scss

@@ -7,6 +7,20 @@ mapbox-map {
  width: 100%;
 }
 
+#heading {
+ font-family: 'Montserrat', sans-serif;
+ color: rgb(255, 255, 255);
+ background: rgb(40, 40, 40);
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ bottom: 0px;
+ padding: 30px;
+ width: 300px;
+ overflow: auto;
+ z-index: 9;
+}
+
 .main-container {
  position: absolute;
  top: 0;

Sample/Frontend/opensky-app/src/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { LngLat, LngLatLike, Style } from 'mapbox-gl';
+import { Component, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { LngLat, LngLatLike, MapLayerMouseEvent, Style } from 'mapbox-gl';
 import { Observable, Subject, Subscription } from 'rxjs';
 import { filter, map, takeUntil } from 'rxjs/operators'
 import { environment } from 'src/environments/environment';
@@ -20,11 +20,13 @@ export class AppComponent implements OnInit, OnDestroy {
  mapStyle: string;
  mapCenter: LngLatLike;
  isMapLoaded: boolean;
+ features: string;
 
- constructor(private sseService: SseService, private mapService: MapService) {
+ constructor(private ngZone: NgZone, private sseService: SseService, private mapService: MapService) {
  this.mapStyle = "http:https://localhost:9000/static/style/osm_liberty/osm_liberty.json";
  this.mapCenter = new LngLat(7.628202, 51.961563);
- this.mapZoom = 14;
+ this.mapZoom = 10;
+ this.features = "Select a plane on the map\n to display its data.";
  }
 
  ngOnInit(): void {
@@ -35,6 +37,12 @@ export class AppComponent implements OnInit, OnDestroy {
  this.isMapLoaded = value;
  });
 
+ this.mapService.onMarkerClicked()
+ .pipe(takeUntil(this.destroy$))
+ .subscribe((value: mapboxgl.MapboxGeoJSONFeature[]) => {
+ this.handleMarkerClick(value);
+ });
+
  this.sseService
  .asObservable(environment.apiUrl)
  .pipe(
@@ -46,12 +54,23 @@ export class AppComponent implements OnInit, OnDestroy {
 
  updateStateVectors(stateVectorResponse: StateVectorResponse): void {
  if (this.isMapLoaded) {
- console.log("Updating Map ...");
+ console.log(`Received ${stateVectorResponse.states.length} State Vectors. Updating Map ...`);
 
- this.mapService.displayStateVectors(stateVectorResponse.states);
+ this.mapService.displayStateVectors(stateVectorResponse.time, stateVectorResponse.states);
+
+ console.log("Finished updating map.");
  }
  }
 
+ handleMarkerClick(features: mapboxgl.MapboxGeoJSONFeature[]): void {
+ if(features && features.length > 0) {
+ this.ngZone.run(() => {
+ this.features = JSON.stringify(features[0].properties, null, 2);
+ });
+ }
+
+ }
+
  ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();

Sample/Frontend/opensky-app/src/app/services/map.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, NgZone } from "@angular/core";
 import * as mapboxgl from 'mapbox-gl';
-import { LngLatLike, MapboxOptions, GeoJSONSource, Style, MapLayerMouseEvent } from 'mapbox-gl';
-import { BehaviorSubject, Observable, of } from "rxjs";
+import { LngLatLike, MapboxOptions, GeoJSONSource, Style, MapLayerMouseEvent, MapboxGeoJSONFeature } from 'mapbox-gl';
+import { BehaviorSubject, Observable, of, ReplaySubject } from "rxjs";
 import { first } from 'rxjs/operators';
 import { StateVector } from '../model/state-vector';
 
@@ -14,13 +14,13 @@ export class MapService {
 
  private mapCreated$: BehaviorSubject<boolean>;
  private mapLoaded$: BehaviorSubject<boolean>;
- private markerClick$: BehaviorSubject<MapLayerMouseEvent>;
+ private markerClick$: ReplaySubject<MapboxGeoJSONFeature[]>;
  private markers: GeoJSON.FeatureCollection<GeoJSON.Geometry>;
 
  constructor(private ngZone: NgZone) {
  this.mapCreated$ = new BehaviorSubject<boolean>(false);
  this.mapLoaded$ = new BehaviorSubject<boolean>(false);
- this.markerClick$ = new BehaviorSubject(undefined);
+ this.markerClick$ = new ReplaySubject();
 
  this.markers = {
  type: 'FeatureCollection',
@@ -88,11 +88,18 @@ export class MapService {
  });
  });
 
- this.mapInstance.on('click', 'markers', (evt: MapLayerMouseEvent) => {
-
- })
+ this.mapInstance.on('click', 'markers', (e: MapLayerMouseEvent) => {
+ this.markerClick$.next(e.features);
+ });
 
 
+ this.mapInstance.on('mousemove', 'markers', (e) => {
+ this.mapInstance.getCanvas().style.cursor = 'pointer';
+ });
+
+ this.mapInstance.on("mouseleave", "markers", () => {
+ this.mapInstance.getCanvas().style.cursor = '';
+ });
  }
 
  onMapLoaded(): Observable<boolean> {
@@ -103,11 +110,11 @@ export class MapService {
  return this.mapCreated$.asObservable();
  }
 
- onMarkerClicked(): Observable<MapLayerMouseEvent> {
+ onMarkerClicked(): Observable<MapboxGeoJSONFeature[]> {
  return this.markerClick$.asObservable();
  }
 
- displayStateVectors(states: Array<StateVector>): void {
+ displayStateVectors(time: number, states: Array<StateVector>): void {
  if (this.mapInstance) {
  this.markers.features = states
  .filter(state => state.longitude && state.latitude)
@@ -125,7 +132,11 @@ export class MapService {
  const feature: GeoJSON.Feature<GeoJSON.Point> = {
  type: 'Feature',
  properties: {
- 'iconSize': [60, 60]
+ 'flight.icao24': stateVector.icao24,
+ 'flight.last_contact': stateVector.last_contact,
+ 'flight.longitude': stateVector.longitude,
+ 'flight.latitude': stateVector.latitude,
+ 'flight.origin_country': stateVector.origin_country
  },
  geometry: {
  type: 'Point',