feat: emit map instance on load output

BREAKING CHANGE: MapComponent is no longer exposed in the package

src/app/demo/examples/center-on-symbol.component.ts

@@ -1,14 +1,13 @@
-import { MapComponent } from '../../lib';
-import { Component, ViewChild } from '@angular/core';
-import { MapMouseEvent } from 'mapbox-gl';
+import { Component } from '@angular/core';
+import { MapMouseEvent, Map } from 'mapbox-gl';
 
 @Component({
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/light-v9'"
     [zoom]="8"
     [center]="center"
-    #map
+    (load)="map = $event"
   >
     <mgl-geojson-source
       id="symbols-source"
@@ -35,7 +34,7 @@ import { MapMouseEvent } from 'mapbox-gl';
   styleUrls: ['./examples.css']
 })
 export class CenterOnSymbolComponent {
-  @ViewChild('map') map: MapComponent;
+  map: Map;
 
   center = [-90.96, -0.47];
 
@@ -69,10 +68,10 @@ export class CenterOnSymbolComponent {
   }
 
   changeCursorToPointer() {
-    this.map.mapInstance.getCanvas().style.cursor = 'pointer';
+    this.map.getCanvas().style.cursor = 'pointer';
   }
 
   changeCursorToDefault() {
-    this.map.mapInstance.getCanvas().style.cursor = '';
+    this.map.getCanvas().style.cursor = '';
   }
 }

src/app/demo/examples/language-switch.component.ts

@@ -1,13 +1,13 @@
-import { Component, ViewChild } from '@angular/core';
-import { MapComponent } from '../../lib';
+import { Component } from '@angular/core';
+import { Map } from 'mapbox-gl';
 
 @Component({
   template: `
   <mgl-map
     style="mapbox://styles/mapbox/light-v9"
     [zoom]="2.9"
     [center]="[16.05, 48]"
-    #map
+    (load)="map = $event"
   >
     <mgl-control>
       <button
@@ -32,9 +32,9 @@ import { MapComponent } from '../../lib';
   styleUrls: ['./examples.css', './toggle-layers.component.css']
 })
 export class LanguageSwitchComponent {
-  @ViewChild('map') map: MapComponent;
+  map: Map;
 
   changeLangTo(language: string) {
-    this.map.mapInstance.setLayoutProperty('country-label-lg', 'text-field', '{name_' + language + '}');
+    this.map.setLayoutProperty('country-label-lg', 'text-field', '{name_' + language + '}');
   }
 }

src/app/lib/index.ts

@@ -1,4 +1,3 @@
 export * from './lib.module';
 
 export * from './map/map.types';
-export { MapComponent } from './map/map.component';

src/app/lib/map/map.service.ts

@@ -349,7 +349,7 @@ export class MapService {
     this.mapInstance.on('load', () => {
       this.mapLoaded.next(undefined);
       this.mapLoaded.complete();
-      this.zone.run(() => events.load.emit());
+      this.zone.run(() => events.load.emit(this.mapInstance));
     });
     this.mapInstance.on('resize', () => this.zone.run(() => events.resize.emit()));
     this.mapInstance.on('remove', () => this.zone.run(() => events.remove.emit()));

src/app/lib/map/map.types.ts

@@ -1,6 +1,6 @@
 // Can't use MapEvent interface from @types/mapbox because some event name are changed (eg zoomChange)
 import { EventEmitter } from '@angular/core';
-import { MapMouseEvent, MapTouchEvent, EventData, MapBoxZoomEvent } from 'mapbox-gl';
+import { MapMouseEvent, MapTouchEvent, EventData, MapBoxZoomEvent, Map } from 'mapbox-gl';
 
 export interface MapEvent {
   resize: EventEmitter<void>;
@@ -39,7 +39,7 @@ export interface MapEvent {
   boxZoomCancel: EventEmitter<MapBoxZoomEvent>;
   webGlContextLost: EventEmitter<void>;
   webGlContextRestored: EventEmitter<void>;
-  load: EventEmitter<any>;
+  load: EventEmitter<Map>;
   render: EventEmitter<void>;
   error: EventEmitter<any>; // TODO Check type
   data: EventEmitter<EventData>;