fix(map): zoom/bearing/pitch inputs are now an array

fix #2 BREAKING CHANGES: zoom/bearing/pitch inputs are now an array. This allow to force input changes for theses inputs
Wykks · Nov 20, 2017 · 0c19c5f · 0c19c5f
1 parent 0142f88
commit 0c19c5f
Show file tree

Hide file tree

Showing 23 changed files with 30 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -73,7 +73,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/streets-v9'"
-    [zoom]="9"
+    [zoom]="[9]"
     [center]="[-74.50, 40]"
   >
   </mgl-map>

diff --git a/src/app/demo/examples/attach-popup.component.ts b/src/app/demo/examples/attach-popup.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/light-v9'"
-    [zoom]="15"
+    [zoom]="[15]"
     [center]="[-77.0353, 38.8895]"
   >
     <mgl-marker

diff --git a/src/app/demo/examples/center-on-symbol.component.ts b/src/app/demo/examples/center-on-symbol.component.ts
@@ -5,7 +5,7 @@ import { MapMouseEvent, Map } from 'mapbox-gl';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/light-v9'"
-    [zoom]="8"
+    [zoom]="[8]"
     [center]="center"
     [cursorStyle]="cursorStyle"
     (load)="map = $event"

diff --git a/src/app/demo/examples/cluster.component.ts b/src/app/demo/examples/cluster.component.ts
@@ -6,7 +6,7 @@ const earthquakes = require('./earthquakes.geo.json');
   template: `
   <mgl-map
     style="mapbox://styles/mapbox/dark-v9"
-    [zoom]="3"
+    [zoom]="[3]"
     [center]="[-103.59179687498357, 40.66995747013945]"
   >
     <mgl-geojson-source

diff --git a/src/app/demo/examples/custom-marker-icons.component.ts b/src/app/demo/examples/custom-marker-icons.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/streets-v9'"
-    [zoom]="5"
+    [zoom]="[5]"
     [center]="[-65.017, -16.457]"
   >
     <mgl-marker

diff --git a/src/app/demo/examples/custom-style-id.component.ts b/src/app/demo/examples/custom-style-id.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/dark-v9'"
-    [zoom]="3"
+    [zoom]="[3]"
     [center]="[-77.38, 39]"
   >
   </mgl-map>

diff --git a/src/app/demo/examples/display-map.component.ts b/src/app/demo/examples/display-map.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/streets-v9'"
-    [zoom]="9"
+    [zoom]="[9]"
     [center]="[-74.50, 40]"
   >
   </mgl-map>

diff --git a/src/app/demo/examples/fullscreen.component.ts b/src/app/demo/examples/fullscreen.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/outdoors-v9'"
-    [zoom]="13"
+    [zoom]="[13]"
     [center]="[11.255, 43.77]"
   >
     <mgl-control mglFullscreen></mgl-control>

diff --git a/src/app/demo/examples/geojson-line.component.ts b/src/app/demo/examples/geojson-line.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/streets-v9'"
-    [zoom]="15"
+    [zoom]="[15]"
     [center]="[-122.486052, 37.830348]"
   >
     <mgl-layer

diff --git a/src/app/demo/examples/heatmap.component.ts b/src/app/demo/examples/heatmap.component.ts
@@ -7,7 +7,7 @@ const earthquakes = require('./earthquakes.geo.json');
   template: `
   <mgl-map
     style="mapbox://styles/mapbox/dark-v9"
-    [zoom]="3"
+    [zoom]="[3]"
     [center]="[-103.59179687498357, 40.66995747013945]"
   >
     <mgl-geojson-source

diff --git a/src/app/demo/examples/hover-styles.component.ts b/src/app/demo/examples/hover-styles.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     style="mapbox://styles/mapbox/streets-v9"
-    [zoom]="2"
+    [zoom]="[2]"
     [center]="[-100.486052, 37.830348]"
   >
     <mgl-geojson-source

diff --git a/src/app/demo/examples/interactive-false.component.ts b/src/app/demo/examples/interactive-false.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/streets-v9'"
-    [zoom]="9"
+    [zoom]="[9]"
     [center]="[-74.50, 40]"
     [interactive]="false"
   >

diff --git a/src/app/demo/examples/navigation.component.ts b/src/app/demo/examples/navigation.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/streets-v9'"
-    [zoom]="9"
+    [zoom]="[9]"
     [center]="[-74.50, 40]"
   >
     <mgl-control

diff --git a/src/app/demo/examples/ngx-custom-marker-icons.component.ts b/src/app/demo/examples/ngx-custom-marker-icons.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/streets-v9'"
-    [zoom]="5"
+    [zoom]="[5]"
     [center]="[-65.017, -16.457]"
   >
     <mgl-marker

