feat: update support to mapbox-gl 0.49

README.md

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

package.json

@@ -38,7 +38,7 @@
     "@turf/random": "^6.0.2",
     "hammerjs": "^2.0.8",
     "lodash-es": "^4.17.11",
-    "mapbox-gl": "0.48.0",
+    "mapbox-gl": "0.49.0",
     "ngx-md": "^6.0.9",
     "rxjs": "^6.3.3",
     "scroll-into-view-if-needed": "^2.2.19",
@@ -54,7 +54,7 @@
     "@types/jasmine": "^2.8.9",
     "@types/jasminewd2": "^2.0.5",
     "@types/lodash-es": "^4.17.1",
-    "@types/mapbox-gl": "^0.48.0",
+    "@types/mapbox-gl": "^0.49.0",
     "@types/node": "^10.11.6",
     "@types/supercluster": "^3.0.2",
     "codelyzer": "^4.5.0",

projects/ngx-mapbox-gl/package.json

@@ -22,7 +22,7 @@
   "peerDependencies": {
     "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
     "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
-    "mapbox-gl": "0.48.0",
+    "mapbox-gl": "0.49.0",
     "rxjs": "^6.0.0"
   },
   "dependencies": {

projects/ngx-mapbox-gl/src/lib/draggable/draggable.directive.ts

@@ -73,7 +73,7 @@ export class DraggableDirective implements OnInit, OnDestroy {
     let moving = false;
     let inside = false;
     this.MapService.mapCreated$.subscribe(() => {
-      const mouseUp$ = fromEvent<MapMouseEvent>(this.MapService.mapInstance, 'mouseup');
+      const mouseUp$ = fromEvent<MapMouseEvent>(<any>this.MapService.mapInstance, 'mouseup');
       const dragStart$ = enter$.pipe(
         takeUntil(this.destroyed$),
         filter(() => !moving),
@@ -84,12 +84,12 @@ export class DraggableDirective implements OnInit, OnDestroy {
           this.MapService.updateDragPan(false);
         }),
         switchMap(() =>
-          fromEvent<MapMouseEvent>(this.MapService.mapInstance, 'mousedown')
+          fromEvent<MapMouseEvent>(<any>this.MapService.mapInstance, 'mousedown')
             .pipe(takeUntil(leave$))
         )
       );
       const dragging$ = dragStart$.pipe(
-        switchMap(() => fromEvent<MapMouseEvent>(this.MapService.mapInstance, 'mousemove')
+        switchMap(() => fromEvent<MapMouseEvent>(<any>this.MapService.mapInstance, 'mousemove')
           .pipe(takeUntil(mouseUp$))
         )
       );

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

@@ -71,7 +71,7 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
   ngOnInit() {
     this.MapService.mapLoaded$.subscribe(() => {
       this.init(true);
-      this.sub = fromEvent(this.MapService.mapInstance, 'styledata').pipe(
+      this.sub = fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
         filter(() => !this.MapService.mapInstance.getLayer(this.id))
       ).subscribe(() => {
         this.init(false);

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

@@ -1,16 +1,16 @@
 import {
   AnimationOptions,
   EventData,
+  FitBoundsOptions,
   LngLatBoundsLike,
   LngLatLike,
   Map,
   MapBoxZoomEvent,
   MapMouseEvent,
   MapTouchEvent,
-  PaddingOptions,
   PointLike,
   Style
-  } from 'mapbox-gl';
+} from 'mapbox-gl';
 import { MapService, MovingOptions } from './map.service';
 import { MapEvent } from './map.types';
 import {
@@ -96,13 +96,8 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
   @Input() movingMethod: 'jumpTo' | 'easeTo' | 'flyTo' = 'flyTo';
   @Input() movingOptions?: MovingOptions;
   @Input() fitBounds?: LngLatBoundsLike;
-  @Input() fitBoundsOptions?: {
-    linear?: boolean,
-    easing?: Function,
-    padding?: number | PaddingOptions,
-    offset?: PointLike,
-    maxZoom?: number
-  };
+  @Input() fitBoundsOptions?: FitBoundsOptions;
+  @Input() fitScreenCoordinates?: [PointLike, PointLike];
   @Input() centerWithPanTo?: boolean;
   @Input() panToOptions?: AnimationOptions;
   @Input() cursorStyle?: string;
@@ -253,6 +248,13 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
     if (changes.fitBounds && !changes.fitBounds.isFirstChange()) {
       this.MapService.fitBounds(changes.fitBounds.currentValue, this.fitBoundsOptions);
     }
+    if (changes.fitScreenCoordinates && !changes.fitBounds.isFirstChange()) {
+      this.MapService.fitScreenCoordinates(
+        changes.fitScreenCoordinates.currentValue,
+        this.bearing ? this.bearing[0] : 0,
+        this.movingOptions
+      );
+    }
     if (
       this.centerWithPanTo &&
       changes.center && !changes.center.isFirstChange() &&
@@ -262,7 +264,7 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEve
     } else if (
       changes.center && !changes.center.isFirstChange() ||
       changes.zoom && !changes.zoom.isFirstChange() ||
-      changes.bearing && !changes.bearing.isFirstChange() ||
+      (changes.bearing && !changes.bearing.isFirstChange() && !changes.fitScreenCoordinates) ||
       changes.pitch && !changes.pitch.isFirstChange()
     ) {
       this.MapService.move(

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

@@ -167,14 +167,12 @@ export class MapService {
   }
 
   updateStyle(style: MapboxGl.Style) {
-    // TODO Probably not so simple, write demo/tests
     return this.zone.runOutsideAngular(() => {
       this.mapInstance.setStyle(style);
     });
   }
 
   updateMaxBounds(maxBounds: MapboxGl.LngLatBoundsLike) {
-    // TODO Probably not so simple, write demo/tests
     return this.zone.runOutsideAngular(() => {
       this.mapInstance.setMaxBounds(maxBounds);
     });
@@ -186,7 +184,7 @@ export class MapService {
   }
 
   queryRenderedFeatures(
-    pointOrBox?: MapboxGl.PointLike | MapboxGl.PointLike[],
+    pointOrBox?: MapboxGl.PointLike | [MapboxGl.PointLike, MapboxGl.PointLike],
     parameters?: { layers?: string[], filter?: any[] }
   ): GeoJSON.Feature<GeoJSON.GeometryObject>[] {
     return this.mapInstance.queryRenderedFeatures(pointOrBox, parameters);
@@ -289,10 +287,10 @@ export class MapService {
         this.zone.run(() => marker.markersEvents.dragEnd.emit(event.target))
       );
     }
-    markerInstance.setLngLat(marker.markersOptions.feature ?
-      marker.markersOptions.feature.geometry!.coordinates :
-      marker.markersOptions.lngLat!
-    );
+    const lngLat: MapboxGl.LngLatLike = marker.markersOptions.feature ?
+      <[number, number]>marker.markersOptions.feature.geometry!.coordinates :
+      marker.markersOptions.lngLat!;
+    markerInstance.setLngLat(lngLat);
     return this.zone.runOutsideAngular(() => {
       markerInstance.addTo(this.mapInstance);
       return markerInstance;
@@ -465,12 +463,22 @@ export class MapService {
     });
   }
 
-  fitBounds(bounds: MapboxGl.LngLatBoundsLike, options?: any) {
+  fitBounds(bounds: MapboxGl.LngLatBoundsLike, options?: MapboxGl.FitBoundsOptions) {
     return this.zone.runOutsideAngular(() => {
       this.mapInstance.fitBounds(bounds, options);
     });
   }
 
+  fitScreenCoordinates(
+    points: [MapboxGl.PointLike, MapboxGl.PointLike],
+    bearing: number,
+    options?: MapboxGl.AnimationOptions & MapboxGl.CameraOptions
+  ) {
+    return this.zone.runOutsideAngular(() => {
+      this.mapInstance.fitScreenCoordinates(points[0], points[1], bearing, options);
+    });
+  }
+
   getCurrentViewportBbox(): BBox {
     const canvas = this.mapInstance.getCanvas();
     const w = parseInt(canvas.style.width!, 10);
@@ -515,10 +523,6 @@ export class MapService {
 
   private removeLayers() {
     for (const layerId of this.layerIdsToRemove) {
-      this.mapInstance.off('click', layerId);
-      this.mapInstance.off('mouseenter', layerId);
-      this.mapInstance.off('mouseleave', layerId);
-      this.mapInstance.off('mousemove', layerId);
       this.mapInstance.removeLayer(layerId);
     }
     this.layerIdsToRemove = [];

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

@@ -118,8 +118,8 @@ export class MarkerClusterComponent implements OnChanges, OnDestroy, AfterConten
   ngAfterContentInit() {
     this.MapService.mapCreated$.subscribe(() => {
       const mapMove$ = merge(
-        fromEvent(this.MapService.mapInstance, 'zoomChange'),
-        fromEvent(this.MapService.mapInstance, 'move')
+        fromEvent(<any>this.MapService.mapInstance, 'zoomChange'),
+        fromEvent(<any>this.MapService.mapInstance, 'move')
       );
       const sub = mapMove$.pipe(
         startWith<any>(undefined)

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

@@ -60,7 +60,7 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
       this.markerInstance!.setLngLat(this.lngLat!);
     }
     if (changes.feature && !changes.feature.isFirstChange()) {
-      this.markerInstance!.setLngLat(this.feature!.geometry!.coordinates);
+      this.markerInstance!.setLngLat(<[number, number]>this.feature!.geometry!.coordinates);
     }
     if (changes.draggable && !changes.draggable.isFirstChange()) {
       this.markerInstance!.setDraggable(!!this.draggable);
@@ -96,7 +96,7 @@ export class MarkerComponent implements OnChanges, OnDestroy, AfterViewInit, OnI
     this.markerInstance!.togglePopup();
   }
 
-  updateCoordinates(coordinates: number[]) {
+  updateCoordinates(coordinates: [number, number]) {
     this.markerInstance!.setLngLat(coordinates);
   }
 }

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

@@ -55,7 +55,7 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
       changes.lngLat && !changes.lngLat.isFirstChange() ||
       changes.feature && !changes.feature.isFirstChange()
     ) {
-      const newlngLat = changes.lngLat ? this.lngLat! : this.feature!.geometry!.coordinates!;
+      const newlngLat = changes.lngLat ? this.lngLat! : <[number, number]>this.feature!.geometry!.coordinates!;
       this.MapService.removePopupFromMap(this.popupInstance!, true);
       const popupInstanceTmp = this.createPopup();
       this.MapService.addPopupToMap(popupInstanceTmp, newlngLat, this.popupInstance!.isOpen());
@@ -106,7 +106,7 @@ export class PopupComponent implements OnChanges, OnDestroy, AfterViewInit, OnIn
   private addPopup(popup: Popup) {
     this.MapService.mapCreated$.subscribe(() => {
       if (this.lngLat || this.feature) {
-        this.MapService.addPopupToMap(popup, this.lngLat ? this.lngLat : this.feature!.geometry!.coordinates!);
+        this.MapService.addPopupToMap(popup, this.lngLat ? this.lngLat : <[number, number]>this.feature!.geometry!.coordinates!);
       } else if (this.marker && this.marker.markerInstance) {
         this.MapService.addPopupToMarker(this.marker.markerInstance, popup);
       } else {

projects/ngx-mapbox-gl/src/lib/source/canvas-source.component.ts

@@ -28,7 +28,7 @@ export class CanvasSourceComponent implements OnInit, OnDestroy, OnChanges, Canv
   ngOnInit() {
     this.MapService.mapLoaded$.subscribe(() => {
       this.init();
-      const sub = fromEvent(this.MapService.mapInstance, 'styledata').pipe(
+      const sub = fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
         filter(() => !this.MapService.mapInstance.getSource(this.id))
       ).subscribe(() => {
         this.init();

projects/ngx-mapbox-gl/src/lib/source/geojson/geojson-source.component.ts

@@ -42,7 +42,7 @@ export class GeoJSONSourceComponent implements OnInit, OnDestroy, OnChanges, Geo
     }
     this.MapService.mapLoaded$.subscribe(() => {
       this.init();
-      const sub = fromEvent(this.MapService.mapInstance, 'styledata').pipe(
+      const sub = fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
         filter(() => !this.MapService.mapInstance.getSource(this.id))
       ).subscribe(() => {
         this.init();

projects/ngx-mapbox-gl/src/lib/source/image-source.component.ts

@@ -27,7 +27,7 @@ export class ImageSourceComponent implements OnInit, OnDestroy, OnChanges, Image
   ngOnInit() {
     this.MapService.mapLoaded$.subscribe(() => {
       this.init();
-      const sub = fromEvent(this.MapService.mapInstance, 'styledata').pipe(
+      const sub = fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
         filter(() => !this.MapService.mapInstance.getSource(this.id))
       ).subscribe(() => {
         this.init();

projects/ngx-mapbox-gl/src/lib/source/raster-source.component.ts

@@ -33,7 +33,7 @@ export class RasterSourceComponent implements OnInit, OnDestroy, OnChanges, Rast
   ngOnInit() {
     this.MapService.mapLoaded$.subscribe(() => {
       this.init();
-      const sub = fromEvent(this.MapService.mapInstance, 'styledata').pipe(
+      const sub = fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
         filter(() => !this.MapService.mapInstance.getSource(this.id))
       ).subscribe(() => {
         this.init();

projects/ngx-mapbox-gl/src/lib/source/vector-source.component.ts

@@ -31,7 +31,7 @@ export class VectorSourceComponent implements OnInit, OnDestroy, OnChanges, Vect
   ngOnInit() {
     this.MapService.mapLoaded$.subscribe(() => {
       this.init();
-      const sub = fromEvent(this.MapService.mapInstance, 'styledata').pipe(
+      const sub = fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
         filter(() => !this.MapService.mapInstance.getSource(this.id))
       ).subscribe(() => {
         this.init();

projects/ngx-mapbox-gl/src/lib/source/video-source.component.ts

@@ -27,7 +27,7 @@ export class VideoSourceComponent implements OnInit, OnDestroy, OnChanges, Video
   ngOnInit() {
     this.MapService.mapLoaded$.subscribe(() => {
       this.init();
-      const sub = fromEvent(this.MapService.mapInstance, 'styledata').pipe(
+      const sub = fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
         filter(() => !this.MapService.mapInstance.getSource(this.id))
       ).subscribe(() => {
         this.init();

projects/showcase/src/app/demo/examples/live-update-feature.component.ts

@@ -49,13 +49,13 @@ export class LiveUpdateFeatureComponent implements OnInit, OnDestroy {
     const coordinates = data.features[0].geometry!.coordinates;
     data.features[0].geometry!.coordinates = [coordinates[0]];
     this.data = data;
-    this.center = coordinates[0];
+    this.center = <[number, number]>coordinates[0];
     this.zoom = [14];
     this.pitch = 30;
     let i = 0;
     this.timer = window.setInterval(() => {
       if (i < coordinates.length) {
-        this.center = coordinates[i];
+        this.center = <[number, number]>coordinates[i];
         data.features[0].geometry!.coordinates.push(coordinates[i]);
         this.data = { ...this.data };
         i++;

projects/showcase/src/app/demo/examples/zoomto-linestring.component.ts

@@ -52,7 +52,7 @@ export class ZoomtoLinestringComponent {
         'geometry': {
           'type': 'LineString',
           'properties': {},
-          'coordinates': [
+          'coordinates': <[number, number][]>[
             [-77.0366048812866, 38.89873175227713],
             [-77.03364372253417, 38.89876515143842],
             [-77.03364372253417, 38.89549195896866],