Merge pull request #440 from kefahB/master

feat: support for NS7

Author: dapriett

README.md

@@ -242,6 +242,22 @@ exports.onCameraMove = onCameraMove;
 ```
 
 ## Custom Info Windows (Beta)
+>[!WARNING]
+> if you are using NS7 `infoWindowTemplate` won't work from a xml file! a temporary solution will be declaring infoWindow Template from the code behind like this :
+
+```ts
+var mapView = null;
+
+export function onMapReady(args) {
+    mapView = args.object;
+    mapView.infoWindowTemplate = `<StackLayout orientation="vertical" width="200" height="150" >
+        <Label text="{{title}}" className="title" width="125"   />
+        <Label text="{{snippet}}" className="snippet" width="125"   />
+        <Label text="{{'LAT: ' + position.latitude}}" className="infoWindowCoordinates"  />
+        <Label text="{{'LON: ' + position.longitude}}" className="infoWindowCoordinates"  />
+    </StackLayout>`;
+}
+```
 
 To use custom marker info windows, define a template in your view like so:
 

demo/app/app.js

@@ -0,0 +1,13 @@
+import {Application} from "@nativescript/core";
+
+declare var GMSServices: any;
+if(Application.ios) {
+  GMSServices.provideAPIKey("AIzaSyAtRVvG3Be3xXiZFR7xp-K-9hy4nZ4hMFs");
+}
+
+Application.run({ moduleName: "main-page" });
+
+/*
+ Do not place any code after the application has been started as it will not
+ be executed on iOS.
+ */

demo/app/app.ts

@@ -1,11 +1,19 @@
-var vmModule = require("./main-view-model");
-var builder = require("ui/builder");
-var mapsModule = require("nativescript-google-maps-sdk");
-var permissions = require("nativescript-permissions");
-var application = require("application");
-var Color = require("color").Color;
+import { HelloWorldModel } from "./main-view-model";
+import * as mapsModule from "nativescript-google-maps-sdk";
+import * as permissions from "nativescript-permissions";
+import {Application, Color} from "@nativescript/core";
 var style = require('./map-style.json');
 
+declare var android: any;
+let vmModule: HelloWorldModel = null;
+const delay = 1000;
+
+export function pageLoaded(args) {
+    var page = args.object;
+    vmModule = new HelloWorldModel();
+    page.bindingContext = vmModule;
+}
+
 function wait(milliSeconds) {
     return new Promise(function(resolve, reject) {
         setTimeout(function(){
@@ -16,7 +24,7 @@ function wait(milliSeconds) {
 
 function requestPermissions() {
   return new Promise(function(resolve, reject) {
-    if (!application.android) return resolve(true);
+    if (!Application.android) return resolve(true);
     permissions.requestPermission([
           android.Manifest.permission.ACCESS_FINE_LOCATION,
           android.Manifest.permission.ACCESS_COARSE_LOCATION],
@@ -47,15 +55,9 @@ function printUISettings(settings) {
   }, undefined, 2));
 }
 
-function pageLoaded(args) {
-    var page = args.object;
-    page.bindingContext = vmModule.mainViewModel;
-}
-exports.pageLoaded = pageLoaded;
-
 var mapView = null;
 
-function onMapReady(args) {
+export function onMapReady(args) {
     mapView = args.object;
 
     console.log("onMapReady");
@@ -123,11 +125,11 @@ function onMapReady(args) {
     mapView.addMarker(marker);
 
     // Custom Info Window Marker
-    marker = new mapsModule.Marker();
+    /*marker = new mapsModule.Marker();
     marker.position = mapsModule.Position.positionFromLatLng(-33.22, 151.20);
     marker.infoWindowTemplate = 'testWindow';
     mapView.addMarker(marker);
-    marker.showInfoWindow();
+    marker.showInfoWindow();*/
 
     requestPermissions().then(function(granted) {
         if(granted) {
@@ -146,67 +148,71 @@ function onMapReady(args) {
         marker.rotation = 45;
         console.log("Removing Point from polyline...", polyline, point);
         polyline.removePoint(point);
-        return wait(3000);
+        return wait(delay);
     }).then(function () {
-        vmModule.mainViewModel.set("mapAnimationsEnabled", false);
-        vmModule.mainViewModel.set("zoom", 9);
-        console.log("Zooming in (no animation)...", vmModule.mainViewModel);
-        return wait(3000);
+        vmModule.set("mapAnimationsEnabled", false);
+        vmModule.set("zoom", 9);
+        console.log("Zooming in (no animation)...", vmModule);
+        return wait(delay);
     }).then(function () {
         polyline.addPoint(mapsModule.Position.positionFromLatLng(-33.33, 151.08));
         console.log("Adding point to Polyline...", polyline);
-        vmModule.mainViewModel.set("padding", [30, 60, 40, 40]);
-        return wait(3000);
+        vmModule.set("padding", [30, 60, 40, 40]);
+        return wait(delay);
     }).then(function () {
         polygon.addPoint(mapsModule.Position.positionFromLatLng(-34.22, 151.20));
         console.log("Adding point to Polygon...", polygon);
-        return wait(3000);
+        return wait(delay);
     }).then(function () {
         var marker = mapView.findMarker(function (marker) {
             return marker.userData.index === 2;
         });
         marker.visible = true;
-        return wait(3000);
+        return wait(delay);
     }).then(function () {
         var marker = mapView.findMarker(function (marker) {
             return marker.userData.index === 2;
         });
         // marker.position = mapsModule.Position.positionFromLatLng(-32.89,151.44);
         marker.anchor = [1, 1];
         marker.alpha = 0.8;
-        return wait(3000);
+        return wait(delay);
     }).then(function () {
         console.log("Changing to dark mode...");
         mapView.setStyle(style);
-        return wait(3000);
-    }).then(function () {
+        return wait(delay);
+    })
+    /*.then(function () {
         var marker = mapView.findMarker(function (marker) {
+            console.log("marker.userData")
+            console.log(marker)
             return marker.userData.index === 1;
         });
         console.log("Removing marker...", marker.userData);
         mapView.removeMarker(marker);
-        return wait(3000);
-    }).then(function () {
+        return wait(delay);
+    })*/
+    .then(function () {
         console.log("Removing all circles...");
         mapView.removeAllCircles();
         console.log("Removing all polylines...");
         mapView.removeAllPolylines();
         console.log("Removing all polygons...");
         mapView.removeAllPolygons();
-      return wait(3000);
+      return wait(delay);
     }).then(function () {
         console.log("Hiding compass...");
         mapView.settings.compassEnabled = false;
         printUISettings(mapView.settings);
-      return wait(3000);
+      return wait(delay);
     }).then(function () {
         console.log("Changing bounds...");
         var bounds = mapsModule.Bounds.fromCoordinates(
             mapsModule.Position.positionFromLatLng(-33.88, 151.16),
             mapsModule.Position.positionFromLatLng(-33.78, 151.24)
         );
         mapView.setViewport(bounds);
-        return wait(3000);
+        return wait(delay);
     }).then(function () {
         var marker = new mapsModule.Marker();
         marker.position = mapsModule.Position.positionFromLatLng(mapView.latitude, mapView.longitude);
@@ -220,18 +226,18 @@ function onMapReady(args) {
     });
 }
 
-function onCoordinateTapped(args) {
+export function onCoordinateTapped(args) {
     console.log("Coordinate Tapped, Lat: " + args.position.latitude + ", Lon: " + args.position.longitude, args);
 }
 
-function onMarkerEvent(args) {
+export function onMarkerEvent(args) {
    console.log("Marker Event: '" + args.eventName
                 + "' triggered on: " + args.marker.title
                 + ", Lat: " + args.marker.position.latitude + ", Lon: " + args.marker.position.longitude, args);
 }
 
 var lastCamera = null;
-function onCameraChanged(args) {
+export function onCameraChanged(args) {
     console.log("Camera changed: "+JSON.stringify(args.camera), JSON.stringify(args.camera) === lastCamera);
     lastCamera = JSON.stringify(args.camera);
     var bounds = mapView.projection.visibleRegion.bounds;
@@ -241,22 +247,14 @@ function onCameraChanged(args) {
         }));
 }
 
-function onCameraMove(args) {
+export function onCameraMove(args) {
     console.log("Camera moving: "+JSON.stringify(args.camera));
 }
 
-function onIndoorBuildingFocused(args) {
+export function onIndoorBuildingFocused(args) {
     console.log("Building focus changed: " + JSON.stringify(args.indoorBuilding));
 }
 
-function onIndoorLevelActivated(args) {
+export function onIndoorLevelActivated(args) {
     console.log("Indoor level changed: " + JSON.stringify(args.activateLevel));
-}
-
-exports.onMapReady = onMapReady;
-exports.onCoordinateTapped = onCoordinateTapped;
-exports.onMarkerEvent = onMarkerEvent;
-exports.onCameraChanged = onCameraChanged;
-exports.onCameraMove = onCameraMove;
-exports.onIndoorBuildingFocused = onIndoorBuildingFocused;
-exports.onIndoorLevelActivated = onIndoorLevelActivated;
+}

demo/app/bundle-config.js

@@ -25,12 +25,18 @@
                 </StackLayout>
             </maps:mapView.infoWindowTemplate>
             <maps:mapView.infoWindowTemplates>
-                <template key="testWindow">
+               <!--<template key="testWindow">
                     <StackLayout orientation="vertical" width="160" height="160" >
                         <Image src="res://icon" stretch="fill"  height="100" width="100" className="infoWindowImage" />
                         <Label text="Let's Begin!" className="title" />
                     </StackLayout>
-                </template>
+                </template>-->
+                <StackLayout orientation="vertical" width="200" height="150" >
+                    <Label text="{{title}}" className="title" width="125"   />
+                    <Label text="{{snippet}}" className="snippet" width="125"   />
+                    <Label text="{{'LAT: ' + position.latitude}}" className="infoWindowCoordinates"  />
+                    <Label text="{{'LON: ' + position.longitude}}" className="infoWindowCoordinates"  />
+                </StackLayout>
             </maps:mapView.infoWindowTemplates>
         </maps:mapView>
     </GridLayout>

demo/app/main-page.js demo/app/main-page.ts

@@ -1,8 +1,9 @@
-var observable = require("data/observable");
-var HelloWorldModel = (function (_super) {
-    __extends(HelloWorldModel, _super);
-    function HelloWorldModel() {
-        _super.call(this);
+import { Observable } from "@nativescript/core";
+
+
+export class HelloWorldModel extends Observable {
+    constructor() {
+        super();
         this.set("latitude", -33.86);
         this.set("longitude", 151.20);
         this.set("zoom", 8);
@@ -13,8 +14,4 @@ var HelloWorldModel = (function (_super) {
         this.set("padding", [80, 40, 40, 40]);
         this.set("mapAnimationsEnabled", true);
     }
-
-    return HelloWorldModel;
-})(observable.Observable);
-exports.HelloWorldModel = HelloWorldModel;
-exports.mainViewModel = new HelloWorldModel();
+}

demo/app/main-page.xml

@@ -0,0 +1,11 @@
+import { NativeScriptConfig } from '@nativescript/core'
+
+export default {
+  id: 'org.nativescript.demo',
+  appResourcesPath: 'app/App_Resources',
+  android: {
+    v8Flags: '--expose_gc',
+    markingMode: 'none',
+  },
+  appPath: 'app',
+} as NativeScriptConfig

demo/app/main-view-model.js demo/app/main-view-model.ts

@@ -1,24 +1,22 @@
 {
-  "nativescript": {
-    "id": "org.nativescript.demo",
-    "tns-ios": {
-      "version": "6.2.0"
-    },
-    "tns-android": {
-      "version": "6.2.0"
-    }
-  },
   "dependencies": {
-    "nativescript-google-maps-sdk": "../src",
+    "nativescript-google-maps-sdk": "file:../src",
     "nativescript-permissions": "^1.2.3",
-    "tns-core-modules": "~6.2.0"
+    "@nativescript/core": "~7.0.12"
   },
   "devDependencies": {
+    "@nativescript/android": "7.0.1",
+    "@nativescript/ios": "7.0.4",
+    "@nativescript/types": "^7.0.4",
+    "@nativescript/webpack": "~3.0.0",
     "babel-traverse": "^6.26.0",
     "babel-types": "^6.26.0",
     "babylon": "6.7.0",
+    "eslint": "^7.5.0",
     "filewalker": "0.1.2",
     "lazy": "1.0.11",
-    "nativescript-dev-webpack": "~1.3.0"
-  }
+    "ts-node": "^9.0.0",
+    "typescript": "~3.9.0"
+  },
+  "main": "app.js"
 }

demo/nativescript.config.ts

@@ -0,0 +1 @@
+/// <reference path="./node_modules/@nativescript/types/index.d.ts" />