0

I've an Angular application, connected to a firebase DB. The application will be displaying marker on a google maps, and the goal is to have it working as a Progressive Web App, with offline capabilities.

I was counting on AngularFirestore to handle the offline part.

First test worked nicely, but the issue is that when I imported my real data, I got chrome which Paused before potential out-of-memory crash.

Here is my current Service that get my Spots: 

import { Injectable } from '@angular/core';
import * as fromSpots from './spots.reducer';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs';
import { AngularFirestore } from '@angular/fire/firestore';
import { map, take } from 'rxjs/operators';
import { Spot } from './spot.model';
import { SetSpots } from './spots.actions';

@Injectable({
  providedIn: 'root'
})
export class SpotsService {
  private firebaseSubs: Subscription[] = [];

  constructor(
    private db: AngularFirestore,
    private store: Store<fromSpots.State>
  ) { }

  fetchSpots() {
    this.firebaseSubs.push(
      this.db
      .collection('spots')
      .snapshotChanges()
      .pipe(map(docArray=>{
        return docArray.map(doc=>{
          return {
            id: doc.payload.doc.id,
            ...doc.payload.doc.data()
          } as Spot;
        })
      })) .subscribe((spots: Spot[])=>{
        console.log(spots);
        this.store.dispatch(new SetSpots(spots))
      },
        error =>{
          //TODO
          console.error(error);
        }
      )
    );
  }
}

I think it crashes while doing the map(because I don't get the console.error part).

Some metrics: ~30'000 documents, for a total size of 185MB(I know that's a lot, didn't thought it will be that big initially).

So my question is how to handle offline data coming from big database such as firebase?

J4N
  • 19,480
  • 39
  • 187
  • 340
  • Are you clustering your markers or using spatial queries on the viewport to only render the markers that are in the viewport? – nll_ptr Feb 05 '20 at 21:24
  • @nullptr.t the markers are clustered, I'm not sure how to render only markers in the viewport or how to make spatial queries? – J4N Feb 06 '20 at 04:42
  • I don't think the google maps js sdk is able to call spatial queries on your own datasets, but I could be wrong. If it is the map marker rendering that's causing the issue, all you need to do is get the [bounding box](https://developers.google.com/maps/documentation/javascript/reference/map#Map.getBounds) of your viewport and [determine if points lie within it](https://stackoverflow.com/a/29915728/9901630), if they do - then render them. You could also roll with a library like turf.js if you don't want to write your own spatial queries. – nll_ptr Feb 06 '20 at 13:04
  • Okay, but you still get all the data in the angular ngrx store? – J4N Feb 06 '20 at 13:50

0 Answers0