feat: update mapbox-gl to 0.52.0

README.md

@@ -33,11 +33,11 @@ Include the following components:
 ## How to start
 
 ```
-npm install ngx-mapbox-gl mapbox-gl@0.51.0 --save
+npm install ngx-mapbox-gl mapbox-gl@0.52.0 --save
 ```
 If using typescript add mapbox-gl types 
 ```
-npm install @types/mapbox-gl@0.51.0 --save-dev
+npm install @types/mapbox-gl@0.52.0 --save-dev
 ```
 
 Load the css of mapbox-gl (and mapbox-gl-geocoder if mglGeocoder is used)

package.json

@@ -40,7 +40,7 @@
     "@turf/random": "^6.0.2",
     "hammerjs": "^2.0.8",
     "lodash-es": "^4.17.11",
-    "mapbox-gl": "0.51.0",
+    "mapbox-gl": "0.52.0",
     "ngx-md": "^7.0.0",
     "rxjs": "^6.3.3",
     "scroll-into-view-if-needed": "^2.2.20",

projects/ngx-mapbox-gl/src/lib/control/fullscreen-control.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, OnInit, Host } from '@angular/core';
+import { Directive, OnInit, Host, Input } from '@angular/core';
 import { FullscreenControl } from 'mapbox-gl';
 import { MapService } from '../map/map.service';
 import { ControlComponent } from './control.component';
@@ -7,6 +7,8 @@ import { ControlComponent } from './control.component';
   selector: '[mglFullscreen]'
 })
 export class FullscreenControlDirective implements OnInit {
+  /* Init inputs */
+  @Input() container?: HTMLElement;
 
   constructor(
     private MapService: MapService,
@@ -18,7 +20,12 @@ export class FullscreenControlDirective implements OnInit {
       if (this.ControlComponent.control) {
         throw new Error('Another control is already set for this control');
       }
-      this.ControlComponent.control = new FullscreenControl();
+      const options: { container?: HTMLElement } = {};
+      if (this.container !== undefined) {
+        options.container = this.container;
+      }
+      // @ts-ignore
+      this.ControlComponent.control = new FullscreenControl(options); // @types/mapbox-gl update needed
       this.MapService.addControl(this.ControlComponent.control, this.ControlComponent.position);
     });
   }

projects/ngx-mapbox-gl/src/lib/map/map.component.ts

@@ -129,6 +129,7 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
   @Output() webGlContextLost = new EventEmitter<void>();
   @Output() webGlContextRestored = new EventEmitter<void>();
   @Output() load = new EventEmitter<any>();
+  @Output() idle = new EventEmitter<void>();
   @Output() render = new EventEmitter<void>();
   @Output() error = new EventEmitter<any>(); // TODO Check type
   @Output() data = new EventEmitter<EventData>();

projects/ngx-mapbox-gl/src/lib/map/map.service.spec.ts

@@ -92,7 +92,8 @@ describe('MapService', () => {
       sourceData: new EventEmitter<EventData>(),
       dataLoading: new EventEmitter<EventData>(),
       styleDataLoading: new EventEmitter<EventData>(),
-      sourceDataLoading: new EventEmitter<EventData>()
+      sourceDataLoading: new EventEmitter<EventData>(),
+      idle: new EventEmitter<void>()
     };
   });
 

projects/ngx-mapbox-gl/src/lib/map/map.service.ts

@@ -708,6 +708,9 @@ export class MapService {
     if (events.sourceDataLoading.observers.length) {
       this.mapInstance.on('sourcedataloading', (evt: MapboxGl.EventData) => this.zone.run(() => events.sourceDataLoading.emit(evt)));
     }
+    if (events.idle.observers.length) {
+      this.mapInstance.on('idle', () => this.zone.run(() => events.idle.emit()));
+    }
   }
 
   // TODO move this elsewhere

projects/ngx-mapbox-gl/src/lib/map/map.types.ts

@@ -50,6 +50,7 @@ export interface MapEvent {
   dataLoading: EventEmitter<EventData>;
   styleDataLoading: EventEmitter<EventData>;
   sourceDataLoading: EventEmitter<EventData>;
+  idle: EventEmitter<void>;
 }
 
 export interface GeocoderEvent {