Merge pull request #242 from evanfuture/feature/add-minmaxzoom-orig

Add min/max zoom functionality.

Author: dapriett

demo/app/main-page.xml

@@ -1,8 +1,8 @@
 <Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:maps="nativescript-google-maps-sdk" loaded="pageLoaded">
     <GridLayout>
         <maps:mapView latitude="{{ latitude }}" longitude="{{ longitude }}"
-                      zoom="{{ zoom }}" bearing="{{ bearing }}" mapAnimationsEnabled="{{ mapAnimationsEnabled }}"
-                      tilt="{{ tilt }}" i-padding="50,50,50,50" padding="{{ padding }}" mapReady="onMapReady" 
+                      zoom="{{ zoom }}" minZoom="{{ minZoom }}" maxZoom="{{ maxZoom }}" bearing="{{ bearing }}" mapAnimationsEnabled="{{ mapAnimationsEnabled }}"
+                      tilt="{{ tilt }}" i-padding="50,50,50,50" padding="{{ padding }}" mapReady="onMapReady"
                       markerSelect="onMarkerEvent" markerBeginDragging="onMarkerEvent"
                       markerEndDragging="onMarkerEvent" markerDrag="onMarkerEvent"
                       markerInfoWindowTapped="onMarkerEvent" coordinateTapped="onCoordinateTapped"
@@ -25,4 +25,4 @@
             </maps:mapView.infoWindowTemplates>
         </maps:mapView>
     </GridLayout>
-</Page>
+</Page>

demo/app/main-view-model.js

@@ -6,6 +6,8 @@ var HelloWorldModel = (function (_super) {
         this.set("latitude", -33.86);
         this.set("longitude", 151.20);
         this.set("zoom", 8);
+        this.set("minZoom", 0);
+        this.set("maxZoom", 22);
         this.set("bearing", 180);
         this.set("tilt", 35);
         this.set("padding", [80, 40, 40, 40]);

map-view-common.ts

@@ -32,6 +32,10 @@ function onMapPropertyChanged(mapView: MapViewBase) {
     if (!mapView.processingCameraEvent) mapView.updateCamera();
 }
 
+function onSetMinZoomMaxZoom(mapView: MapViewBase) {
+    mapView.setMinZoomMaxZoom();
+}
+
 function onPaddingPropertyChanged(mapView: MapViewBase) {
     mapView.updatePadding();
 }
@@ -144,6 +148,8 @@ export abstract class MapViewBase extends View implements MapView {
     public longitude: number;
     public bearing: number;
     public zoom: number;
+    public minZoom: number;
+    public maxZoom: number;
     public tilt: number;
     public padding: number[];
     public mapAnimationsEnabled: boolean;
@@ -259,6 +265,8 @@ export abstract class MapViewBase extends View implements MapView {
 
     public abstract updatePadding(): void;
 
+    public abstract setMinZoomMaxZoom(): void;
+
     public abstract addMarker(...markers: Marker[]): void;
 
     public abstract removeMarker(...markers: Marker[]): void;
@@ -360,6 +368,12 @@ bearingProperty.register(MapViewBase);
 export const zoomProperty = new Property<MapViewBase, number>({ name: 'zoom', defaultValue: 0, valueChanged: onMapPropertyChanged });
 zoomProperty.register(MapViewBase);
 
+export const minZoomProperty = new Property<MapViewBase, number>({ name: 'minZoom', defaultValue: 0, valueChanged: onSetMinZoomMaxZoom });
+minZoomProperty.register(MapViewBase);
+
+export const maxZoomProperty = new Property<MapViewBase, number>({ name: 'maxZoom', defaultValue: 22, valueChanged: onSetMinZoomMaxZoom });
+maxZoomProperty.register(MapViewBase);
+
 export const tiltProperty = new Property<MapViewBase, number>({ name: 'tilt', defaultValue: 0, valueChanged: onMapPropertyChanged });
 tiltProperty.register(MapViewBase);
 

map-view.android.ts

@@ -85,6 +85,7 @@ export class MapView extends MapViewBase {
             onMapReady: (gMap) => {
                 var owner = that.get();
                 owner._gMap = gMap;
+                owner.setMinZoomMaxZoom();
                 owner.updatePadding();
                 if (owner._pendingCameraUpdate) {
                     owner.updateCamera();
@@ -352,6 +353,13 @@ export class MapView extends MapViewBase {
         if (this._gMap) this._gMap.setMyLocationEnabled(value);
     }
 
+    setMinZoomMaxZoom() {
+        if (this.gMap) {
+            this.gMap.setMinZoomPreference(this.minZoom);
+            this.gMap.setMaxZoomPreference(this.maxZoom);
+        }
+    }
+
     addMarker(...markers: Marker[]) {
         markers.forEach(marker => {
             marker.android = this.gMap.addMarker(marker.android);

map-view.d.ts

@@ -17,6 +17,8 @@ export class MapView extends View {
     public latitude: number;
     public longitude: number;
     public zoom: number;
+    public minZoom: number;
+    public maxZoom: number;
     public bearing: number;
     public tilt: number;
     public padding: number[];
@@ -52,6 +54,8 @@ export class MapView extends View {
 
     public myLocationEnabled: boolean;
 
+    public setMinZoomMaxZoom(): void;
+
     public addMarker(...markers: Marker[]): void;
 
     public removeMarker(...markers: Marker[]): void;

map-view.ios.ts

@@ -301,6 +301,10 @@ export class MapView extends MapViewBase {
         if (this.nativeView) this.nativeView.myLocationEnabled = value;
     }
 
+    setMinZoomMaxZoom() {
+        this.gMap.setMinZoomMaxZoom(this.minZoom, this.maxZoom);
+    }
+
     addMarker(...markers: Marker[]) {
         markers.forEach(marker => {
             marker.ios.map = this.gMap;

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

@@ -17,6 +17,8 @@ export class MapComponent {
     latitude =  -33.86;
     longitude = 151.20;
     zoom = 8;
+    minZoom = 0;
+    maxZoom = 22;
     bearing = 0;
     tilt = 0;
     padding = [40, 40, 40, 40];

ng-demo/app/map/map.html

@@ -1,9 +1,9 @@
 <GridLayout>
     <MapView #mapView [latitude]="latitude" [longitude]="longitude"
-             [zoom]="zoom" [bearing]="bearing"
+             [zoom]="zoom" [minZoom]="minZoom" [maxZoom]="maxZoom" [bearing]="bearing"
              [tilt]="tilt" i-padding="50,50,50,50" [padding]="padding" (mapReady)="onMapReady($event)"
              (markerSelect)="onMarkerEvent($event)" (markerBeginDragging)="onMarkerEvent($event)"
              (markerEndDragging)="onMarkerEvent($event)" (markerDrag)="onMarkerEvent($event)"
              (markerInfoWindowTapped)="onMarkerEvent($event)" (coordinateTapped)="onCoordinateTapped($event)"
              (cameraChanged)="onCameraChanged($event)"></MapView>
-</GridLayout>
+</GridLayout>