Merge pull request #298 from jnorkus/master

feat: onCameraMove event

Author: dapriett

README.md

@@ -121,7 +121,8 @@ Modify your view by adding the namespace `xmlns:maps="nativescript-google-maps-s
     								tilt="{{ tilt }}" padding="{{ padding }}" mapReady="onMapReady"  
    								markerSelect="onMarkerSelect" markerBeginDragging="onMarkerBeginDragging"
    								markerEndDragging="onMarkerEndDragging" markerDrag="onMarkerDrag"
-   								cameraChanged="onCameraChanged" />
+   								cameraChanged="onCameraChanged" 
+                                cameraMove="onCameraMove" />
   </GridLayout>
 </Page>
 ```
@@ -155,7 +156,8 @@ Event          | Description
 `markerDrag` | Fires repeatedly while a marker is being dragged
 `markerEndDragging` | Fires when a marker ends dragging
 `markerInfoWindowTapped` | Fired on tapping Marker Info Window
-`cameraChanged` | Fired on each camera change
+`cameraChanged` | Fired after the camera has changed
+`cameraMove` | Fired while the camera is moving
 
 
 The property `gMap` gives you access to the raw platform Map Object - see their SDK references for how to use them ( [iOS](https://developers.google.com/maps/documentation/ios-sdk/reference/interface_g_m_s_map_view) | [Android](https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap) )
@@ -188,9 +190,14 @@ function onCameraChanged(args) {
     console.log("Camera changed: " + JSON.stringify(args.camera)); 
 }
 
+function onCameraMove(args) {
+    console.log("Camera moving: "+JSON.stringify(args.camera));
+}
+
 exports.onMapReady = onMapReady;
 exports.onMarkerSelect = onMarkerSelect;
 exports.onCameraChanged = onCameraChanged;
+exports.onCameraMove = onCameraMove;
 ```
 
 ## UI Settings

demo/app/main-page.js

@@ -241,7 +241,12 @@ function onCameraChanged(args) {
         }));
 }
 
+function onCameraMove(args) {
+    console.log("Camera moving: "+JSON.stringify(args.camera));
+}
+
 exports.onMapReady = onMapReady;
 exports.onCoordinateTapped = onCoordinateTapped;
 exports.onMarkerEvent = onMarkerEvent;
 exports.onCameraChanged = onCameraChanged;
+exports.onCameraMove = onCameraMove;

demo/app/main-page.xml

@@ -6,7 +6,8 @@
                       markerSelect="onMarkerEvent" markerBeginDragging="onMarkerEvent"
                       markerEndDragging="onMarkerEvent" markerDrag="onMarkerEvent"
                       markerInfoWindowTapped="onMarkerEvent" coordinateTapped="onCoordinateTapped"
-                      cameraChanged="onCameraChanged">
+                      cameraChanged="onCameraChanged"
+                      cameraMove="onCameraMove">
             <maps:mapView.infoWindowTemplate>
                 <StackLayout orientation="vertical" width="200" height="150" >
                     <Label text="{{title}}" className="title" width="125"   />

ng-demo/app/map/map.component.ts

@@ -60,4 +60,8 @@ export class MapComponent {
         this.lastCamera = JSON.stringify(args.camera);
     }
 
+    onCameraMove(args) {
+        console.log("Camera moving: " + JSON.stringify(args.camera));
+    }
+
 }

ng-demo/app/map/map.html

@@ -5,5 +5,6 @@
              (markerSelect)="onMarkerEvent($event)" (markerBeginDragging)="onMarkerEvent($event)"
              (markerEndDragging)="onMarkerEvent($event)" (markerDrag)="onMarkerEvent($event)"
              (markerInfoWindowTapped)="onMarkerEvent($event)" (coordinateTapped)="onCoordinateTapped($event)"
-             (cameraChanged)="onCameraChanged($event)"></MapView>
+             (cameraChanged)="onCameraChanged($event)"
+             (cameraMove)="onCameraMove($event)"></MapView>
 </GridLayout>

src/map-view-common.ts

@@ -181,6 +181,7 @@ export abstract class MapViewBase extends View implements MapView {
     public static coordinateTappedEvent: string = "coordinateTapped";
     public static coordinateLongPressEvent: string = "coordinateLongPress";
     public static cameraChangedEvent: string = "cameraChanged";
+    public static cameraMoveEvent: string = "cameraMove";
     public static myLocationTappedEvent: string = "myLocationTapped";
 
     public get gMap() {

src/map-view.android.ts

@@ -241,6 +241,21 @@ export class MapView extends MapViewBase {
                     }));
                 }
 
+                if (gMap.setOnCameraMoveListener) {
+                    gMap.setOnCameraMoveListener(new com.google.android.gms.maps.GoogleMap.OnCameraMoveListener({
+                        onCameraMove: () => {
+                            const cameraPosition = gMap.getCameraPosition();
+                            owner.notifyCameraEvent(MapViewBase.cameraMoveEvent, {
+                                latitude: cameraPosition.target.latitude,
+                                longitude: cameraPosition.target.longitude,
+                                zoom: cameraPosition.zoom,
+                                bearing: cameraPosition.bearing,
+                                tilt: cameraPosition.tilt
+                            });
+                        }
+                    }));
+                }
+
                 gMap.setInfoWindowAdapter(new com.google.android.gms.maps.GoogleMap.InfoWindowAdapter({
 
                     getInfoWindow: function (gmsMarker) {

src/map-view.ios.ts

@@ -102,6 +102,17 @@ class MapViewDelegateImpl extends NSObject implements GMSMapViewDelegate {
         }
     }
 
+    public mapViewDidChangeCameraPosition(mapView: GMSMapView, cameraPosition: GMSCameraPosition) {
+        let owner = this._owner.get();
+        owner.notifyCameraEvent(MapViewBase.cameraMoveEvent, {
+            latitude: cameraPosition.target.latitude,
+            longitude: cameraPosition.target.longitude,
+            zoom: cameraPosition.zoom,
+            bearing: cameraPosition.bearing,
+            tilt: cameraPosition.viewingAngle
+        });
+    }
+
     public mapViewDidTapAtCoordinate(mapView: GMSMapView, coordinate: CLLocationCoordinate2D): void {
         let owner = this._owner.get();
         if (owner) {