feat: update to mapbox-gl 0.53.1 and fix compilation errors (#128)

* Fix linter's warnings

* Fix compilation errors and update to mapbox-gl 0.53.1

Author: dmytro-gokun

package.json

@@ -40,25 +40,25 @@
     "@turf/random": "^6.0.2",
     "hammerjs": "^2.0.8",
     "lodash-es": "^4.17.11",
-    "mapbox-gl": "0.52.0",
+    "mapbox-gl": "0.53.1",
     "ngx-md": "^7.0.0",
     "rxjs": "^6.3.3",
     "scroll-into-view-if-needed": "^2.2.20",
     "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.12.0",
-    "@angular-devkit/build-ng-packagr": "~0.12.0",
-    "@angular/cli": "7.2.3",
+    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular-devkit/build-ng-packagr": "~0.13.0",
+    "@angular/cli": "^7.2.3",
     "@angular/compiler-cli": "^7.2.2",
     "@ngrx/schematics": "^7.1.0",
     "@turf/bbox": "^6.0.1",
     "@types/jasmine": "^3.3.8",
     "@types/jasminewd2": "^2.0.6",
     "@types/lodash-es": "^4.17.1",
     "@types/mapbox-gl": "^0.51.3",
-    "@types/node": "^10.12.18",
-    "@types/supercluster": "^3.0.2",
+    "@types/node": "^11.13.0",
+    "@types/supercluster": "^5.0.1",
     "codelyzer": "^4.5.0",
     "jasmine-core": "^3.3.0",
     "jasmine-spec-reporter": "^4.2.1",

projects/ngx-mapbox-gl/package.json

@@ -22,13 +22,13 @@
   "peerDependencies": {
     "@angular/common": ">= 7.2.0 < 8.0.0",
     "@angular/core": ">= 7.2.0 < 8.0.0",
-    "mapbox-gl": "0.52.0",
+    "mapbox-gl": "0.53.1",
     "rxjs": "^6.0.0"
   },
   "dependencies": {
     "@mapbox/mapbox-gl-geocoder": "^3.0.1",
     "@turf/bbox": "^6.0.1",
     "@turf/helpers": "^6.1.4",
-    "supercluster": "^4.1.1"
+    "supercluster": "^6.0.1"
   }
 }

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

@@ -16,7 +16,7 @@ import { MapService } from '../map/map.service';
 import { GeocoderEvent } from '../map/map.types';
 import { ControlComponent } from './control.component';
 
-//@ts-ignore
+// @ts-ignore
 import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 
 export const MAPBOX_GEOCODER_API_KEY = new InjectionToken('MapboxApiKey');

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

@@ -4,7 +4,6 @@ import { polygon } from '@turf/helpers';
 import * as MapboxGl from 'mapbox-gl';
 import { AsyncSubject, Observable, Subscription } from 'rxjs';
 import { first } from 'rxjs/operators';
-import { BBox } from 'supercluster';
 import { MapEvent, MapImageData, MapImageOptions } from './map.types';
 
 export const MAPBOX_API_KEY = new InjectionToken('MapboxApiKey');
@@ -479,7 +478,7 @@ export class MapService {
     });
   }
 
