diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b2dc6f..ec7ace7 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/README.md b/README.md index 010e80f..fe29354 100755 --- a/README.md +++ b/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); diff --git a/demo/app/main-page.ts b/demo/app/main-page.ts index 6a6b85a..8fb551c 100644 --- a/demo/app/main-page.ts +++ b/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, diff --git a/demo/app/main-view-model.ts b/demo/app/main-view-model.ts index ed471e7..403afbe 100644 --- a/demo/app/main-view-model.ts +++ b/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' }, { diff --git a/demo/package.json b/demo/package.json index 5a63e2d..4a28083 100644 --- a/demo/package.json +++ b/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" }, diff --git a/src/mapbox.android.ts b/src/mapbox.android.ts index 80fe62c..d5f303b 100755 --- a/src/mapbox.android.ts +++ b/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 { + 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 { return new Promise((resolve, reject) => { try { diff --git a/src/mapbox.common.ts b/src/mapbox.common.ts index fd7e33e..5796ef6 100755 --- a/src/mapbox.common.ts +++ b/src/mapbox.common.ts @@ -148,6 +148,10 @@ export interface AddGeoJsonClusteredOptions { clusters?: Array; } +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; + show(options: ShowOptions): Promise; hide(): Promise; unhide(): Promise; destroy(nativeMap?: any): Promise; @@ -288,6 +297,8 @@ export interface MapboxApi { deleteOfflineRegion(options: DeleteOfflineRegionOptions): Promise; addGeoJsonClustered(options: AddGeoJsonClusteredOptions): Promise; + + // addExtrusion(options: AddExtrusionOptions): Promise; } 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; } diff --git a/src/mapbox.ios.ts b/src/mapbox.ios.ts index e8dd51c..2873838 100755 --- a/src/mapbox.ios.ts +++ b/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 { + addExtrusion(options: AddExtrusionOptions, nativeMap?): Promise { + 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 { throw new Error('Method not implemented.'); } } @@ -807,16 +827,16 @@ class MGLMapViewDelegateImpl extends NSObject implements MGLMapViewDelegate { return 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; } diff --git a/src/package.json b/src/package.json index 037e7cf..181e879 100644 --- a/src/package.json +++ b/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!'" },