fix(map): support number in addition to [number] for zoom, ptich, bearing (fix #433)

Author: Wykks

README.md

@@ -103,7 +103,7 @@ Display a map:
 import { Component } from '@angular/core';
 
 @Component({
-  template: `<mgl-map [style]="'mapbox://styles/mapbox/streets-v12'" [zoom]="[9]" [center]="[-74.5, 40]" />`,
+  template: `<mgl-map [style]="'mapbox://styles/mapbox/streets-v12'" [zoom]="9" [center]="[-74.5, 40]" />`,
   styles: [
     `
       mgl-map {

apps/showcase/src/app/demo/examples/simple-map.component.ts

@@ -3,7 +3,7 @@ import { MapComponent } from 'ngx-mapbox-gl';
 
 @Component({
   selector: 'showcase-demo',
-  template: `<mgl-map [zoom]="[9]" [center]="[-74.5, 40]" />`,
+  template: `<mgl-map [zoom]="9" [center]="[-74.5, 40]" />`,
   imports: [MapComponent],
   styleUrls: ['./examples.css'],
 })

docs/API.md

@@ -58,9 +58,9 @@ Dynamic:
 - **style**: `Style | string`
 - **center**: `LngLatLike`
 - **maxBounds**: [`LngLatBoundsLike`](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatboundslike)
-- **zoom**: `[number]` The initial zoom level of the map. If zoom is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to 0. [ngx] It's an array in order to be able to force changes (by changing the array ref) because this input can be desync after user manipulation on map.
-- **bearing**: `[number]` The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. If bearing is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to 0. [ngx] It's an array in order to be able to force changes (by changing the array ref) because this input can be desync after user manipulation on map.
-- **pitch**: `[number]` The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-60). If pitch is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to 0. [ngx] It's an array in order to be able to force changes (by changing the array ref) because this input can be desync after user manipulation on map.
+- **zoom**: `[number] | number` The initial zoom level of the map. If zoom is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to 0. [ngx] It can be an array in order to be able to force changes (by changing the array ref) because this input can be desync after user manipulation on map.
+- **bearing**: `[number] | number` The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. If bearing is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to 0. [ngx] It can be an array in order to be able to force changes (by changing the array ref) because this input can be desync after user manipulation on map.
+- **pitch**: `[number] | number` The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-60). If pitch is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to 0. [ngx] It can be an array in order to be able to force changes (by changing the array ref) because this input can be desync after user manipulation on map.
 - **fitBoundsOptions** https://docs.mapbox.com/mapbox-gl-js/api/map/#map#fitbounds
 - **projection** https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setprojection
 - [ngx] **fitBounds**: [`LngLatBoundsLike`](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatboundslike) If set, the map will center on the given coordinates. Dynamic version of **bounds**.

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

@@ -93,9 +93,9 @@ export class MapComponent implements OnChanges, OnDestroy {
   style = input<MapOptions['style']>();
   center = input<MapOptions['center']>();
   maxBounds = input<MapOptions['maxBounds']>();
-  zoom = input<[number]>();
-  bearing = input<[number]>();
-  pitch = input<[number]>();
+  zoom = input<[number] | number>();
+  bearing = input<[number] | number>();
+  pitch = input<[number] | number>();
   // First value goes to options.fitBoundsOptions. Subsequents changes are passed to fitBounds
   fitBoundsOptions = input<MapOptions['fitBoundsOptions']>();
   renderWorldCopies = input<MapOptions['renderWorldCopies']>();
@@ -319,9 +319,10 @@ export class MapComponent implements OnChanges, OnDestroy {
           '[ngx-mapbox-gl] center / zoom / pitch / fitBounds inputs are being overridden by fitScreenCoordinates input',
         );
       }
+      const bearing = this.bearing();
       this.mapService.fitScreenCoordinates(
         changes['fitScreenCoordinates'].currentValue,
-        this.bearing() ? this.bearing()![0] : 0,
+        Array.isArray(bearing) ? bearing[0] : bearing || 0,
         this.movingOptions(),
       );
     }
@@ -342,13 +343,29 @@ export class MapComponent implements OnChanges, OnDestroy {
         !changes['fitScreenCoordinates']) ||
       (changes['pitch'] && !changes['pitch'].isFirstChange())
     ) {
+      const zoom = this.zoom();
+      const center = this.center();
+      const bearing = this.bearing();
+      const pitch = this.pitch();
       this.mapService.move(
         this.movingMethod(),
         this.movingOptions(),
-        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,
+        changes['zoom'] && zoom
+          ? Array.isArray(zoom)
+            ? zoom[0]
+            : zoom
+          : undefined,
+        changes['center'] ? center : undefined,
+        changes['bearing'] && bearing!
+          ? Array.isArray(bearing)
+            ? bearing[0]
+            : bearing
+          : undefined,
+        changes['pitch'] && pitch
+          ? Array.isArray(pitch)
+            ? pitch[0]
+            : pitch
+          : undefined,
       );
     }
   }

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

@@ -35,12 +35,11 @@ export interface SetupMap {
   accessToken?: string;
   mapOptions: Omit<MapOptions, 'bearing' | 'pitch' | 'zoom'> & {
     /**
-     * NOTE: Thoses are arrays in order to be able to imperatively change them if the map is moved manually
-     * TODO: Move thoses to model() maybe
+     * NOTE: Thoses can be arrays in order to be able to imperatively change them if the map is moved manually
      */
-    bearing?: [number];
-    pitch?: [number];
-    zoom?: [number];
+    bearing?: [number] | number;
+    pitch?: [number] | number;
+    zoom?: [number] | number;
   };
   mapEvents: NgxMapEvent;
 }
@@ -110,9 +109,15 @@ export class MapService {
   setup(options: SetupMap) {
     const mapOptions = {
       ...options.mapOptions,
-      bearing: options.mapOptions.bearing?.[0],
-      zoom: options.mapOptions.zoom?.[0],
-      pitch: options.mapOptions.pitch?.[0],
+      bearing: Array.isArray(options.mapOptions.bearing)
+        ? options.mapOptions.bearing[0]
+        : options.mapOptions.bearing,
+      zoom: Array.isArray(options.mapOptions.zoom)
+        ? options.mapOptions.zoom[0]
+        : options.mapOptions.zoom,
+      pitch: Array.isArray(options.mapOptions.pitch)
+        ? options.mapOptions.pitch[0]
+        : options.mapOptions.pitch,
       accessToken: options.accessToken || this.MAPBOX_API_KEY || '',
     };
     this.createMap(mapOptions);