-  getCurrentViewportBbox(): BBox {
+  getCurrentViewportBbox(): GeoJSON.BBox {
     const canvas = this.mapInstance.getCanvas();
     const w = parseInt(canvas.style.width!, 10);
     const h = parseInt(canvas.style.height!, 10);

projects/ngx-mapbox-gl/src/lib/marker-cluster/marker-cluster.component.ts

@@ -17,7 +17,7 @@ import {
 } from '@angular/core';
 import { fromEvent, merge, Subscription } from 'rxjs';
 import { startWith } from 'rxjs/operators';
-import supercluster, { Cluster, Options as SuperclusterOptions, Supercluster } from 'supercluster';
+import Supercluster, { ClusterFeature, Options } from 'supercluster';
 import { MapService } from '../map/map.service';
 
 @Directive({ selector: 'ng-template[mglPoint]' })
@@ -63,20 +63,19 @@ export class MarkerClusterComponent implements OnChanges, OnDestroy, AfterConten
   @Input() nodeSize?: number;
   @Input() log?: boolean;
   @Input() reduce?: (accumulated: any, props: any) => void;
-  @Input() initial?: () => any;
   @Input() map?: (props: any) => any;
 
   /* Dynamic input */
   @Input() data: GeoJSON.FeatureCollection<GeoJSON.Point>;
 
-  @Output() load = new EventEmitter<Supercluster>();
+  @Output() load = new EventEmitter<Supercluster<GeoJSON.GeoJsonProperties, GeoJSON.GeoJsonProperties>>();
 
   @ContentChild(PointDirective, { read: TemplateRef }) pointTpl: TemplateRef<any>;
   @ContentChild(ClusterPointDirective, { read: TemplateRef }) clusterPointTpl: TemplateRef<any>;
 
   clusterPoints: GeoJSON.Feature<GeoJSON.Point>[];
 
-  private supercluster: Supercluster;
+  private supercluster: Supercluster<GeoJSON.GeoJsonProperties, GeoJSON.GeoJsonProperties>;
   private sub = new Subscription();
 
   constructor(
@@ -86,25 +85,24 @@ export class MarkerClusterComponent implements OnChanges, OnDestroy, AfterConten
   ) { }
 
   ngOnInit() {
-    const options: SuperclusterOptions = {
+    const options: Options<GeoJSON.GeoJsonProperties, GeoJSON.GeoJsonProperties> = {
       radius: this.radius,
       maxZoom: this.maxZoom,
       minZoom: this.minZoom,
       extent: this.extent,
       nodeSize: this.nodeSize,
       log: this.log,
       reduce: this.reduce,
-      initial: this.initial,
       map: this.map
     };
     Object.keys(options)
       .forEach((key: string) => {
-        const tkey = <keyof SuperclusterOptions>key;
+        const tkey = <keyof Options<GeoJSON.GeoJsonProperties, GeoJSON.GeoJsonProperties>>key;
         if (options[tkey] === undefined) {
           delete options[tkey];
         }
       });
-    this.supercluster = supercluster(options);
+    this.supercluster = new Supercluster<GeoJSON.GeoJsonProperties, GeoJSON.GeoJsonProperties>(options);
     this.supercluster.load(this.data.features);
     this.load.emit(this.supercluster);
   }
@@ -137,15 +135,15 @@ export class MarkerClusterComponent implements OnChanges, OnDestroy, AfterConten
     this.sub.unsubscribe();
   }
 
-  getLeavesFn = (feature: Cluster) => {
+  getLeavesFn = (feature: ClusterFeature<GeoJSON.GeoJsonProperties>) => {
     return (limit?: number, offset?: number) => (<any>this.supercluster.getLeaves)(feature.properties.cluster_id!, limit, offset);
   }
 
-  getChildrenFn = (feature: Cluster) => {
+  getChildrenFn = (feature: ClusterFeature<GeoJSON.GeoJsonProperties>) => {
     return () => (<any>this.supercluster.getChildren)(feature.properties.cluster_id!);
   }
 
-  getClusterExpansionZoomFn = (feature: Cluster) => {
+  getClusterExpansionZoomFn = (feature: ClusterFeature<GeoJSON.GeoJsonProperties>) => {
     return () => (<any>this.supercluster.getClusterExpansionZoom)(feature.properties.cluster_id!);
   }
 

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

@@ -67,7 +67,9 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
       this.markerInstance!.setDraggable(!!this.draggable);
     }
     if (changes.popupShown && !changes.popupShown.isFirstChange()) {
-      changes.popupShown.currentValue ? this.markerInstance!.getPopup().addTo(this.MapService.mapInstance) : this.markerInstance!.getPopup().remove();
+      changes.popupShown.currentValue
+        ? this.markerInstance!.getPopup().addTo(this.MapService.mapInstance)
+        : this.markerInstance!.getPopup().remove();
     }
   }