diff --git a/angular.json b/angular.json
index 3b3b68911..5c3f52e4d 100644
--- a/angular.json
+++ b/angular.json
@@ -159,5 +159,8 @@
       }
     }
   },
-  "defaultProject": "ngx-mapbox-gl"
+  "defaultProject": "ngx-mapbox-gl",
+  "cli": {
+    "analytics": "2b945751-c795-4db1-b8ac-172907057b11"
+  }
 }
diff --git a/projects/ngx-mapbox-gl/src/lib/control/geocoder-control.directive.ts b/projects/ngx-mapbox-gl/src/lib/control/geocoder-control.directive.ts
index 62bbed1fd..6a982e21c 100755
--- a/projects/ngx-mapbox-gl/src/lib/control/geocoder-control.directive.ts
+++ b/projects/ngx-mapbox-gl/src/lib/control/geocoder-control.directive.ts
@@ -12,13 +12,13 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
+// @ts-ignore
+import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import { MapService } from '../map/map.service';
 import { GeocoderEvent } from '../map/map.types';
+import { deprecationWarning } from '../utils';
 import { ControlComponent } from './control.component';
 
-// @ts-ignore
-import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
-
 export const MAPBOX_GEOCODER_API_KEY = new InjectionToken('MapboxApiKey');
 
 export interface LngLatLiteral {
@@ -66,8 +66,23 @@ export class GeocoderControlDirective implements AfterContentInit, OnChanges, Ge
 
   @Output() clear = new EventEmitter<void>();
   @Output() loading = new EventEmitter<{ query: string }>();
+
+  @Output() geocoderResults = new EventEmitter<Results>();
+
+  @Output() geocoderResult = new EventEmitter<{ result: Result }>();
+
+  @Output() geocoderError = new EventEmitter<any>();
+  /**
+   * @deprecated Use geocoderResults instead
+   */
   @Output() results = new EventEmitter<Results>();
+  /**
+   * @deprecated Use geocoderResult instead
+   */
   @Output() result = new EventEmitter<{ result: Result }>();
+  /**
+   * @deprecated Use geocoderError instead
+   */
   @Output() error = new EventEmitter<any>();
 
   geocoder: any;
@@ -137,20 +152,34 @@ export class GeocoderControlDirective implements AfterContentInit, OnChanges, Ge
   }
 
   private hookEvents(events: GeocoderEvent) {
-    if (events.results.observers.length) {
-      this.geocoder.on('results', (evt: Results) => this.zone.run(() => events.results.emit(evt)));
+    this.warnDeprecatedOutputs(events);
+    if (events.results.observers.length || events.geocoderResults.observers.length) {
+      this.geocoder.on('results', (evt: Results) =>
+        this.zone.run(() => {
+          events.geocoderResults.emit(evt);
+          events.results.emit(evt);
+        })
+      );
     }
     if (events.result.observers.length) {
       this.geocoder.on('result', (evt: { result: Result }) => {
         // Workaroud issue https://github.com/mapbox/mapbox-gl-geocoder/issues/99
         if (this.lastResultId !== evt.result.id) {
           this.lastResultId = evt.result.id;
-          this.zone.run(() => events.result.emit(evt));
+          this.zone.run(() => {
+            events.geocoderResult.emit(evt);
+            events.result.emit(evt);
+          });
         }
       });
     }
-    if (events.error.observers.length) {
-      this.geocoder.on('error', (evt: any) => this.zone.run(() => events.error.emit(evt)));
+    if (events.error.observers.length || events.geocoderError.observers.length) {
+      this.geocoder.on('error', (evt: any) =>
+        this.zone.run(() => {
+          events.geocoderError.emit(evt);
+          events.error.emit(evt);
+        })
+      );
     }
     if (events.loading.observers.length) {
       this.geocoder.on('loading', (evt: { query: string }) => this.zone.run(() => events.loading.emit(evt)));
@@ -159,4 +188,17 @@ export class GeocoderControlDirective implements AfterContentInit, OnChanges, Ge
       this.geocoder.on('clear', () => this.zone.run(() => events.clear.emit()));
     }
   }
+
+  private warnDeprecatedOutputs(events: GeocoderEvent) {
+    const dw = deprecationWarning.bind(undefined, GeocoderControlDirective.name);
+    if (events.results.observers.length) {
+      dw('results', 'geocoderResults');
+    }
+    if (events.result.observers.length) {
+      dw('result', 'geocoderResult');
+    }
+    if (events.error.observers.length) {
+      dw('error', 'geocoderError');
+    }
+  }
 }
diff --git a/projects/ngx-mapbox-gl/src/lib/draggable/draggable.directive.ts b/projects/ngx-mapbox-gl/src/lib/draggable/draggable.directive.ts
index eb30c03f6..a90b91e97 100644
--- a/projects/ngx-mapbox-gl/src/lib/draggable/draggable.directive.ts
+++ b/projects/ngx-mapbox-gl/src/lib/draggable/draggable.directive.ts
@@ -6,6 +6,7 @@ import { LayerComponent } from '../layer/layer.component';
 import { MapService } from '../map/map.service';
 import { MarkerComponent } from '../marker/marker.component';
 import { FeatureComponent } from '../source/geojson/feature.component';
+import { deprecationWarning } from '../utils';
 
 @Directive({
   selector: '[mglDraggable]',
@@ -14,8 +15,20 @@ export class DraggableDirective implements OnInit, OnDestroy {
   // tslint:disable-next-line:no-input-rename
   @Input('mglDraggable') layer?: LayerComponent;
 
+  @Output() featureDragStart = new EventEmitter<MapMouseEvent>();
+  @Output() featureDragEnd = new EventEmitter<MapMouseEvent>();
+  @Output() featureDrag = new EventEmitter<MapMouseEvent>();
+  /**
+   * @deprecated Use featureDragStart instead
+   */
   @Output() dragStart = new EventEmitter<MapMouseEvent>();
+  /**
+   * @deprecated Use featureDragEnd instead
+   */
   @Output() dragEnd = new EventEmitter<MapMouseEvent>();
+  /**
+   * @deprecated Use featureDrag instead
+   */
   @Output() drag = new EventEmitter<MapMouseEvent>();
 
   private destroyed$: ReplaySubject<void> = new ReplaySubject(1);
@@ -28,6 +41,7 @@ export class DraggableDirective implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
+    this.warnDeprecatedOutputs();
     let enter$;
     let leave$;
     let updateCoords;
@@ -83,20 +97,29 @@ export class DraggableDirective implements OnInit, OnDestroy {
       const dragEnd$ = dragStart$.pipe(switchMap(() => mouseUp$.pipe(take(1))));
       dragStart$.subscribe((evt) => {
         moving = true;
-        if (this.dragStart.observers.length) {
-          this.NgZone.run(() => this.dragStart.emit(evt));
+        if (this.featureDragStart.observers.length || this.dragStart.observers.length) {
+          this.NgZone.run(() => {
+            this.featureDragStart.emit(evt);
+            this.dragStart.emit(evt);
+          });
         }
       });
       dragging$.subscribe((evt) => {
         updateCoords([evt.lngLat.lng, evt.lngLat.lat]);
-        if (this.drag.observers.length) {
-          this.NgZone.run(() => this.drag.emit(evt));
+        if (this.featureDrag.observers.length || this.drag.observers.length) {
+          this.NgZone.run(() => {
+            this.featureDrag.emit(evt);
+            this.drag.emit(evt);
+          });
         }
       });
       dragEnd$.subscribe((evt) => {
         moving = false;
-        if (this.dragEnd.observers.length) {
-          this.NgZone.run(() => this.dragEnd.emit(evt));
+        if (this.featureDragEnd.observers.length || this.dragEnd.observers.length) {
+          this.NgZone.run(() => {
+            this.featureDragEnd.emit(evt);
+            this.dragEnd.emit(evt);
+          });
         }
         if (!inside) {
           // It's possible to dragEnd outside the target (small input lag)
@@ -129,4 +152,17 @@ export class DraggableDirective implements OnInit, OnDestroy {
     }
     return true;
   }
+
+  private warnDeprecatedOutputs() {
+    const dw = deprecationWarning.bind(undefined, DraggableDirective.name);
+    if (this.dragStart.observers.length) {
+      dw('dragStart', 'featureDragStart');
+    }
+    if (this.dragEnd.observers.length) {
+      dw('dragEnd', 'featureDragEnd');
+    }
+    if (this.drag.observers.length) {
+      dw('drag', 'featureDrag');
+    }
+  }
 }
diff --git a/projects/ngx-mapbox-gl/src/lib/image/image.component.ts b/projects/ngx-mapbox-gl/src/lib/image/image.component.ts
index f8a7d1c46..dfa6ec924 100644
--- a/projects/ngx-mapbox-gl/src/lib/image/image.component.ts
+++ b/projects/ngx-mapbox-gl/src/lib/image/image.component.ts
@@ -13,6 +13,7 @@ import { fromEvent, Subscription } from 'rxjs';
 import { filter, startWith, switchMap } from 'rxjs/operators';
 import { MapService } from '../map/map.service';
 import { MapImageData, MapImageOptions } from '../map/map.types';
+import { deprecationWarning } from '../utils';
 
 @Component({
   selector: 'mgl-image',
@@ -27,7 +28,15 @@ export class ImageComponent implements OnInit, OnDestroy, OnChanges {
   @Input() options?: MapImageOptions;
   @Input() url?: string;
 
+  @Output() imageError = new EventEmitter<{ status: number }>();
+  @Output() imageLoaded = new EventEmitter<void>();
+  /**
+   * @deprecated Use imageError instead
+   */
   @Output() error = new EventEmitter<{ status: number }>();
+  /**
+   * @deprecated Use imageLoaded instead
+   */
   @Output() loaded = new EventEmitter<void>();
 
   private isAdded = false;
@@ -37,6 +46,7 @@ export class ImageComponent implements OnInit, OnDestroy, OnChanges {
   constructor(private MapService: MapService, private zone: NgZone) {}
 
   ngOnInit() {
+    this.warnDeprecatedOutputs();
     this.sub = this.MapService.mapLoaded$
       .pipe(
         switchMap(() =>
@@ -81,13 +91,25 @@ export class ImageComponent implements OnInit, OnDestroy, OnChanges {
         this.isAdded = true;
         this.isAdding = false;
         this.zone.run(() => {
+          this.imageLoaded.emit();
           this.loaded.emit();
         });
       } catch (error) {
         this.zone.run(() => {
+          this.imageError.emit(error);
           this.error.emit(error);
         });
       }
     }
   }
+
+  private warnDeprecatedOutputs() {
+    const dw = deprecationWarning.bind(undefined, ImageComponent.name);
+    if (this.error.observers.length) {
+      dw('error', 'imageError');
+    }
+    if (this.loaded.observers.length) {
+      dw('loaded', 'imageLoaded');
+    }
+  }
 }
diff --git a/projects/ngx-mapbox-gl/src/lib/layer/layer.component.ts b/projects/ngx-mapbox-gl/src/lib/layer/layer.component.ts
index 596623648..2c1d541a0 100644
--- a/projects/ngx-mapbox-gl/src/lib/layer/layer.component.ts
+++ b/projects/ngx-mapbox-gl/src/lib/layer/layer.component.ts
@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
 import { EventData, Layer, MapLayerMouseEvent, MapLayerTouchEvent } from 'mapbox-gl';
 import { fromEvent, Subscription } from 'rxjs';
-import { filter, mapTo, switchMap, startWith } from 'rxjs/operators';
+import { filter, mapTo, startWith, switchMap } from 'rxjs/operators';
 import { MapService, SetupLayer } from '../map/map.service';
 import { LayerEvents } from '../map/map.types';
+import { deprecationWarning } from '../utils';
 
 @Component({
   selector: 'mgl-layer',
@@ -25,18 +26,70 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer, Laye
   @Input() minzoom?: Layer['minzoom'];
   @Input() maxzoom?: Layer['maxzoom'];
 
+  @Output() layerClick = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerDblClick = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerMouseDown = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerMouseUp = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerMouseEnter = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerMouseLeave = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerMouseMove = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerMouseOver = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerMouseOut = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerContextMenu = new EventEmitter<MapLayerMouseEvent & EventData>();
+  @Output() layerTouchStart = new EventEmitter<MapLayerTouchEvent & EventData>();
+  @Output() layerTouchEnd = new EventEmitter<MapLayerTouchEvent & EventData>();
+  @Output() layerTouchCancel = new EventEmitter<MapLayerTouchEvent & EventData>();
+  /**
+   * @deprecated Use layerClick instead
+   */
   @Output() click = new EventEmitter<MapLayerMouseEvent & EventData>();
+  /**
+   * @deprecated Use layerDblClick instead
+   */
   @Output() dblClick = new EventEmitter<MapLayerMouseEvent & EventData>();
+  /**
+   * @deprecated Use layerMouseDown instead
+   */
   @Output() mouseDown = new EventEmitter<MapLayerMouseEvent & EventData>();
+  /**
+   * @deprecated Use layerMouseUp instead
+   */
   @Output() mouseUp = new EventEmitter<MapLayerMouseEvent & EventData>();
+  /**
+   * @deprecated Use layerMouseEnter instead
+   */
   @Output() mouseEnter = new EventEmitter<MapLayerMouseEvent & EventData>();
+  /**
+   * @deprecated Use layerMouseLeave instead
+   */
   @Output() mouseLeave = new EventEmitter<MapLayerMouseEvent & EventData>();
+  /**
+   * @deprecated Use layerMouseMove instead
+   */
   @Output() mouseMove = new EventEmitter<MapLayerMouseEvent & EventData>();
+  /**
+   * @deprecated Use layerMouseOver instead
+   */
   @Output() mouseOver = new EventEmitter<MapLayerMouseEvent & EventData>();
+  /**
+   * @deprecated Use layerMouseOut instead
+   */
   @Output() mouseOut = new EventEmitter<MapLayerMouseEvent & EventData>();
+  /**
+   * @deprecated Use layerContextMenu instead
+   */
   @Output() contextMenu = new EventEmitter<MapLayerMouseEvent & EventData>();
+  /**
+   * @deprecated Use layerTouchStart instead
+   */
   @Output() touchStart = new EventEmitter<MapLayerTouchEvent & EventData>();
+  /**
+   * @deprecated Use layerTouchEnd instead
+   */
   @Output() touchEnd = new EventEmitter<MapLayerTouchEvent & EventData>();
+  /**
+   * @deprecated Use layerTouchCancel instead
+   */
   @Output() touchCancel = new EventEmitter<MapLayerTouchEvent & EventData>();
 
   private layerAdded = false;
@@ -45,6 +98,7 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer, Laye
   constructor(private MapService: MapService) {}
 
   ngOnInit() {
+    this.warnDeprecatedOutputs();
     this.sub = this.MapService.mapLoaded$
       .pipe(
         switchMap(() =>
@@ -106,6 +160,19 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer, Laye
         paint: this.paint,
       },
       layerEvents: {
+        layerClick: this.layerClick,
+        layerDblClick: this.layerDblClick,
+        layerMouseDown: this.layerMouseDown,
+        layerMouseUp: this.layerMouseUp,
+        layerMouseEnter: this.layerMouseEnter,
+        layerMouseLeave: this.layerMouseLeave,
+        layerMouseMove: this.layerMouseMove,
+        layerMouseOver: this.layerMouseOver,
+        layerMouseOut: this.layerMouseOut,
+        layerContextMenu: this.layerContextMenu,
+        layerTouchStart: this.layerTouchStart,
+        layerTouchEnd: this.layerTouchEnd,
+        layerTouchCancel: this.layerTouchCancel,
         click: this.click,
         dblClick: this.dblClick,
         mouseDown: this.mouseDown,
@@ -124,4 +191,47 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer, Laye
     this.MapService.addLayer(layer, bindEvents, this.before);
     this.layerAdded = true;
   }
+
+  private warnDeprecatedOutputs() {
+    const dw = deprecationWarning.bind(undefined, LayerComponent.name);
+    if (this.click.observers.length) {
+      dw('click', 'layerClick');
+    }
+    if (this.dblClick.observers.length) {
+      dw('dblClick', 'layerDblClick');
+    }
+    if (this.mouseDown.observers.length) {
+      dw('mouseDown', 'layerMouseDown');
+    }
+    if (this.mouseUp.observers.length) {
+      dw('mouseUp', 'layerMouseUp');
+    }
+    if (this.mouseEnter.observers.length) {
+      dw('mouseEnter', 'layerMouseEnter');
+    }
+    if (this.mouseLeave.observers.length) {
+      dw('mouseLeave', 'layerMouseLeave');
+    }
+    if (this.mouseMove.observers.length) {
+      dw('mouseMove', 'layerMouseMove');
+    }
+    if (this.mouseOver.observers.length) {
+      dw('mouseOver', 'layerMouseOver');
+    }
+    if (this.mouseOut.observers.length) {
+      dw('mouseOut', 'layerMouseOut');
+    }
+    if (this.contextMenu.observers.length) {
+      dw('contextMenu', 'layerContextMenu');
+    }
+    if (this.touchStart.observers.length) {
+      dw('touchStart', 'layerTouchStart');
+    }
+    if (this.touchEnd.observers.length) {
+      dw('touchEnd', 'layerTouchEnd');
+    }
+    if (this.touchCancel.observers.length) {
+      dw('touchCancel', 'layerTouchCancel');
+    }
+  }
 }
diff --git a/projects/ngx-mapbox-gl/src/lib/map/map.component.ts b/projects/ngx-mapbox-gl/src/lib/map/map.component.ts
index 86a5e10c7..4c30d724d 100644
--- a/projects/ngx-mapbox-gl/src/lib/map/map.component.ts
+++ b/projects/ngx-mapbox-gl/src/lib/map/map.component.ts
@@ -31,6 +31,7 @@ import {
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
+import { deprecationWarning } from '../utils';
 
 @Component({
   selector: 'mgl-map',
@@ -112,27 +113,27 @@ export class MapComponent
   @Input() panToOptions?: AnimationOptions;
   @Input() cursorStyle?: string;
 
-  @Output() resize = new EventEmitter<MapboxEvent & EventData>();
-  @Output() remove = new EventEmitter<MapboxEvent & EventData>();
-  @Output() mouseDown = new EventEmitter<MapMouseEvent & EventData>();
-  @Output() mouseUp = new EventEmitter<MapMouseEvent & EventData>();
-  @Output() mouseMove = new EventEmitter<MapMouseEvent & EventData>();
-  @Output() click = new EventEmitter<MapMouseEvent & EventData>();
-  @Output() dblClick = new EventEmitter<MapMouseEvent & EventData>();
-  @Output() mouseOver = new EventEmitter<MapMouseEvent & EventData>();
-  @Output() mouseOut = new EventEmitter<MapMouseEvent & EventData>();
-  @Output() contextMenu = new EventEmitter<MapMouseEvent & EventData>();
-  @Output() touchStart = new EventEmitter<MapTouchEvent & EventData>();
-  @Output() touchEnd = new EventEmitter<MapTouchEvent & EventData>();
-  @Output() touchMove = new EventEmitter<MapTouchEvent & EventData>();
-  @Output() touchCancel = new EventEmitter<MapTouchEvent & EventData>();
-  @Output() wheel = new EventEmitter<MapWheelEvent & EventData>();
+  @Output() mapResize = new EventEmitter<MapboxEvent & EventData>();
+  @Output() mapRemove = new EventEmitter<MapboxEvent & EventData>();
+  @Output() mapMouseDown = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() mapMouseUp = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() mapMouseMove = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() mapClick = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() mapDblClick = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() mapMouseOver = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() mapMouseOut = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() mapContextMenu = new EventEmitter<MapMouseEvent & EventData>();
+  @Output() mapTouchStart = new EventEmitter<MapTouchEvent & EventData>();
+  @Output() mapTouchEnd = new EventEmitter<MapTouchEvent & EventData>();
+  @Output() mapTouchMove = new EventEmitter<MapTouchEvent & EventData>();
+  @Output() mapTouchCancel = new EventEmitter<MapTouchEvent & EventData>();
+  @Output() mapWheel = new EventEmitter<MapWheelEvent & EventData>();
   @Output() moveStart = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>();
   @Output() move = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>();
   @Output() moveEnd = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>();
-  @Output() dragStart = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>();
-  @Output() drag = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>();
-  @Output() dragEnd = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>();
+  @Output() mapDragStart = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>();
+  @Output() mapDrag = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>();
+  @Output() mapDragEnd = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>();
   @Output() zoomStart = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>();
   @Output() zoomEvt = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>();
   @Output() zoomEnd = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>();
@@ -147,10 +148,10 @@ export class MapComponent
   @Output() boxZoomCancel = new EventEmitter<MapBoxZoomEvent & EventData>();
   @Output() webGlContextLost = new EventEmitter<MapContextEvent & EventData>();
   @Output() webGlContextRestored = new EventEmitter<MapContextEvent & EventData>();
-  @Output() load = new EventEmitter<Map>();
+  @Output() mapLoad = new EventEmitter<Map>();
   @Output() idle = new EventEmitter<MapboxEvent & EventData>();
   @Output() render = new EventEmitter<MapboxEvent & EventData>();
-  @Output() error = new EventEmitter<ErrorEvent & EventData>();
+  @Output() mapError = new EventEmitter<ErrorEvent & EventData>();
   @Output() data = new EventEmitter<MapDataEvent & EventData>();
   @Output() styleData = new EventEmitter<MapStyleDataEvent & EventData>();
   @Output() sourceData = new EventEmitter<MapSourceDataEvent & EventData>();
@@ -159,6 +160,87 @@ export class MapComponent
   @Output() sourceDataLoading = new EventEmitter<MapSourceDataEvent & EventData>();
   @Output() styleImageMissing = new EventEmitter<{ id: string } & EventData>();
 
+  /**
+   * @deprecated Use mapResize instead
+   */
+  @Output() resize = new EventEmitter<MapboxEvent & EventData>();
+  /**
+   * @deprecated Use mapRemove instead
+   */
+  @Output() remove = new EventEmitter<MapboxEvent & EventData>();
+  /**
+   * @deprecated Use mapMouseDown instead
+   */
+  @Output() mouseDown = new EventEmitter<MapMouseEvent & EventData>();
+  /**
+   * @deprecated Use mapMouseUp instead
+   */
+  @Output() mouseUp = new EventEmitter<MapMouseEvent & EventData>();
+  /**
+   * @deprecated Use mapMouseMove instead
+   */
+  @Output() mouseMove = new EventEmitter<MapMouseEvent & EventData>();
+  /**
+   * @deprecated Use mapClick instead
+   */
+  @Output() click = new EventEmitter<MapMouseEvent & EventData>();
+  /**
+   * @deprecated Use mapDblClick instead
+   */
+  @Output() dblClick = new EventEmitter<MapMouseEvent & EventData>();
+  /**
+   * @deprecated Use mapMouseOver instead
+   */
+  @Output() mouseOver = new EventEmitter<MapMouseEvent & EventData>();
+  /**
+   * @deprecated Use mapMouseOut instead
+   */
+  @Output() mouseOut = new EventEmitter<MapMouseEvent & EventData>();
+  /**
+   * @deprecated Use mapContextMenu instead
+   */
+  @Output() contextMenu = new EventEmitter<MapMouseEvent & EventData>();
+  /**
+   * @deprecated Use mapTouchStart instead
+   */
+  @Output() touchStart = new EventEmitter<MapTouchEvent & EventData>();
+  /**
+   * @deprecated Use mapTouchEnd instead
+   */
+  @Output() touchEnd = new EventEmitter<MapTouchEvent & EventData>();
+  /**
+   * @deprecated Use mapTouchMove instead
+   */
+  @Output() touchMove = new EventEmitter<MapTouchEvent & EventData>();
+  /**
+   * @deprecated Use mapTouchCancel instead
+   */
+  @Output() touchCancel = new EventEmitter<MapTouchEvent & EventData>();
+  /**
+   * @deprecated Use mapWheel instead
+   */
+  @Output() wheel = new EventEmitter<MapWheelEvent & EventData>();
+  /**
+   * @deprecated Use mapDragStart instead
+   */
+  @Output() dragStart = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>();
+  /**
+   * @deprecated Use mapDrag instead
+   */
+  @Output() drag = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>();
+  /**
+   * @deprecated Use mapDragEnd instead
+   */
+  @Output() dragEnd = new EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>();
+  /**
+   * @deprecated Use mapLoad instead
+   */
+  @Output() load = new EventEmitter<Map>();
+  /**
+   * @deprecated Use mapError instead
+   */
+  @Output() error = new EventEmitter<ErrorEvent & EventData>();
+
   get mapInstance(): Map {
     return this.MapService.mapInstance;
   }
@@ -168,6 +250,7 @@ export class MapComponent
   constructor(private MapService: MapService) {}
 
   ngAfterViewInit() {
+    this.warnDeprecatedOutputs();
     this.MapService.setup({
       accessToken: this.accessToken,
       customMapboxApiUrl: this.customMapboxApiUrl,
@@ -315,4 +398,68 @@ export class MapComponent
       );
     }
   }
+
+  private warnDeprecatedOutputs() {
+    const dw = deprecationWarning.bind(undefined, MapComponent.name);
+    if (this.resize.observers.length) {
+      dw('resize', 'mapResize');
+    }
+    if (this.remove.observers.length) {
+      dw('remove', 'mapRemove');
+    }
+    if (this.mouseDown.observers.length) {
+      dw('mouseDown', 'mapMouseDown');
+    }
+    if (this.mouseUp.observers.length) {
+      dw('mouseUp', 'mapMouseUp');
+    }
+    if (this.mouseMove.observers.length) {
+      dw('mouseMove', 'mapMouseMove');
+    }
+    if (this.click.observers.length) {
+      dw('click', 'mapClick');
+    }
+    if (this.dblClick.observers.length) {
+      dw('dblClick', 'mapDblClick');
+    }
+    if (this.mouseOver.observers.length) {
+      dw('mouseOver', 'mapMouseOver');
+    }
+    if (this.mouseOut.observers.length) {
+      dw('mouseOut', 'mapMouseOut');
+    }
+    if (this.contextMenu.observers.length) {
+      dw('contextMenu', 'mapContextMenu');
+    }
+    if (this.touchStart.observers.length) {
+      dw('touchStart', 'mapTouchStart');
+    }
+    if (this.touchEnd.observers.length) {
+      dw('touchEnd', 'mapTouchEnd');
+    }
+    if (this.touchMove.observers.length) {
+      dw('touchMove', 'mapTouchMove');
+    }
+    if (this.touchCancel.observers.length) {
+      dw('touchCancel', 'mapTouchCancel');
+    }
+    if (this.wheel.observers.length) {
+      dw('wheel', 'mapWheel');
+    }
+    if (this.dragStart.observers.length) {
+      dw('dragStart', 'mapDragStart');
+    }
+    if (this.drag.observers.length) {
+      dw('drag', 'mapDrag');
+    }
+    if (this.dragEnd.observers.length) {
+      dw('dragEnd', 'mapDragEnd');
+    }
+    if (this.load.observers.length) {
+      dw('load', 'mapLoad');
+    }
+    if (this.error.observers.length) {
+      dw('error', 'mapError');
+    }
+  }
 }
diff --git a/projects/ngx-mapbox-gl/src/lib/map/map.service.ts b/projects/ngx-mapbox-gl/src/lib/map/map.service.ts
index 69379034d..0c9bbdedb 100644
--- a/projects/ngx-mapbox-gl/src/lib/map/map.service.ts
+++ b/projects/ngx-mapbox-gl/src/lib/map/map.service.ts
@@ -32,6 +32,8 @@ export interface SetupPopup {
   popupEvents: {
     open: EventEmitter<void>;
     close: EventEmitter<void>;
+    popupOpen: EventEmitter<void>;
+    popupClose: EventEmitter<void>;
   };
 }
 
@@ -47,6 +49,9 @@ export interface SetupMarker {
     lngLat?: MapboxGl.LngLatLike;
   };
   markersEvents: {
+    markerDragStart: EventEmitter<MapboxGl.Marker>;
+    markerDrag: EventEmitter<MapboxGl.Marker>;
+    markerDragEnd: EventEmitter<MapboxGl.Marker>;
     dragStart: EventEmitter<MapboxGl.Marker>;
     drag: EventEmitter<MapboxGl.Marker>;
     dragEnd: EventEmitter<MapboxGl.Marker>;
@@ -241,93 +246,106 @@ export class MapService {
       });
       this.mapInstance.addLayer(layer.layerOptions, before);
       if (bindEvents) {
-        if (layer.layerEvents.click.observers.length) {
+        if (layer.layerEvents.layerClick.observers.length || layer.layerEvents.click.observers.length) {
           this.mapInstance.on('click', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerClick.emit(evt);
               layer.layerEvents.click.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.dblClick.observers.length) {
+        if (layer.layerEvents.layerDblClick.observers.length || layer.layerEvents.dblClick.observers.length) {
           this.mapInstance.on('dblclick', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerDblClick.emit(evt);
               layer.layerEvents.dblClick.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.mouseDown.observers.length) {
+        if (layer.layerEvents.layerMouseDown.observers.length || layer.layerEvents.mouseDown.observers.length) {
           this.mapInstance.on('mousedown', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerMouseDown.emit(evt);
               layer.layerEvents.mouseDown.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.mouseUp.observers.length) {
+        if (layer.layerEvents.layerMouseUp.observers.length || layer.layerEvents.mouseUp.observers.length) {
           this.mapInstance.on('mouseup', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerMouseUp.emit(evt);
               layer.layerEvents.mouseUp.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.mouseEnter.observers.length) {
+        if (layer.layerEvents.layerMouseEnter.observers.length || layer.layerEvents.mouseEnter.observers.length) {
           this.mapInstance.on('mouseenter', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerMouseEnter.emit(evt);
               layer.layerEvents.mouseEnter.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.mouseLeave.observers.length) {
+        if (layer.layerEvents.layerMouseLeave.observers.length || layer.layerEvents.mouseLeave.observers.length) {
           this.mapInstance.on('mouseleave', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerMouseLeave.emit(evt);
               layer.layerEvents.mouseLeave.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.mouseMove.observers.length) {
+        if (layer.layerEvents.layerMouseMove.observers.length || layer.layerEvents.mouseMove.observers.length) {
           this.mapInstance.on('mousemove', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerMouseMove.emit(evt);
               layer.layerEvents.mouseMove.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.mouseOver.observers.length) {
+        if (layer.layerEvents.layerMouseOver.observers.length || layer.layerEvents.mouseOver.observers.length) {
           this.mapInstance.on('mouseover', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerMouseOver.emit(evt);
               layer.layerEvents.mouseOver.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.mouseOut.observers.length) {
+        if (layer.layerEvents.layerMouseOut.observers.length || layer.layerEvents.mouseOut.observers.length) {
           this.mapInstance.on('mouseout', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerMouseOut.emit(evt);
               layer.layerEvents.mouseOut.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.contextMenu.observers.length) {
+        if (layer.layerEvents.layerContextMenu.observers.length || layer.layerEvents.contextMenu.observers.length) {
           this.mapInstance.on('contextmenu', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerContextMenu.emit(evt);
               layer.layerEvents.contextMenu.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.touchStart.observers.length) {
+        if (layer.layerEvents.layerTouchStart.observers.length || layer.layerEvents.touchStart.observers.length) {
           this.mapInstance.on('touchstart', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerTouchStart.emit(evt);
               layer.layerEvents.touchStart.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.touchEnd.observers.length) {
+        if (layer.layerEvents.layerTouchEnd.observers.length || layer.layerEvents.touchEnd.observers.length) {
           this.mapInstance.on('touchend', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerTouchEnd.emit(evt);
               layer.layerEvents.touchEnd.emit(evt);
             });
           });
         }
-        if (layer.layerEvents.touchCancel.observers.length) {
+        if (layer.layerEvents.layerTouchCancel.observers.length || layer.layerEvents.touchCancel.observers.length) {
           this.mapInstance.on('touchcancel', layer.layerOptions.id, (evt) => {
             this.zone.run(() => {
+              layer.layerEvents.layerTouchCancel.emit(evt);
               layer.layerEvents.touchCancel.emit(evt);
             });
           });
@@ -356,19 +374,28 @@ export class MapService {
       options.element = marker.markersOptions.element;
     }
     const markerInstance = new MapboxGl.Marker(options);
-    if (marker.markersEvents.dragStart.observers.length) {
+    if (marker.markersEvents.markerDragStart.observers.length || marker.markersEvents.dragStart.observers.length) {
       markerInstance.on('dragstart', (event: { target: MapboxGl.Marker }) =>
-        this.zone.run(() => marker.markersEvents.dragStart.emit(event.target))
+        this.zone.run(() => {
+          marker.markersEvents.markerDragStart.emit(event.target);
+          marker.markersEvents.dragStart.emit(event.target);
+        })
       );
     }
-    if (marker.markersEvents.drag.observers.length) {
+    if (marker.markersEvents.markerDrag.observers.length || marker.markersEvents.drag.observers.length) {
       markerInstance.on('drag', (event: { target: MapboxGl.Marker }) =>
-        this.zone.run(() => marker.markersEvents.drag.emit(event.target))
+        this.zone.run(() => {
+          marker.markersEvents.markerDrag.emit(event.target);
+          marker.markersEvents.drag.emit(event.target);
+        })
       );
     }
-    if (marker.markersEvents.dragEnd.observers.length) {
+    if (marker.markersEvents.markerDragEnd.observers.length || marker.markersEvents.dragEnd.observers.length) {
       markerInstance.on('dragend', (event: { target: MapboxGl.Marker }) =>
-        this.zone.run(() => marker.markersEvents.dragEnd.emit(event.target))
+        this.zone.run(() => {
+          marker.markersEvents.markerDragEnd.emit(event.target);
+          marker.markersEvents.dragEnd.emit(event.target);
+        })
       );
     }
     const lngLat: MapboxGl.LngLatLike = marker.markersOptions.feature
@@ -392,16 +419,18 @@ export class MapService {
       );
       const popupInstance = new MapboxGl.Popup(popup.popupOptions);
       popupInstance.setDOMContent(element);
-      if (popup.popupEvents.close.observers.length) {
+      if (popup.popupEvents.popupClose.observers.length || popup.popupEvents.close.observers.length) {
         popupInstance.on('close', () => {
           this.zone.run(() => {
+            popup.popupEvents.popupClose.emit();
             popup.popupEvents.close.emit();
           });
         });
       }
-      if (popup.popupEvents.open.observers.length) {
+      if (popup.popupEvents.popupOpen.observers.length || popup.popupEvents.open.observers.length) {
         popupInstance.on('open', () => {
           this.zone.run(() => {
+            popup.popupEvents.popupOpen.emit();
             popup.popupEvents.open.emit();
           });
         });
@@ -636,52 +665,130 @@ export class MapService {
     this.mapInstance.on('load', (evt) => {
       this.mapLoaded.next(undefined);
       this.mapLoaded.complete();
-      this.zone.run(() => events.load.emit(evt.target));
+      this.zone.run(() => {
+        events.mapLoad.emit(evt.target);
+        events.load.emit(evt.target);
+      });
     });
-    if (events.resize.observers.length) {
-      this.mapInstance.on('resize', (evt) => this.zone.run(() => events.resize.emit(evt)));
+    if (events.mapResize.observers.length || events.resize.observers.length) {
+      this.mapInstance.on('resize', (evt) =>
+        this.zone.run(() => {
+          events.mapResize.emit(evt);
+          events.resize.emit(evt);
+        })
+      );
     }
-    if (events.remove.observers.length) {
-      this.mapInstance.on('remove', (evt) => this.zone.run(() => events.remove.emit(evt)));
+    if (events.mapRemove.observers.length || events.remove.observers.length) {
+      this.mapInstance.on('remove', (evt) =>
+        this.zone.run(() => {
+          events.mapRemove.emit(evt);
+          events.remove.emit(evt);
+        })
+      );
     }
-    if (events.mouseDown.observers.length) {
-      this.mapInstance.on('mousedown', (evt) => this.zone.run(() => events.mouseDown.emit(evt)));
+    if (events.mapMouseDown.observers.length || events.mouseDown.observers.length) {
+      this.mapInstance.on('mousedown', (evt) =>
+        this.zone.run(() => {
+          events.mapMouseDown.emit(evt);
+          events.mouseDown.emit(evt);
+        })
+      );
     }
-    if (events.mouseUp.observers.length) {
-      this.mapInstance.on('mouseup', (evt) => this.zone.run(() => events.mouseUp.emit(evt)));
+    if (events.mapMouseUp.observers.length || events.mouseUp.observers.length) {
+      this.mapInstance.on('mouseup', (evt) =>
+        this.zone.run(() => {
+          events.mapMouseUp.emit(evt);
+          events.mouseUp.emit(evt);
+        })
+      );
     }
-    if (events.mouseMove.observers.length) {
-      this.mapInstance.on('mousemove', (evt) => this.zone.run(() => events.mouseMove.emit(evt)));
+    if (events.mapMouseMove.observers.length || events.mouseMove.observers.length) {
+      this.mapInstance.on('mousemove', (evt) =>
+        this.zone.run(() => {
+          events.mapMouseMove.emit(evt);
+          events.mouseMove.emit(evt);
+        })
+      );
     }
-    if (events.click.observers.length) {
-      this.mapInstance.on('click', (evt) => this.zone.run(() => events.click.emit(evt)));
+    if (events.mapClick.observers.length || events.click.observers.length) {
+      this.mapInstance.on('click', (evt) =>
+        this.zone.run(() => {
+          events.mapClick.emit(evt);
+          events.click.emit(evt);
+        })
+      );
     }
-    if (events.dblClick.observers.length) {
-      this.mapInstance.on('dblclick', (evt) => this.zone.run(() => events.dblClick.emit(evt)));
+    if (events.mapDblClick.observers.length || events.dblClick.observers.length) {
+      this.mapInstance.on('dblclick', (evt) =>
+        this.zone.run(() => {
+          events.mapDblClick.emit(evt);
+          events.dblClick.emit(evt);
+        })
+      );
     }
-    if (events.mouseOver.observers.length) {
-      this.mapInstance.on('mouseover', (evt) => this.zone.run(() => events.mouseOver.emit(evt)));
+    if (events.mapMouseOver.observers.length || events.mouseOver.observers.length) {
+      this.mapInstance.on('mouseover', (evt) =>
+        this.zone.run(() => {
+          events.mapMouseOver.emit(evt);
+          events.mouseOver.emit(evt);
+        })
+      );
     }
-    if (events.mouseOut.observers.length) {
-      this.mapInstance.on('mouseout', (evt) => this.zone.run(() => events.mouseOut.emit(evt)));
+    if (events.mapMouseOut.observers.length || events.mouseOut.observers.length) {
+      this.mapInstance.on('mouseout', (evt) =>
+        this.zone.run(() => {
+          events.mapMouseOut.emit(evt);
+          events.mouseOut.emit(evt);
+        })
+      );
     }
-    if (events.contextMenu.observers.length) {
-      this.mapInstance.on('contextmenu', (evt) => this.zone.run(() => events.contextMenu.emit(evt)));
+    if (events.mapContextMenu.observers.length || events.contextMenu.observers.length) {
+      this.mapInstance.on('contextmenu', (evt) =>
+        this.zone.run(() => {
+          events.mapContextMenu.emit(evt);
+          events.contextMenu.emit(evt);
+        })
+      );
     }
-    if (events.touchStart.observers.length) {
-      this.mapInstance.on('touchstart', (evt) => this.zone.run(() => events.touchStart.emit(evt)));
+    if (events.mapTouchStart.observers.length || events.touchStart.observers.length) {
+      this.mapInstance.on('touchstart', (evt) =>
+        this.zone.run(() => {
+          events.mapTouchStart.emit(evt);
+          events.touchStart.emit(evt);
+        })
+      );
     }
-    if (events.touchEnd.observers.length) {
-      this.mapInstance.on('touchend', (evt) => this.zone.run(() => events.touchEnd.emit(evt)));
+    if (events.mapTouchEnd.observers.length || events.touchEnd.observers.length) {
+      this.mapInstance.on('touchend', (evt) =>
+        this.zone.run(() => {
+          events.mapTouchEnd.emit(evt);
+          events.touchEnd.emit(evt);
+        })
+      );
     }
-    if (events.touchMove.observers.length) {
-      this.mapInstance.on('touchmove', (evt) => this.zone.run(() => events.touchMove.emit(evt)));
+    if (events.mapTouchMove.observers.length || events.touchMove.observers.length) {
+      this.mapInstance.on('touchmove', (evt) =>
+        this.zone.run(() => {
+          events.mapTouchMove.emit(evt);
+          events.touchMove.emit(evt);
+        })
+      );
     }
-    if (events.touchCancel.observers.length) {
-      this.mapInstance.on('touchcancel', (evt) => this.zone.run(() => events.touchCancel.emit(evt)));
+    if (events.mapTouchCancel.observers.length || events.touchCancel.observers.length) {
+      this.mapInstance.on('touchcancel', (evt) =>
+        this.zone.run(() => {
+          events.mapTouchCancel.emit(evt);
+          events.touchCancel.emit(evt);
+        })
+      );
     }
-    if (events.wheel.observers.length) {
-      this.mapInstance.on('wheel', (evt) => this.zone.run(() => events.wheel.emit(evt)));
+    if (events.mapWheel.observers.length || events.wheel.observers.length) {
+      this.mapInstance.on('wheel', (evt) =>
+        this.zone.run(() => {
+          events.mapWheel.emit(evt);
+          events.wheel.emit(evt);
+        })
+      );
     }
     if (events.moveStart.observers.length) {
       this.mapInstance.on('movestart', (evt) => this.zone.run(() => events.moveStart.emit(evt)));
@@ -692,14 +799,29 @@ export class MapService {
     if (events.moveEnd.observers.length) {
       this.mapInstance.on('moveend', (evt) => this.zone.run(() => events.moveEnd.emit(evt)));
     }
-    if (events.dragStart.observers.length) {
-      this.mapInstance.on('dragstart', (evt) => this.zone.run(() => events.dragStart.emit(evt)));
+    if (events.mapDragStart.observers.length || events.dragStart.observers.length) {
+      this.mapInstance.on('dragstart', (evt) =>
+        this.zone.run(() => {
+          events.mapDragStart.emit(evt);
+          events.dragStart.emit(evt);
+        })
+      );
     }
-    if (events.drag.observers.length) {
-      this.mapInstance.on('drag', (evt) => this.zone.run(() => events.drag.emit(evt)));
+    if (events.mapDrag.observers.length || events.drag.observers.length) {
+      this.mapInstance.on('drag', (evt) =>
+        this.zone.run(() => {
+          events.mapDrag.emit(evt);
+          events.drag.emit(evt);
+        })
+      );
     }
-    if (events.dragEnd.observers.length) {
-      this.mapInstance.on('dragend', (evt) => this.zone.run(() => events.dragEnd.emit(evt)));
+    if (events.mapDragEnd.observers.length || events.dragEnd.observers.length) {
+      this.mapInstance.on('dragend', (evt) =>
+        this.zone.run(() => {
+          events.mapDragEnd.emit(evt);
+          events.dragEnd.emit(evt);
+        })
+      );
     }
     if (events.zoomStart.observers.length) {
       this.mapInstance.on('zoomstart', (evt) => this.zone.run(() => events.zoomStart.emit(evt)));
@@ -746,8 +868,13 @@ export class MapService {
     if (events.render.observers.length) {
       this.mapInstance.on('render', (evt) => this.zone.run(() => events.render.emit(evt)));
     }
-    if (events.error.observers.length) {
-      this.mapInstance.on('error', (evt) => this.zone.run(() => events.error.emit(evt)));
+    if (events.mapError.observers.length || events.error.observers.length) {
+      this.mapInstance.on('error', (evt) =>
+        this.zone.run(() => {
+          events.mapError.emit(evt);
+          events.error.emit(evt);
+        })
+      );
     }
     if (events.data.observers.length) {
       this.mapInstance.on('data', (evt) => this.zone.run(() => events.data.emit(evt)));
diff --git a/projects/ngx-mapbox-gl/src/lib/map/map.types.ts b/projects/ngx-mapbox-gl/src/lib/map/map.types.ts
index 24d8997fe..a1696909f 100644
--- a/projects/ngx-mapbox-gl/src/lib/map/map.types.ts
+++ b/projects/ngx-mapbox-gl/src/lib/map/map.types.ts
@@ -19,27 +19,27 @@ import {
 import { Results, Result } from '../control/geocoder-control.directive';
 
 export interface MapEvent {
-  resize: EventEmitter<MapboxEvent & EventData>;
-  remove: EventEmitter<MapboxEvent & EventData>;
-  mouseDown: EventEmitter<MapMouseEvent & EventData>;
-  mouseUp: EventEmitter<MapMouseEvent & EventData>;
-  mouseMove: EventEmitter<MapMouseEvent & EventData>;
-  click: EventEmitter<MapMouseEvent & EventData>;
-  dblClick: EventEmitter<MapMouseEvent & EventData>;
-  mouseOver: EventEmitter<MapMouseEvent & EventData>;
-  mouseOut: EventEmitter<MapMouseEvent & EventData>;
-  contextMenu: EventEmitter<MapMouseEvent & EventData>;
-  touchStart: EventEmitter<MapTouchEvent & EventData>;
-  touchEnd: EventEmitter<MapTouchEvent & EventData>;
-  touchMove: EventEmitter<MapTouchEvent & EventData>;
-  touchCancel: EventEmitter<MapTouchEvent & EventData>;
-  wheel: EventEmitter<MapWheelEvent & EventData>;
+  mapResize: EventEmitter<MapboxEvent & EventData>;
+  mapRemove: EventEmitter<MapboxEvent & EventData>;
+  mapMouseDown: EventEmitter<MapMouseEvent & EventData>;
+  mapMouseUp: EventEmitter<MapMouseEvent & EventData>;
+  mapMouseMove: EventEmitter<MapMouseEvent & EventData>;
+  mapClick: EventEmitter<MapMouseEvent & EventData>;
+  mapDblClick: EventEmitter<MapMouseEvent & EventData>;
+  mapMouseOver: EventEmitter<MapMouseEvent & EventData>;
+  mapMouseOut: EventEmitter<MapMouseEvent & EventData>;
+  mapContextMenu: EventEmitter<MapMouseEvent & EventData>;
+  mapTouchStart: EventEmitter<MapTouchEvent & EventData>;
+  mapTouchEnd: EventEmitter<MapTouchEvent & EventData>;
+  mapTouchMove: EventEmitter<MapTouchEvent & EventData>;
+  mapTouchCancel: EventEmitter<MapTouchEvent & EventData>;
+  mapWheel: EventEmitter<MapWheelEvent & EventData>;
   moveStart: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>;
   move: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>;
   moveEnd: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>;
-  dragStart: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>;
-  drag: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>;
-  dragEnd: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>;
+  mapDragStart: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>;
+  mapDrag: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>;
+  mapDragEnd: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>;
   zoomStart: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>;
   zoomEvt: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>;
   zoomEnd: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & EventData>;
@@ -54,9 +54,9 @@ export interface MapEvent {
   boxZoomCancel: EventEmitter<MapBoxZoomEvent & EventData>;
   webGlContextLost: EventEmitter<MapContextEvent & EventData>;
   webGlContextRestored: EventEmitter<MapContextEvent & EventData>;
-  load: EventEmitter<Map>; // Consider emitting MapboxEvent for consistency (breaking change).
+  mapLoad: EventEmitter<Map>; // Consider emitting MapboxEvent for consistency (breaking change).
   render: EventEmitter<MapboxEvent & EventData>;
-  error: EventEmitter<ErrorEvent & EventData>;
+  mapError: EventEmitter<ErrorEvent & EventData>;
   data: EventEmitter<MapDataEvent & EventData>;
   styleData: EventEmitter<MapStyleDataEvent & EventData>;
   sourceData: EventEmitter<MapSourceDataEvent & EventData>;
@@ -65,9 +65,43 @@ export interface MapEvent {
   sourceDataLoading: EventEmitter<MapSourceDataEvent & EventData>;
   styleImageMissing: EventEmitter<{ id: string } & EventData>;
   idle: EventEmitter<MapboxEvent & EventData>;
+
+  resize: EventEmitter<MapboxEvent & EventData>;
+  remove: EventEmitter<MapboxEvent & EventData>;
+  mouseDown: EventEmitter<MapMouseEvent & EventData>;
+  mouseUp: EventEmitter<MapMouseEvent & EventData>;
+  mouseMove: EventEmitter<MapMouseEvent & EventData>;
+  click: EventEmitter<MapMouseEvent & EventData>;
+  dblClick: EventEmitter<MapMouseEvent & EventData>;
+  mouseOver: EventEmitter<MapMouseEvent & EventData>;
+  mouseOut: EventEmitter<MapMouseEvent & EventData>;
+  contextMenu: EventEmitter<MapMouseEvent & EventData>;
+  touchStart: EventEmitter<MapTouchEvent & EventData>;
+  touchEnd: EventEmitter<MapTouchEvent & EventData>;
+  touchMove: EventEmitter<MapTouchEvent & EventData>;
+  touchCancel: EventEmitter<MapTouchEvent & EventData>;
+  wheel: EventEmitter<MapWheelEvent & EventData>;
+  dragStart: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>;
+  drag: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>;
+  dragEnd: EventEmitter<MapboxEvent<MouseEvent | TouchEvent | undefined> & EventData>;
+  load: EventEmitter<Map>; // Consider emitting MapboxEvent for consistency (breaking change).
+  error: EventEmitter<ErrorEvent & EventData>;
 }
 
 export interface LayerEvents {
+  layerClick: EventEmitter<MapLayerMouseEvent & EventData>;
+  layerDblClick: EventEmitter<MapLayerMouseEvent & EventData>;
+  layerMouseDown: EventEmitter<MapLayerMouseEvent & EventData>;
+  layerMouseUp: EventEmitter<MapLayerMouseEvent & EventData>;
+  layerMouseEnter: EventEmitter<MapLayerMouseEvent & EventData>;
+  layerMouseLeave: EventEmitter<MapLayerMouseEvent & EventData>;
+  layerMouseMove: EventEmitter<MapLayerMouseEvent & EventData>;
+  layerMouseOver: EventEmitter<MapLayerMouseEvent & EventData>;
+  layerMouseOut: EventEmitter<MapLayerMouseEvent & EventData>;
+  layerContextMenu: EventEmitter<MapLayerMouseEvent & EventData>;
+  layerTouchStart: EventEmitter<MapLayerTouchEvent & EventData>;
+  layerTouchEnd: EventEmitter<MapLayerTouchEvent & EventData>;
+  layerTouchCancel: EventEmitter<MapLayerTouchEvent & EventData>;
   click: EventEmitter<MapLayerMouseEvent & EventData>;
   dblClick: EventEmitter<MapLayerMouseEvent & EventData>;
   mouseDown: EventEmitter<MapLayerMouseEvent & EventData>;
@@ -89,6 +123,9 @@ export interface GeocoderEvent {
   results: EventEmitter<Results>;
   result: EventEmitter<{ result: Result }>;
   error: EventEmitter<any>;
+  geocoderResults: EventEmitter<Results>;
+  geocoderResult: EventEmitter<{ result: Result }>;
+  geocoderError: EventEmitter<any>;
 }
 
 export type MapImageData =
diff --git a/projects/ngx-mapbox-gl/src/lib/marker/marker.component.ts b/projects/ngx-mapbox-gl/src/lib/marker/marker.component.ts
index 41e1f8fb9..19ff595fc 100644
--- a/projects/ngx-mapbox-gl/src/lib/marker/marker.component.ts
+++ b/projects/ngx-mapbox-gl/src/lib/marker/marker.component.ts
@@ -15,6 +15,7 @@ import {
 } from '@angular/core';
 import { LngLatLike, Marker, PointLike, Anchor, Alignment } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
+import { deprecationWarning } from '../utils';
 
 @Component({
   selector: 'mgl-marker',
@@ -36,9 +37,21 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
   @Input() pitchAlignment?: Alignment;
   @Input() rotationAlignment?: Alignment;
 
+  @Output() markerDragStart = new EventEmitter<Marker>();
+  @Output() markerDragEnd = new EventEmitter<Marker>();
+  @Output() markerDrag = new EventEmitter<Marker>();
+  /**
+   * @deprecated Use markerDragStart instead
+   */
   @Output() dragStart = new EventEmitter<Marker>();
-  @Output() drag = new EventEmitter<Marker>();
+  /**
+   * @deprecated Use markerDragEnd instead
+   */
   @Output() dragEnd = new EventEmitter<Marker>();
+  /**
+   * @deprecated Use markerDrag instead
+   */
+  @Output() drag = new EventEmitter<Marker>();
 
   @ViewChild('content', { static: true }) content: ElementRef;
 
@@ -47,6 +60,7 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
   constructor(private MapService: MapService) {}
 
   ngOnInit() {
+    this.warnDeprecatedOutputs();
     if (this.feature && this.lngLat) {
       throw new Error('feature and lngLat input are mutually exclusive');
     }
@@ -89,6 +103,9 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
           lngLat: this.lngLat,
         },
         markersEvents: {
+          markerDragStart: this.markerDragStart,
+          markerDrag: this.markerDrag,
+          markerDragEnd: this.markerDragEnd,
           dragStart: this.dragStart,
           drag: this.drag,
           dragEnd: this.dragEnd,
@@ -109,4 +126,17 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
   updateCoordinates(coordinates: number[]) {
     this.markerInstance!.setLngLat(<[number, number]>coordinates);
   }
+
+  private warnDeprecatedOutputs() {
+    const dw = deprecationWarning.bind(undefined, MarkerComponent.name);
+    if (this.dragStart.observers.length) {
+      dw('dragStart', 'markerDragStart');
+    }
+    if (this.dragEnd.observers.length) {
+      dw('dragEnd', 'markerDragEnd');
+    }
+    if (this.drag.observers.length) {
+      dw('drag', 'markerDrag');
+    }
+  }
 }
diff --git a/projects/ngx-mapbox-gl/src/lib/popup/popup.component.ts b/projects/ngx-mapbox-gl/src/lib/popup/popup.component.ts
index 9795b505f..86ff6d3de 100644
--- a/projects/ngx-mapbox-gl/src/lib/popup/popup.component.ts
+++ b/projects/ngx-mapbox-gl/src/lib/popup/popup.component.ts
@@ -15,6 +15,7 @@ import {
 import { PointLike, Popup, LngLatLike } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 import { MarkerComponent } from '../marker/marker.component';
+import { deprecationWarning } from '../utils';
 
 @Component({
   selector: 'mgl-popup',
@@ -35,7 +36,15 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
   @Input() lngLat?: LngLatLike;
   @Input() marker?: MarkerComponent;
 
+  @Output() popupClose = new EventEmitter<void>();
+  @Output() popupOpen = new EventEmitter<void>();
+  /**
+   * @deprecated Use popupClose instead
+   */
   @Output() close = new EventEmitter<void>();
+  /**
+   * @deprecated Use popupOpen instead
+   */
   @Output() open = new EventEmitter<void>();
 
   @ViewChild('content', { static: true }) content: ElementRef;
@@ -45,6 +54,7 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
   constructor(private MapService: MapService) {}
 
   ngOnInit() {
+    this.warnDeprecatedOutputs();
     if ((this.lngLat && this.marker) || (this.feature && this.lngLat) || (this.feature && this.marker)) {
       throw new Error('marker, lngLat, feature input are mutually exclusive');
     }
@@ -99,6 +109,8 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
         popupEvents: {
           open: this.open,
           close: this.close,
+          popupOpen: this.popupOpen,
+          popupClose: this.popupClose,
         },
       },
       this.content.nativeElement
@@ -119,4 +131,14 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
       }
     });
   }
+
+  private warnDeprecatedOutputs() {
+    const dw = deprecationWarning.bind(undefined, PopupComponent.name);
+    if (this.close.observers.length) {
+      dw('close', 'popupClose');
+    }
+    if (this.open.observers.length) {
+      dw('open', 'popupOpen');
+    }
+  }
 }
diff --git a/projects/ngx-mapbox-gl/src/lib/utils.ts b/projects/ngx-mapbox-gl/src/lib/utils.ts
new file mode 100644
index 000000000..4b3fd1a99
--- /dev/null
+++ b/projects/ngx-mapbox-gl/src/lib/utils.ts
@@ -0,0 +1,3 @@
+export function deprecationWarning(context: string, oldApi: string, newApi: string) {
+  console.warn(`[ngx-mapbox-gl]: ${context}: ${oldApi} is deprecated, please use ${newApi} instead.`);
+}
diff --git a/projects/showcase/src/app/demo/examples/3d-buildings.component.ts b/projects/showcase/src/app/demo/examples/3d-buildings.component.ts
index a79bde43a..5928752d7 100644
--- a/projects/showcase/src/app/demo/examples/3d-buildings.component.ts
+++ b/projects/showcase/src/app/demo/examples/3d-buildings.component.ts
@@ -10,7 +10,7 @@ import { Map, SymbolLayout } from 'mapbox-gl';
       [center]="[-74.0066, 40.7135]"
       [pitch]="45"
       [bearing]="-17.6"
-      (load)="onLoad($event)"
+      (mapLoad)="onLoad($event)"
     >
       <mgl-layer
         id="3d-buildings"
diff --git a/projects/showcase/src/app/demo/examples/add-image.component.ts b/projects/showcase/src/app/demo/examples/add-image.component.ts
index 85af4ad0b..7e08d4c8e 100644
--- a/projects/showcase/src/app/demo/examples/add-image.component.ts
+++ b/projects/showcase/src/app/demo/examples/add-image.component.ts
@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
       <mgl-image
         id="cat"
         url="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png"
-        (loaded)="imageLoaded = true"
+        (imageLoaded)="imageLoaded = true"
       >
       </mgl-image>
       <mgl-layer
diff --git a/projects/showcase/src/app/demo/examples/center-on-symbol.component.ts b/projects/showcase/src/app/demo/examples/center-on-symbol.component.ts
index d7a8754a9..18671bf9f 100644
--- a/projects/showcase/src/app/demo/examples/center-on-symbol.component.ts
+++ b/projects/showcase/src/app/demo/examples/center-on-symbol.component.ts
@@ -9,7 +9,7 @@ import { MapMouseEvent, Map } from 'mapbox-gl';
       [zoom]="[8]"
       [center]="center"
       [cursorStyle]="cursorStyle"
-      (load)="map = $event"
+      (mapLoad)="map = $event"
     >
       <mgl-geojson-source id="symbols-source">
         <mgl-feature *ngFor="let geometry of geometries" [geometry]="geometry"></mgl-feature>
@@ -21,9 +21,9 @@ import { MapMouseEvent, Map } from 'mapbox-gl';
         [layout]="{
           'icon-image': 'rocket-15'
         }"
-        (click)="centerMapTo($event)"
-        (mouseEnter)="cursorStyle = 'pointer'"
-        (mouseLeave)="cursorStyle = ''"
+        (layerClick)="centerMapTo($event)"
+        (layerMouseEnter)="cursorStyle = 'pointer'"
+        (layerMouseLeave)="cursorStyle = ''"
       >
       </mgl-layer>
     </mgl-map>
diff --git a/projects/showcase/src/app/demo/examples/drag-a-marker.component.ts b/projects/showcase/src/app/demo/examples/drag-a-marker.component.ts
index 9c04737d0..157a3265e 100644
--- a/projects/showcase/src/app/demo/examples/drag-a-marker.component.ts
+++ b/projects/showcase/src/app/demo/examples/drag-a-marker.component.ts
@@ -1,11 +1,11 @@
-import { Component, NgZone } from '@angular/core';
+import { Component } from '@angular/core';
 import { Marker } from 'mapbox-gl';
 
 @Component({
   selector: 'showcase-demo',
   template: `
     <mgl-map [style]="'mapbox://styles/mapbox/streets-v9'" [zoom]="[2]" [center]="[0, 0]">
-      <mgl-marker [lngLat]="[0, 0]" [draggable]="true" (dragEnd)="onDragEnd($event)"></mgl-marker>
+      <mgl-marker [lngLat]="[0, 0]" [draggable]="true" (markerDragEnd)="onDragEnd($event)"></mgl-marker>
       <mgl-control *ngIf="coordinates" position="bottom-left">
         <mat-card>
           <div>Longitude:&nbsp;{{ coordinates[0] }}</div>
@@ -21,7 +21,6 @@ export class DragAMarkerComponent {
   color = '#3887be';
 
   onDragEnd(marker: Marker) {
-    NgZone.assertInAngularZone();
     this.coordinates = marker.getLngLat().toArray();
   }
 }
diff --git a/projects/showcase/src/app/demo/examples/hover-styles.component.ts b/projects/showcase/src/app/demo/examples/hover-styles.component.ts
index 7ea46f866..2f61106b1 100644
--- a/projects/showcase/src/app/demo/examples/hover-styles.component.ts
+++ b/projects/showcase/src/app/demo/examples/hover-styles.component.ts
@@ -17,8 +17,8 @@ import { Component } from '@angular/core';
           'fill-color': '#627BC1',
           'fill-opacity': 0.5
         }"
-        (mouseMove)="activateHoverOn($event)"
-        (mouseLeave)="disableHover()"
+        (layerMouseMove)="activateHoverOn($event)"
+        (layerMouseLeave)="disableHover()"
       >
       </mgl-layer>
       <mgl-layer
diff --git a/projects/showcase/src/app/demo/examples/language-switch.component.ts b/projects/showcase/src/app/demo/examples/language-switch.component.ts
index 13ea84a7a..6436545f1 100644
--- a/projects/showcase/src/app/demo/examples/language-switch.component.ts
+++ b/projects/showcase/src/app/demo/examples/language-switch.component.ts
@@ -4,7 +4,7 @@ import { Map } from 'mapbox-gl';
 @Component({
   selector: 'showcase-demo',
   template: `
-    <mgl-map [style]="'mapbox://styles/mapbox/light-v9'" [zoom]="[2.9]" [center]="[16.05, 48]" (load)="map = $event">
+    <mgl-map [style]="'mapbox://styles/mapbox/light-v9'" [zoom]="[2.9]" [center]="[16.05, 48]" (mapLoad)="map = $event">
       <mgl-control>
         <button mat-raised-button class="lang-button" (click)="changeLangTo('fr')">
           French
diff --git a/projects/showcase/src/app/demo/examples/ngx-drag-a-point.component.ts b/projects/showcase/src/app/demo/examples/ngx-drag-a-point.component.ts
index 23353de1a..74ff400a9 100644
--- a/projects/showcase/src/app/demo/examples/ngx-drag-a-point.component.ts
+++ b/projects/showcase/src/app/demo/examples/ngx-drag-a-point.component.ts
@@ -13,9 +13,9 @@ import { MapMouseEvent } from 'mapbox-gl';
             coordinates: [0, 0]
           }"
           [mglDraggable]="targetLayer"
-          (dragStart)="onDragStart($event)"
-          (dragEnd)="onDragEnd($event)"
-          (drag)="onDrag($event)"
+          (featureDragStart)="onDragStart($event)"
+          (featureDragEnd)="onDragEnd($event)"
+          (featureDrag)="onDrag($event)"
         ></mgl-feature>
       </mgl-geojson-source>
       <mgl-layer
@@ -24,8 +24,8 @@ import { MapMouseEvent } from 'mapbox-gl';
         type="circle"
         source="point"
         [paint]="layerPaint"
-        (mouseEnter)="changeColor('#3bb2d0')"
-        (mouseLeave)="changeColor('#3887be')"
+        (layerMouseEnter)="changeColor('#3bb2d0')"
+        (layerMouseLeave)="changeColor('#3887be')"
       ></mgl-layer>
       <mgl-control position="bottom-left">
         <mat-card>
diff --git a/projects/showcase/src/app/demo/examples/polygon-popup-on-click.component.ts b/projects/showcase/src/app/demo/examples/polygon-popup-on-click.component.ts
index 048e33645..47f5a543e 100644
--- a/projects/showcase/src/app/demo/examples/polygon-popup-on-click.component.ts
+++ b/projects/showcase/src/app/demo/examples/polygon-popup-on-click.component.ts
@@ -22,9 +22,9 @@ import { GeoJsonProperties } from 'geojson';
           'fill-color': 'rgba(200, 100, 240, 0.4)',
           'fill-outline-color': 'rgba(200, 100, 240, 1)'
         }"
-        (mouseEnter)="cursorStyle = 'pointer'"
-        (mouseLeave)="cursorStyle = ''"
-        (click)="onClick($event)"
+        (layerMouseEnter)="cursorStyle = 'pointer'"
+        (layerMouseLeave)="cursorStyle = ''"
+        (layerClick)="onClick($event)"
       ></mgl-layer>
       <mgl-popup *ngIf="selectedLngLat" [lngLat]="selectedLngLat">
         <span [innerHTML]="selectedElement?.name"></span>
diff --git a/projects/showcase/src/app/demo/examples/popup-on-click.component.ts b/projects/showcase/src/app/demo/examples/popup-on-click.component.ts
index 28f2d2c07..222d47016 100644
--- a/projects/showcase/src/app/demo/examples/popup-on-click.component.ts
+++ b/projects/showcase/src/app/demo/examples/popup-on-click.component.ts
@@ -19,9 +19,9 @@ import { MapboxGeoJSONFeature, MapLayerMouseEvent } from 'mapbox-gl';
           'icon-image': '{icon}-15',
           'icon-allow-overlap': true
         }"
-        (click)="onClick($event)"
-        (mouseEnter)="cursorStyle = 'pointer'"
-        (mouseLeave)="cursorStyle = ''"
+        (layerClick)="onClick($event)"
+        (layerMouseEnter)="cursorStyle = 'pointer'"
+        (layerMouseLeave)="cursorStyle = ''"
       ></mgl-layer>
       <mgl-popup *ngIf="selectedPoint" [feature]="selectedPoint">
         <span [innerHTML]="selectedPoint.properties?.description"></span>