Проблема маркеров обновления интеграции в реальном времени Angular 5 Leaflet

Question

У меня есть этот сервис, который наблюдает за изменениями через интервал, используя запрос GET к моему API:

используемый пакет: https://github.com/Asymmetrik/ngx-leaflet

Модель Coords.ts

export class Coords {
constructor(public lat: number,
          public lng: number,
          public code: string,
          public uuid: string) {}
}

map.service.ts

@Injectable()
export class RealTimeDataService {

constructor(private http: HttpClient) { }


private dataSubject: BehaviorSubject<Coords[]> = new 
BehaviorSubject([]);

data$: Observable<Coords[]> = this.dataSubject.asObservable();

updateData(): Observable<any>  {
return this.getData().do((data) => {
  this.dataSubject.next(data);
 });
}


// My data is an array of model objects
getData(): Observable<Coords[]>{
const headers = new HttpHeaders({'Content-Type':'application/json; charset=utf-8', 'code':'0T86MIT'});
return this.http.get(`${AUTH_API_URL}/user/coords`, {headers: headers})
  .map((response: Coords[]) => {
    let data = response;
    if(data){
      return data;
    }
  })
 }
}

И это компонент карты:

map.component.ts

export class MapComponent implements OnInit, OnDestroy {

constructor(private realTimeDataService: RealTimeDataService, private 
zone: NgZone) {
}

LAYER_OSM = 
tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
{maxZoom: 18, attribution: '&copy; <a 
 href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
 markers: Layer[] = [];

options = {
 layers: [this.LAYER_OSM],
 zoom  : 13,
 center: latLng(38.274452, 21.755992)
};

private unsubscribe: Subject<any> = new Subject();
private subscription: Subscription;

data: Coords[];
interval: any;

ngOnInit() {
 this.refreshData();
 if (this.interval) {
  clearInterval(this.interval);
}
 this.interval = setInterval(() => {
  this.refreshData();
   }, 2000);


this.realTimeDataService.data$.takeUntil(this.unsubscribe)
  .subscribe(data => {
    this.zone.run(() => {

      this.data = data;
     // this.markers = [];
      if (data.length > 0) {
        data.map((a, index) => {
          let lat = a.lat;
          let lng = a.lng;
          let uuid = a.uuid;

          const newMarker = marker(
            [lat, lng],
            {
              icon: icon({
                iconSize  : [25, 41],
                iconAnchor: [13, 41],
                iconUrl   : 'assets/marker-icon.png',
                shadowUrl : 'assets/marker-shadow.png'
              })
            }
          );
          newMarker.bindPopup('<p>' + uuid + '</p>', {autoPan: true});
          this.markers.push(newMarker);
        });
      }
      // console.log('sub', data);
    });
  });
}

ngOnDestroy() {
 this.unsubscribe.next();
 this.unsubscribe.complete();
}

refreshData() {
 this.realTimeDataService.updateData()
  .takeUntil(this.unsubscribe)
  .subscribe();
 }
}

map.component.html

<div class="map-padding" *ngIf="data.length > 0">
 <div style="height: 1000px;"
   leaflet
   [leafletOptions]="options"
   [leafletLayers]="markers">
 </div>
</div>

Каждый раз data который содержит lat,lng обновляет то старые маркеры не удаляются. Если я установлю this.markers = [] это обходной путь, но если пользователь щелкает маркер, всплывающее окно остается открытым в течение 2 секунд (до тех пор, пока не появятся новые данные). Как сохранить всплывающее окно открытым, когда поступают новые данные?

предварительный просмотр проблемы: (я только что нажал один раз, всплывающее окно автоматически исчезает при поступлении новых данных)

РЕДАКТИРОВАТЬ:

кроме этого, есть ли способ сказать наблюдаемой, чтобы остановить / приостановить потоковую передачу, если новые данные совпадают со старыми?