diff --git a/web-app/src/app/event/event.service.ts b/web-app/src/app/event/event.service.ts
index a081f50bd..d63721008 100644
--- a/web-app/src/app/event/event.service.ts
+++ b/web-app/src/app/event/event.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { Observable, catchError, finalize, of, tap, zip } from "rxjs";
+import { Observable, ObservableInput, catchError, finalize, forkJoin, of, tap, zip } from "rxjs";
 import * as moment from 'moment'
 import { FilterService } from "../filter/filter.service";
 import { PollingService } from "./polling.service";
@@ -214,7 +214,7 @@ export class EventService {
   }
 
   removeUsersChangedListener(listener) {
-    this.usersChangedListeners = this.usersChangedListeners.forEach((l: any) => {
+    this.usersChangedListeners = this.usersChangedListeners.filter((l: any) => {
       return listener !== l;
     });
   }
@@ -459,9 +459,7 @@ export class EventService {
 
   fetch(): Observable<any> {
     const event = this.filterService.getEvent();
-    if (!event) {
-      return of()
-    }
+    if (!event) { return of()}
 
     const parameters: any = {};
     const interval = this.filterService.getInterval();
@@ -470,10 +468,10 @@ export class EventService {
       parameters.interval = time;
     }
 
-    return zip(
-      this.fetchObservations(event, parameters),
-      this.fetchLocations(event, parameters)
-    )
+    return forkJoin({
+      locations: this.fetchLocations(event, parameters),
+      observations: this.fetchObservations(event, parameters)
+    })
   }
 
   fetchLayers(event) {
@@ -558,6 +556,8 @@ export class EventService {
       this.eventsById[event.id].filteredObservationsById = observationsById;
 
       this.observationsChanged({ added: added, updated: updated, removed: removed });
+
+      console.log('got observations', observations.length)
     });
 
     return observable
@@ -618,6 +618,9 @@ export class EventService {
       this.eventsById[event.id].filteredUsersById = usersById;
 
       this.usersChanged({ added: added, updated: updated, removed: removed });
+
+      console.log('got locations', userLocations.length)
+
     });
 
     return observable
diff --git a/web-app/src/app/map/map.component.scss b/web-app/src/app/map/map.component.scss
index 73a241011..a65de6c50 100644
--- a/web-app/src/app/map/map.component.scss
+++ b/web-app/src/app/map/map.component.scss
@@ -3,11 +3,7 @@
 }
 
 .map-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  height: 100%;
 }
 
 .map-controls-left {
diff --git a/web-app/src/app/map/map.component.ts b/web-app/src/app/map/map.component.ts
index 6220a0904..839ccc777 100644
--- a/web-app/src/app/map/map.component.ts
+++ b/web-app/src/app/map/map.component.ts
@@ -20,6 +20,8 @@ import * as moment from 'moment'
 import 'leaflet-editable'
 import 'leaflet.markercluster'
 import { FeatureEditor } from './edit/FeatureEditor'
+import GeoPackageLayers from './geopackage/GeoPackageLayers'
+import { FilterService } from '../filter/filter.service'
 
 Icon.Default.imagePath = '/'
 
@@ -44,6 +46,7 @@ export class MapComponent implements OnDestroy, AfterViewInit {
   map: any
   groups: any = {}
   layers: any = {}
+  geoPackageLayers: any
   temporalLayers: any = []
   spiderfyState: any = null
   currentLocation: any = null
@@ -58,8 +61,9 @@ export class MapComponent implements OnDestroy, AfterViewInit {
 
   constructor(
     private mapService: MapService,
-    layerService: MapLayerService,
+    private layerService: MapLayerService,
     private eventService: EventService,
+    private filterService: FilterService,
     private localStorageService: LocalStorageService
   ) {
     this.groups['base'] = {
@@ -103,6 +107,10 @@ export class MapComponent implements OnDestroy, AfterViewInit {
   }
 
   ngAfterViewInit() {
+    const screenHeight = window.innerHeight;
+    const screenWidth = window.innerWidth;
+    console.log(`height ${screenHeight} width ${screenWidth}`);
+
     let mapPosition = this.localStorageService.getMapPosition()
     if (!mapPosition) {
       this.localStorageService.setMapPosition({
@@ -177,13 +185,12 @@ export class MapComponent implements OnDestroy, AfterViewInit {
     }
     this.map.on('moveend', saveMapPosition, this)
 
-    // this.geoPackageLayers = new GeoPackageLayers(
-    //   this.map,
-    //   this.layerControl,
-    //   this.LayerService,
-    //   this.FilterService,
-    //   this.LocalStorageService
-    // )
+    this.geoPackageLayers = new GeoPackageLayers(
+      this.map,
+      this.layerService,
+      this.filterService,
+      this.localStorageService
+    )
 
     this.map.on('baselayerchange', baseLayer => {
       const layer = this.layers[baseLayer.id]
@@ -356,7 +363,7 @@ export class MapComponent implements OnDestroy, AfterViewInit {
     added.forEach(added => {
       switch (added.type) {
         case 'GeoPackage':
-          // this.createGeoPackageLayer(added)
+          this.createGeoPackageLayer(added)
           break
         case 'Imagery':
           this.createRasterLayer(added)
@@ -386,6 +393,11 @@ export class MapComponent implements OnDestroy, AfterViewInit {
 
   // TODO move into leaflet service, this and map clip both use it
   createRasterLayer(layerInfo) {
+    console.log('create raster layer', layerInfo)
+    const screenHeight = window.innerHeight;
+    const screenWidth = window.innerWidth;
+    console.log(`create raster layer height ${screenHeight} width ${screenWidth}`);
+
     let paneName = this.BASE_LAYER_PANE
     if (!layerInfo.base) {
       paneName = `pane-${layerInfo.id}`
@@ -422,16 +434,10 @@ export class MapComponent implements OnDestroy, AfterViewInit {
         this.featurePanes.push(pane)
       }
 
-      // table.layer = this.geoPackageLayers.createGeoPackageLayer(table, layerInfo.id, pane)
+      table.layer = this.geoPackageLayers.createGeoPackageLayer(table, layerInfo.id, pane)
       this.layers[layerInfo.id + table.name] = table
 
-      // TODO output
-      // this.onAddLayer({
-      //   type: 'GeoPackage',
-      //   name: table.name,
-      //   table: table,
-      //   layer: table.layer
-      // })
+      this.addLayer(layerInfo)
     })
   }
 
@@ -689,18 +695,18 @@ export class MapComponent implements OnDestroy, AfterViewInit {
   }
 
   removeGeoPackage(layer) {
-    // layer.tables.forEach(table => {
-    //   const id = layer.id + table.name
-    //   const layerInfo = this.layers[id]
-    //   if (layerInfo) {
-    //     this.map.removeLayer(table.layer)
-    //     delete this.layers[id]
-
-    //     // this.onRemoveLayer({ // TODO
-    //     //   layer: table
-    //     // })
-    //   }
-    // })
+    layer.tables.forEach(table => {
+      const id = layer.id + table.name
+      const layerInfo = this.layers[id]
+      if (layerInfo) {
+        this.map.removeLayer(table.layer)
+        delete this.layers[id]
+
+        // this.onRemoveLayer({ // TODO
+        //   layer: table
+        // })
+      }
+    })
   }
 
   onHideFeed() {
@@ -807,7 +813,7 @@ export class MapComponent implements OnDestroy, AfterViewInit {
     }
   }
 
-  baseToggled(event: ToggleEvent): void {
+  baseToggled(event: ToggleEvent): void {    
     const baseLayers = this.groups['base'].layers
     const previousBaseLayer = baseLayers.find((layer: any) => layer.selected)
     if (previousBaseLayer) {
diff --git a/web-app/src/app/preferences/polling-interval/polling-interval.component.ts b/web-app/src/app/preferences/polling-interval/polling-interval.component.ts
index e499c5825..6fab052f8 100644
--- a/web-app/src/app/preferences/polling-interval/polling-interval.component.ts
+++ b/web-app/src/app/preferences/polling-interval/polling-interval.component.ts
@@ -52,6 +52,6 @@ export class PollingIntervalComponent implements OnInit, OnDestroy  {
   }
 
   public compareOption = function (option, value): boolean {
-    return option.interval === value.interval
+    return option?.interval === value?.interval
   }
 }
\ No newline at end of file