diff --git a/src/app/lib/map/map.service.ts b/src/app/lib/map/map.service.ts
index c0503bc06..23bc025b5 100644
--- a/src/app/lib/map/map.service.ts
+++ b/src/app/lib/map/map.service.ts
@@ -323,52 +323,52 @@ export class MapService {
   }
 
   private hookEvents(events: MapEvent) {
-    this.mapInstance.on('load', () => events.load.emit());
-    this.mapInstance.on('resize', () => events.resize.emit());
-    this.mapInstance.on('remove', () => events.remove.emit());
-    this.mapInstance.on('mousedown', (evt: MapboxGl.MapMouseEvent) => events.mouseDown.emit(evt));
-    this.mapInstance.on('mouseup', (evt: MapboxGl.MapMouseEvent) => events.mouseUp.emit(evt));
-    this.mapInstance.on('mousemove', (evt: MapboxGl.MapMouseEvent) => events.mouseMove.emit(evt));
-    this.mapInstance.on('click', (evt: MapboxGl.MapMouseEvent) => events.click.emit(evt));
-    this.mapInstance.on('dblclick', (evt: MapboxGl.MapMouseEvent) => events.dblClick.emit(evt));
-    this.mapInstance.on('mouseenter', (evt: MapboxGl.MapMouseEvent) => events.mouseEnter.emit(evt));
-    this.mapInstance.on('mouseleave', (evt: MapboxGl.MapMouseEvent) => events.mouseLeave.emit(evt));
-    this.mapInstance.on('mouseover', (evt: MapboxGl.MapMouseEvent) => events.mouseOver.emit(evt));
-    this.mapInstance.on('mouseout', (evt: MapboxGl.MapMouseEvent) => events.mouseOut.emit(evt));
-    this.mapInstance.on('contextmenu', (evt: MapboxGl.MapMouseEvent) => events.contextMenu.emit(evt));
-    this.mapInstance.on('touchstart', (evt: MapboxGl.MapTouchEvent) => events.touchStart.emit(evt));
-    this.mapInstance.on('touchend', (evt: MapboxGl.MapTouchEvent) => events.touchEnd.emit(evt));
-    this.mapInstance.on('touchmove', (evt: MapboxGl.MapTouchEvent) => events.touchMove.emit(evt));
-    this.mapInstance.on('touchcancel', (evt: MapboxGl.MapTouchEvent) => events.touchCancel.emit(evt));
-    this.mapInstance.on('movestart', (evt: DragEvent) => events.moveStart.emit(evt));
-    this.mapInstance.on('move', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => events.move.emit(evt));
-    this.mapInstance.on('moveend', (evt: DragEvent) => events.moveEnd.emit(evt));
-    this.mapInstance.on('dragstart', (evt: DragEvent) => events.dragStart.emit(evt));
-    this.mapInstance.on('drag', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => events.drag.emit(evt));
-    this.mapInstance.on('dragend', (evt: DragEvent) => events.dragEnd.emit(evt));
-    this.mapInstance.on('zoomstart', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => events.zoomStart.emit(evt));
-    this.mapInstance.on('zoom', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => events.zoomChange.emit(evt));
-    this.mapInstance.on('zoomend', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => events.zoomEnd.emit(evt));
-    this.mapInstance.on('rotatestart', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => events.rotateStart.emit(evt));
-    this.mapInstance.on('rotate', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => events.rotate.emit(evt));
-    this.mapInstance.on('rotateend', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => events.rotateEnd.emit(evt));
-    this.mapInstance.on('pitchstart', (evt: MapboxGl.EventData) => events.pitchStart.emit(evt));
-    this.mapInstance.on('pitch', (evt: MapboxGl.EventData) => events.pitchChange.emit(evt));
-    this.mapInstance.on('pitchend', (evt: MapboxGl.EventData) => events.pitchEnd.emit(evt));
-    this.mapInstance.on('boxzoomstart', (evt: MapboxGl.MapBoxZoomEvent) => events.boxZoomStart.emit(evt));
-    this.mapInstance.on('boxzoomend', (evt: MapboxGl.MapBoxZoomEvent) => events.boxZoomEnd.emit(evt));
-    this.mapInstance.on('boxzoomcancel', (evt: MapboxGl.MapBoxZoomEvent) => events.boxZoomCancel.emit(evt));
-    this.mapInstance.on('webglcontextlost', () => events.webGlContextLost.emit());
-    this.mapInstance.on('webglcontextrestored', () => events.webGlContextRestored.emit());
-    this.mapInstance.on('load', () => events.load.emit());
-    this.mapInstance.on('render', () => events.render.emit());
-    this.mapInstance.on('error', () => events.error.emit());
-    this.mapInstance.on('data', (evt: MapboxGl.EventData) => events.data.emit(evt));
-    this.mapInstance.on('styledata', (evt: MapboxGl.EventData) => events.styleData.emit(evt));
-    this.mapInstance.on('sourcedata', (evt: MapboxGl.EventData) => events.sourceData.emit(evt));
-    this.mapInstance.on('dataloading', (evt: MapboxGl.EventData) => events.dataLoading.emit(evt));
-    this.mapInstance.on('styledataloading', (evt: MapboxGl.EventData) => events.styleDataLoading.emit(evt));
-    this.mapInstance.on('sourcedataloading', (evt: MapboxGl.EventData) => events.sourceDataLoading.emit(evt));
+    this.mapInstance.on('load', () => this.zone.run(() => events.load.emit()));
+    this.mapInstance.on('resize', () => this.zone.run(() => events.resize.emit()));
+    this.mapInstance.on('remove', () => this.zone.run(() => events.remove.emit()));
+    this.mapInstance.on('mousedown', (evt: MapboxGl.MapMouseEvent) => this.zone.run(() => events.mouseDown.emit(evt)));
+    this.mapInstance.on('mouseup', (evt: MapboxGl.MapMouseEvent) => this.zone.run(() => events.mouseUp.emit(evt)));
+    this.mapInstance.on('mousemove', (evt: MapboxGl.MapMouseEvent) => this.zone.run(() => events.mouseMove.emit(evt)));
+    this.mapInstance.on('click', (evt: MapboxGl.MapMouseEvent) => this.zone.run(() => events.click.emit(evt)));
+    this.mapInstance.on('dblclick', (evt: MapboxGl.MapMouseEvent) => this.zone.run(() => events.dblClick.emit(evt)));
+    this.mapInstance.on('mouseenter', (evt: MapboxGl.MapMouseEvent) => this.zone.run(() => events.mouseEnter.emit(evt)));
+    this.mapInstance.on('mouseleave', (evt: MapboxGl.MapMouseEvent) => this.zone.run(() => events.mouseLeave.emit(evt)));
+    this.mapInstance.on('mouseover', (evt: MapboxGl.MapMouseEvent) => this.zone.run(() => events.mouseOver.emit(evt)));
+    this.mapInstance.on('mouseout', (evt: MapboxGl.MapMouseEvent) => this.zone.run(() => events.mouseOut.emit(evt)));
+    this.mapInstance.on('contextmenu', (evt: MapboxGl.MapMouseEvent) => this.zone.run(() => events.contextMenu.emit(evt)));
+    this.mapInstance.on('touchstart', (evt: MapboxGl.MapTouchEvent) => this.zone.run(() => events.touchStart.emit(evt)));
+    this.mapInstance.on('touchend', (evt: MapboxGl.MapTouchEvent) => this.zone.run(() => events.touchEnd.emit(evt)));
+    this.mapInstance.on('touchmove', (evt: MapboxGl.MapTouchEvent) => this.zone.run(() => events.touchMove.emit(evt)));
+    this.mapInstance.on('touchcancel', (evt: MapboxGl.MapTouchEvent) => this.zone.run(() => events.touchCancel.emit(evt)));
+    this.mapInstance.on('movestart', (evt: DragEvent) => this.zone.run(() => events.moveStart.emit(evt)));
+    this.mapInstance.on('move', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => this.zone.run(() => events.move.emit(evt)));
+    this.mapInstance.on('moveend', (evt: DragEvent) => this.zone.run(() => events.moveEnd.emit(evt)));
+    this.mapInstance.on('dragstart', (evt: DragEvent) => this.zone.run(() => events.dragStart.emit(evt)));
+    this.mapInstance.on('drag', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => this.zone.run(() => events.drag.emit(evt)));
+    this.mapInstance.on('dragend', (evt: DragEvent) => this.zone.run(() => events.dragEnd.emit(evt)));
+    this.mapInstance.on('zoomstart', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => this.zone.run(() => events.zoomStart.emit(evt)));
+    this.mapInstance.on('zoom', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => this.zone.run(() => events.zoomChange.emit(evt)));
+    this.mapInstance.on('zoomend', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => this.zone.run(() => events.zoomEnd.emit(evt)));
+    this.mapInstance.on('rotatestart', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => this.zone.run(() => events.rotateStart.emit(evt)));
+    this.mapInstance.on('rotate', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => this.zone.run(() => events.rotate.emit(evt)));
+    this.mapInstance.on('rotateend', (evt: MapboxGl.MapTouchEvent | MapboxGl.MapMouseEvent) => this.zone.run(() => events.rotateEnd.emit(evt)));
+    this.mapInstance.on('pitchstart', (evt: MapboxGl.EventData) => this.zone.run(() => events.pitchStart.emit(evt)));
+    this.mapInstance.on('pitch', (evt: MapboxGl.EventData) => this.zone.run(() => events.pitchChange.emit(evt)));
+    this.mapInstance.on('pitchend', (evt: MapboxGl.EventData) => this.zone.run(() => events.pitchEnd.emit(evt)));
+    this.mapInstance.on('boxzoomstart', (evt: MapboxGl.MapBoxZoomEvent) => this.zone.run(() => events.boxZoomStart.emit(evt)));
+    this.mapInstance.on('boxzoomend', (evt: MapboxGl.MapBoxZoomEvent) => this.zone.run(() => events.boxZoomEnd.emit(evt)));
+    this.mapInstance.on('boxzoomcancel', (evt: MapboxGl.MapBoxZoomEvent) => this.zone.run(() => events.boxZoomCancel.emit(evt)));
+    this.mapInstance.on('webglcontextlost', () => this.zone.run(() => events.webGlContextLost.emit()));
+    this.mapInstance.on('webglcontextrestored', () => this.zone.run(() => events.webGlContextRestored.emit()));
+    this.mapInstance.on('load', () => this.zone.run(() => events.load.emit()));
+    this.mapInstance.on('render', () => this.zone.run(() => events.render.emit()));
+    this.mapInstance.on('error', () => this.zone.run(() => events.error.emit()));
+    this.mapInstance.on('data', (evt: MapboxGl.EventData) => this.zone.run(() => events.data.emit(evt)));
+    this.mapInstance.on('styledata', (evt: MapboxGl.EventData) => this.zone.run(() => events.styleData.emit(evt)));
+    this.mapInstance.on('sourcedata', (evt: MapboxGl.EventData) => this.zone.run(() => events.sourceData.emit(evt)));
+    this.mapInstance.on('dataloading', (evt: MapboxGl.EventData) => this.zone.run(() => events.dataLoading.emit(evt)));
+    this.mapInstance.on('styledataloading', (evt: MapboxGl.EventData) => this.zone.run(() => events.styleDataLoading.emit(evt)));
+    this.mapInstance.on('sourcedataloading', (evt: MapboxGl.EventData) => this.zone.run(() => events.sourceDataLoading.emit(evt)));
   }
 
   // TODO move this elsewhere