ionViewDidLoad() {
console.log('ionViewDidLoad LocationsPage');
this.getUserLocation();
this.subscription = this.locationService.hits
  .subscribe((hits) =>{
    this.markers = hits;
    this.filterLocations(this.locationCategory, this.markers)

    },
    (err)=> {
      console.log(err);
    });
}

private getUserLocation() {
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(position => {
    this.userLat = position.coords.latitude;
    this.userLong = position.coords.longitude;

    this.locationService.getLocations(this.radius, [this.userLat, this.userLong]);
    console.log(this.locationService.hits);
  });
}
}
filterLocations(category: string, markers) {
  console.log(markers);
  this.filteredMarkers = markers;
  console.log('markers to be filtered: ', this.filteredMarkers, 'category: ',category);
  if (category != ''){
    category = category.toLocaleLowerCase();
    this.filteredMarkers = this.filteredMarkers.filter(location => {
      console.log(this.filteredMarkers);
      return !category || location.category.toLowerCase().indexOf(category) !== -1;
  });
}
return this.filteredMarkers;
}

getLocations(radius: number, coords: Array<number>) {
 let newName = '';
 let newDescription = '';

 this.geoFire.query({
  center: coords,
  radius: radius
})
  .on('key_entered', (key, location, distance) => {


    console.log(newName);
    let hit = {
      location: location,
      distance: distance,
      name: '',
      description: '',
      category: ''
    };
    let currentHits = this.hits.value;


      this.getLocationData(key).subscribe(
        (location) =>{
          newName = location.name;
          hit.name = location.name;
          hit.description = location.description;
          hit.category = location.category;
          currentHits.push(hit);
          this.hits.next(currentHits);

        }
      );

  });
}

getLocationData(ID: string): Observable<Location>{
  return this.db.object('/locationData/'+ID).valueChanges();
}