#159 Return the native Mapbox view when show is invoked

CHANGELOG.md

@@ -7,6 +7,7 @@
 
 - Feature Request: Update to sdk to 5.1.2+ [\#156](https://github.com/EddyVerbruggen/nativescript-mapbox/issues/156)
 - Document the new TRAFFIC_DAY and TRAFFIC_NIGHT styles [\#158](https://github.com/EddyVerbruggen/nativescript-mapbox/issues/158)
+- Return the native Mapbox view when show is invoked [\#159](https://github.com/EddyVerbruggen/nativescript-mapbox/issues/159)
 
 
 ## [3.0.3](https://github.com/EddyVerbruggen/nativescript-mapbox/tree/3.0.3) (2017-08-08)

README.md

@@ -134,6 +134,11 @@ Open `main-page.[js|ts]` and add this (see [`addMarkers`](#addmarkers) further b
 var mapbox = require("nativescript-mapbox");
 
 function onMapReady(args) {
+  // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
+  var nativeMapView = args.ios ? args.ios : args.android;
+  console.log("Mapbox onMapReady for " + (args.ios ? "iOS" : "Android") + ", native object received: " + nativeMapView);
+
+  // .. or use the convenience methods exposed on args.map, for instance:
   args.map.addMarkers([
     {
       lat: 52.3602160,
@@ -219,8 +224,8 @@ Check out the usage details on the functions below.
       }
     ]
   }).then(
-      function(result) {
-        console.log("Mapbox show done");
+      function(showResult) {
+        console.log("Mapbox show done for " + (showResult.ios ? "iOS" : "Android") + ", native object received: " + (showResult.ios ? showResult.ios : showResult.android));
       },
       function(error) {
         console.log("mapbox show error: " + error);

demo/app/main-page.ts

@@ -12,6 +12,12 @@ export function pageLoaded(args: observable.EventData) {
 
 function onMapReady(args) {
   let map: MapboxViewApi = args.map;
+
+  // you can tap into the native MapView objects (MGLMapView for iOS and com.mapbox.mapboxsdk.maps.MapView for Android)
+  const nativeMapView = args.ios ? args.ios : args.android;
+  console.log(`Mapbox onMapReady for ${args.ios ? "iOS" : "Android"}, native object received: ${nativeMapView}`);
+
+  // .. or use the convenience methods exposed on args.map, for instance:
   map.addMarkers([
     {
       id: 2,

demo/app/main-view-model.ts

@@ -55,8 +55,8 @@ export class HelloWorldModel extends Observable {
         }
       ]
     }).then(
-        () => {
-          console.log("Mapbox show done");
+        (showResult) => {
+          console.log(`Mapbox show done for ${showResult.ios ? "iOS" : "Android"}, native object received: ${showResult.ios ? showResult.ios : showResult.android}`);
         },
         (error: string) => {
           console.log("mapbox show error: " + error);
@@ -148,7 +148,7 @@ export class HelloWorldModel extends Observable {
         id: 3,
         lat: 52.3602160,
         lng: 5,
-        onTap: () => { console.log("Title-less marker tapped!") },
+        onTap: () => { console.log("Titleless marker tapped!"); },
         icon: 'http://www.bme.be/wp-content/uploads/2014/04/marker.png'
       },
       {

demo/package.json

@@ -1,15 +1,15 @@
 {
   "nativescript": {
     "id": "org.nativescript.mapbox",
-    "tns-ios": {
-      "version": "3.1.0"
-    },
     "tns-android": {
       "version": "3.1.1"
+    },
+    "tns-ios": {
+      "version": "3.1.0"
     }
   },
   "dependencies": {
-    "nativescript-mapbox": "../src",
+    "nativescript-mapbox": "file:///Users/eddyverbruggen/sandboxes/nativescript-mapbox/src",
     "nativescript-unit-test-runner": "^0.3.0",
     "tns-core-modules": "~3.1.0"
   },

src/mapbox.android.ts

@@ -13,7 +13,7 @@ import {
   MapboxCommon,
   MapboxViewBase,
   MapStyle, OfflineRegion, SetCenterOptions, SetTiltOptions, SetViewportOptions, SetZoomLevelOptions, ShowOptions,
-  Viewport
+  Viewport, AddExtrusionOptions
 } from "./mapbox.common";
 
 // Export the enums for devs not using TS
@@ -77,7 +77,7 @@ export class MapboxView extends MapboxViewBase {
                   });
                 }
 
-                this.notifyMapReady();
+                this.notify({ eventName: MapboxViewBase.mapReadyEvent, object: this, map: this, android: this.mapView});
               }
             })
         );
@@ -185,7 +185,9 @@ const _getClickedMarkerDetails = (clicked) => {
     let cached = _markers[m];
     if (cached.lat === clicked.getPosition().getLatitude() &&
         cached.lng === clicked.getPosition().getLongitude() &&
+        // tslint:disable-next-line:triple-equals
         cached.title == clicked.getTitle() && // == because of null vs undefined
+        // tslint:disable-next-line:triple-equals
         cached.subtitle == clicked.getSnippet()) {
       return cached;
     }
@@ -420,8 +422,6 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
                 onMapReady: (mbMap) => {
                   _mapbox.mapboxMap = mbMap;
                   _mapbox.mapView.mapboxMap = mbMap;
-                  // mapboxMap.setStyleUrl(mapbox._getMapStyle(settings.style));
-                  // mapboxMap.setStyleUrl(com.mapbox.mapboxsdk.constants.Style.DARK);
 
                   _polylines = [];
                   _markers = [];
@@ -432,7 +432,9 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
                       _showLocation(_mapbox.mapView);
                     });
                   }
-                  resolve();
+                  resolve({
+                    android: _mapbox.mapView
+                  });
                 }
               })
           );
@@ -1052,6 +1054,34 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
     });
   }
 
+  addExtrusion(options: AddExtrusionOptions, nativeMap?): Promise<any> {
+    return new Promise((resolve, reject) => {
+      try {
+        const theMap = nativeMap || _mapbox;
+
+        // Create fill extrusion layer
+        const fillExtrusionLayer = new com.mapbox.mapboxsdk.style.layers.FillExtrusionLayer("3d-buildings", "composite");
+        fillExtrusionLayer.setSourceLayer("building");
+        fillExtrusionLayer.setFilter(com.mapbox.mapboxsdk.style.layers.Filter.eq("extrude", "true"));
+        fillExtrusionLayer.setMinZoom(15);
+
+        // Set data-driven styling properties
+        fillExtrusionLayer.setProperties(
+            com.mapbox.mapboxsdk.style.layers.PropertyFactory.fillExtrusionColor(android.graphics.Color.LTGRAY),
+            com.mapbox.mapboxsdk.style.layers.PropertyFactory.fillExtrusionHeight(com.mapbox.mapboxsdk.style.functions.Function.property("height", new com.mapbox.mapboxsdk.style.functions.stops.IdentityStops())),
+            com.mapbox.mapboxsdk.style.layers.PropertyFactory.fillExtrusionBase(com.mapbox.mapboxsdk.style.functions.Function.property("min_height", new com.mapbox.mapboxsdk.style.functions.stops.IdentityStops())),
+            com.mapbox.mapboxsdk.style.layers.PropertyFactory.fillExtrusionOpacity(new java.lang.Float(0.6))
+        );
+
+        theMap.mapboxMap.addLayer(fillExtrusionLayer);
+        resolve();
+      } catch (ex) {
+        console.log("Error in mapbox.addExtrusion: " + ex);
+        reject(ex);
+      }
+    });
+  }
+
   addGeoJsonClustered(options: AddGeoJsonClusteredOptions, nativeMap?): Promise<any> {
     return new Promise((resolve, reject) => {
       try {

src/mapbox.common.ts

@@ -148,6 +148,10 @@ export interface AddGeoJsonClusteredOptions {
   clusters?: Array<MapboxCluster>;
 }
 
+export interface AddExtrusionOptions {
+
+}
+
 export interface OfflineRegion {
   name: string;
   bounds: Bounds;
@@ -229,6 +233,11 @@ export interface ShowOptions {
   markers?: MapboxMarker[];
 }
 
+export interface ShowResult {
+  ios: any /* MGLMapView */;
+  android: any /* com.mapbox.mapboxsdk.maps.MapView */;
+}
+
 export interface AnimateCameraOptions {
   target: LatLng;
   /**
@@ -250,7 +259,7 @@ export interface MapboxCommonApi {
 }
 
 export interface MapboxApi {
-  show(options: ShowOptions): Promise<any>;
+  show(options: ShowOptions): Promise<ShowResult>;
   hide(): Promise<any>;
   unhide(): Promise<any>;
   destroy(nativeMap?: any): Promise<any>;
@@ -288,6 +297,8 @@ export interface MapboxApi {
   deleteOfflineRegion(options: DeleteOfflineRegionOptions): Promise<any>;
 
   addGeoJsonClustered(options: AddGeoJsonClusteredOptions): Promise<any>;
+
+  // addExtrusion(options: AddExtrusionOptions): Promise<any>;
 }
 
 export abstract class MapboxCommon implements MapboxCommonApi {
@@ -483,14 +494,10 @@ delayProperty.register(MapboxViewCommonBase);
 
 export abstract class MapboxViewBase extends MapboxViewCommonBase {
 
-  private static mapReadyEvent: string = "mapReady";
+  static mapReadyEvent: string = "mapReady";
 
   protected config: any = {};
 
-  protected notifyMapReady(): void {
-    this.notify({ eventName: MapboxViewBase.mapReadyEvent, object: this, map: this });
-  }
-
   get ios(): any {
     return this.nativeView;
   }

src/mapbox.ios.ts

@@ -11,7 +11,7 @@ import {
   MapboxCommon,
   MapboxViewBase,
   MapStyle, OfflineRegion, SetCenterOptions, SetTiltOptions, SetViewportOptions, SetZoomLevelOptions, ShowOptions,
-  Viewport
+  Viewport, AddExtrusionOptions
 } from "./mapbox.common";
 import { Color } from "tns-core-modules/color";
 
@@ -102,7 +102,7 @@ export class MapboxView extends MapboxViewBase {
         MGLAccountManager.setAccessToken(settings.accessToken);
         this.mapView = MGLMapView.alloc().initWithFrameStyleURL(CGRectMake(0, 0, this.nativeView.frame.size.width, this.nativeView.frame.size.height), _getMapStyle(settings.style));
         this.mapView.delegate = this.delegate = MGLMapViewDelegateImpl.new().initWithCallback(() => {
-          this.notifyMapReady();
+          this.notify({ eventName: MapboxViewBase.mapReadyEvent, object: this, map: this, ios: this.mapView});
         });
         _setMapboxMapOptions(this.mapView, settings);
         _markers = [];
@@ -149,8 +149,10 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
         _setMapboxMapOptions(_mapbox.mapView, settings);
 
         _mapbox.mapView.delegate = _delegate = MGLMapViewDelegateImpl.new().initWithCallback(
-            () => {
-              resolve();
+            (mapView: MGLMapView) => {
+              resolve({
+                ios: mapView
+              });
             }
         );
 
@@ -721,7 +723,25 @@ export class Mapbox extends MapboxCommon implements MapboxApi {
     });
   }
 
-  addGeoJsonClustered(options: AddGeoJsonClusteredOptions, nativeMap?): Promise<any> {
+  addExtrusion(options: AddExtrusionOptions, nativeMap?): Promise<any> {
+    return new Promise((resolve, reject) => {
+      try {
+        let theMap: MGLMapView = nativeMap || _mapbox.mapView;
+
+        if (!theMap) {
+          reject("No map has been loaded");
+          return;
+        }
+
+        resolve();
+      } catch (ex) {
+        console.log("Error in mapbox.deleteOfflineRegion: " + ex);
+        reject(ex);
+      }
+    });
+  }
+
+        addGeoJsonClustered(options: AddGeoJsonClusteredOptions, nativeMap?): Promise<any> {
     throw new Error('Method not implemented.');
   }
 }
@@ -807,16 +827,16 @@ class MGLMapViewDelegateImpl extends NSObject implements MGLMapViewDelegate {
     return <MGLMapViewDelegateImpl>super.new();
   }
 
-  private mapLoadedCallback: () => void;
+  private mapLoadedCallback: (mapView: MGLMapView) => void;
 
-  public initWithCallback(mapLoadedCallback: () => void): MGLMapViewDelegateImpl {
+  public initWithCallback(mapLoadedCallback: (mapView: MGLMapView) => void): MGLMapViewDelegateImpl {
     this.mapLoadedCallback = mapLoadedCallback;
     return this;
   }
 
   mapViewDidFinishLoadingMap(mapView: MGLMapView): void {
     if (this.mapLoadedCallback !== undefined) {
-      this.mapLoadedCallback();
+      this.mapLoadedCallback(mapView);
     }
   }
 
@@ -900,9 +920,13 @@ class MGLMapViewDelegateImpl extends NSObject implements MGLMapViewDelegate {
     for (let m in _markers) {
       let cached = _markers[m];
       // don't compare lat/lng types as they're not the same (same for (sub)title, they may be null vs undefined)
+      // tslint:disable-next-line:triple-equals
       if (cached.lat == tapped.coordinate.latitude &&
+          // tslint:disable-next-line:triple-equals
           cached.lng == tapped.coordinate.longitude &&
+          // tslint:disable-next-line:triple-equals
           cached.title == tapped.title &&
+          // tslint:disable-next-line:triple-equals
           cached.subtitle == tapped.subtitle) {
         return cached;
       }

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-mapbox",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Native Maps, by Mapbox.",
   "main": "mapbox",
   "typings": "index.d.ts",
@@ -17,7 +17,7 @@
     }
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc -skipLibCheck",
     "demo.ios": "npm run preparedemo && cd ../demo && tns platform remove ios && tns run ios --emulator",
     "demo.ios.device": "npm run preparedemo && cd ../demo && tns platform remove ios && tns run ios",
     "demo.android": "npm run preparedemo && cd ../demo && tns platform remove android && tns run android --justlaunch",
@@ -26,7 +26,7 @@
     "setup": "npm i && cd ../demo && npm i && cd ../src && npm run build",
     "tslint": "tslint *.ts",
     "tslint.demo": "tslint ../demo/app/*.ts",
-    "test": "npm run build && npm run tslint && npm run tslint.demo && cd ../demo && tns build ios",
+    "test": "npm i && npm run build && npm run tslint && npm run tslint.demo && cd ../demo && tns build android",
     "development.setup": "npm run setup && npm link && cd ../demo && npm link nativescript-mapbox && cd ../src",
     "generate.typings.ios": "cd ../demo && TNS_DEBUG_METADATA_PATH=\"$(pwd)/metadata\" tns build ios && TNS_TYPESCRIPT_DECLARATIONS_PATH=\"$(pwd)/typings\" tns build ios && echo 'Now look for your library typings in demo/typings!'"
   },