diff --git a/src/app/demo/examples/ngx-drag-a-point.component.ts b/src/app/demo/examples/ngx-drag-a-point.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/streets-v9'"
-    [zoom]="2"
+    [zoom]="[2]"
     [center]="[0, 0]"
   >
     <mgl-geojson-source

diff --git a/src/app/demo/examples/ngx-geojson-line.component.ts b/src/app/demo/examples/ngx-geojson-line.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/streets-v9'"
-    [zoom]="15"
+    [zoom]="[15]"
     [center]="[-122.486052, 37.830348]"
   >
     <mgl-geojson-source

diff --git a/src/app/demo/examples/ngx-popup-for-layer.ts b/src/app/demo/examples/ngx-popup-for-layer.ts
@@ -7,7 +7,7 @@ import { BBox } from '@turf/helpers';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/streets-v9'"
-    [zoom]="3"
+    [zoom]="[3]"
     [center]="[-96, 37.8]"
     [cursorStyle]="cursorStyle"
     (load)="onLoad($event)"

diff --git a/src/app/demo/examples/popup.component.ts b/src/app/demo/examples/popup.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/streets-v9'"
-    [zoom]="3"
+    [zoom]="[3]"
     [center]="[-96, 37.8]"
   >
     <mgl-popup

diff --git a/src/app/demo/examples/satellite-map.component.ts b/src/app/demo/examples/satellite-map.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   template: `
   <mgl-map
     [style]="'mapbox://styles/mapbox/satellite-v9'"
-    [zoom]="9"
+    [zoom]="[9]"
     [center]="[137.9150899566626, 36.25956997955441]"
   >
   </mgl-map>

diff --git a/src/app/demo/examples/set-style.component.ts b/src/app/demo/examples/set-style.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit } from '@angular/core';
   template: `
   <mgl-map
     [style]="style"
-    [zoom]="13"
+    [zoom]="[13]"
     [center]="[4.899, 52.372]"
   >
   </mgl-map>

diff --git a/src/app/demo/examples/toggle-layers.component.ts b/src/app/demo/examples/toggle-layers.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit } from '@angular/core';
   template: `
   <mgl-map
     style="mapbox://styles/mapbox/streets-v9"
-    [zoom]="15"
+    [zoom]="[15]"
     [center]="[-71.97722138410576, -13.517379300798098]"
   >
     <mgl-vector-source

diff --git a/src/app/lib/map/map.component.ts b/src/app/lib/map/map.component.ts
@@ -4,7 +4,6 @@ import {
   LngLatBoundsLike,
   LngLatLike,
   Map,
-  MapboxOptions,
   MapBoxZoomEvent,
   MapMouseEvent,
   MapTouchEvent,
@@ -54,7 +53,7 @@ declare global {
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapboxOptions, MapEvent {
+export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, MapEvent {
   /* Init inputs */
   @Input() accessToken?: string;
   @Input() customMapboxApiUrl?: string;
@@ -86,10 +85,10 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, Mapbox
   @Input() boxZoom?: boolean;
   @Input() style: Style | string;
   @Input() center?: LngLatLike;
-  @Input() zoom?: number;
   @Input() maxBounds?: LngLatBoundsLike;
-  @Input() bearing?: number;
-  @Input() pitch?: number;
+  @Input() zoom?: [number];
+  @Input() bearing?: [number];
+  @Input() pitch?: [number];
 
   /* Added by ngx-mapbox-gl */
   @Input() movingMethod: 'jumpTo' | 'easeTo' | 'flyTo' = 'flyTo';
@@ -260,10 +259,10 @@ export class MapComponent implements OnChanges, OnDestroy, AfterViewInit, Mapbox
       this.MapService.move(
         this.movingMethod,
         this.flyToOptions,
-        this.zoom,
-        this.center,
-        this.bearing,
-        this.pitch
+        changes.zoom && this.zoom ? this.zoom[0] : undefined,
+        changes.center ? this.center : undefined,
+        changes.bearing && this.bearing ? this.bearing[0] : undefined,
+        changes.pitch && this.pitch ? this.pitch[0] : undefined
       );
     }
   }

diff --git a/src/app/lib/map/map.service.ts b/src/app/lib/map/map.service.ts
@@ -9,7 +9,7 @@ export const MAPBOX_API_KEY = new InjectionToken('MapboxApiKey');
 export interface SetupMap {
   accessToken?: string;
   customMapboxApiUrl?: string;
-  mapOptions: MapboxGl.MapboxOptions;
+  mapOptions: any; // MapboxGl.MapboxOptions
   mapEvents: MapEvent;
 }