diff --git a/Podfile.lock b/Podfile.lock index 5339cd2..85687a5 100644 --- a/Podfile.lock +++ b/Podfile.lock @@ -9,4 +9,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: aca95d0d8ce7ca2fd82e83e2cfaaa83799fe5b7a -COCOAPODS: 1.3.1 +COCOAPODS: 1.4.0 diff --git a/README.md b/README.md index 962966b..8694433 100644 --- a/README.md +++ b/README.md @@ -7,13 +7,23 @@ expose all possible API's of the SDK. See the [official](https://www.mapbox.com/ Mapbox SDK in Axway Hyperloop +## Initialize + +Use your Mapbox access-token to initialize the Mapbox module: +```js +import { Mapbox } from 'titanium-mapbox'; + +Mapbox.initialize('YOUR_MAPBOX_ACCESS_TOKEN'); +``` + ## Features ### View ```js -import MapBox from 'ti.mapbox'; -const mapView = MapBox.createView({ +import { MapView } from 'titanium-mapbox'; + +const mapView = new MapView({ region: { latitude: 52.020388, longitude: 9.580078, @@ -27,7 +37,9 @@ myWindow.add(mapView.getInstance()); ### Annotation ```js -const annotation = Mapbox.createAnnotation({ +import { Annotation } from 'titanium-mapbox'; + +const annotation = new Annotation({ latitude: 52.020388, longitude: 9.580078 }); @@ -35,15 +47,12 @@ const annotation = Mapbox.createAnnotation({ mapView.addAnnotation(annotation.getInstance()); ``` +See a full example in `Resources/app.js`! + ## iOS Configuration -Add the following tags to your plist-section of the tiapp.xml and change `YOUR_MAPBOX_ACCESS_TOKEN` to your -actual access token +Add the following tags to your plist-section to alloy Geolocation access: ```xml - -MGLMapboxAccessToken -YOUR_MAPBOX_ACCESS_TOKEN - NSLocationWhenInUseUsageDescription Can we access your location while using the app? @@ -52,13 +61,16 @@ actual access token ``` ## Android Configuration -1. Place your access token in `Resources/android/ti.mapbox/index.js` -2. Ensure you have installed at least Gradle 4.1 by running `brew install gradle` and `brew update gradle` -3. Run gradle to pull down the necessary android libraries into `platform/android`: +1. Ensure you have installed at least Gradle 4.1 by running +```sh +brew install gradle +brew update gradle +``` +2. Run gradle to pull down the necessary android libraries into `platform/android` (Alloy: `app/platform/android`): ```sh gradle getDeps ``` -4. Now build! +3. Now build! ```sh appc run -p android ``` diff --git a/Resources/android/ti.mapbox/annotation.js b/Resources/android/ti.mapbox/annotation.js deleted file mode 100644 index 47d6dd6..0000000 --- a/Resources/android/ti.mapbox/annotation.js +++ /dev/null @@ -1,17 +0,0 @@ -var annotation, - MarkerOptions = require('com.mapbox.mapboxsdk.annotations.MarkerOptions'), - LatLng = require('com.mapbox.mapboxsdk.geometry.LatLng'); - -function Annotation(args) { - if (!args.latitude || !args.longitude) { - throw 'Missing latitude / longitude'; - } - - annotation = new MarkerOptions().setTitle(args.title).setPosition(new LatLng(args.latitude, args.longitude)); -} - -Annotation.prototype.getInstance = function() { - return annotation; -}; - -module.exports = Annotation; diff --git a/Resources/android/ti.mapbox/index.js b/Resources/android/ti.mapbox/index.js deleted file mode 100644 index d262bcb..0000000 --- a/Resources/android/ti.mapbox/index.js +++ /dev/null @@ -1,18 +0,0 @@ -var View = require('./view'); -var Annotation = require('./annotation'); -var Mapbox = require('com.mapbox.mapboxsdk.Mapbox'); -var Activity = require('android.app.Activity'); -var initialized = false; - -exports.createView = function(args) { - // lazily init with access token - if (!initialized) { - Mapbox.getInstance(new Activity(Ti.Android.currentActivity), 'YOUR ACCESS TOKEN HERE!'); - initialized = true; - } - return new View(args); -}; - -exports.createAnnotation = function(args) { - return new Annotation(args); -}; diff --git a/Resources/android/ti.mapbox/view.js b/Resources/android/ti.mapbox/view.js deleted file mode 100644 index fba1186..0000000 --- a/Resources/android/ti.mapbox/view.js +++ /dev/null @@ -1,42 +0,0 @@ -var mapView, - Activity = require('android.app.Activity'), - MapView = require('com.mapbox.mapboxsdk.maps.MapView'), - MapboxMapOptions = require('com.mapbox.mapboxsdk.maps.MapboxMapOptions'), - LatLng = require('com.mapbox.mapboxsdk.geometry.LatLng'), - LatLngBounds = require('com.mapbox.mapboxsdk.geometry.LatLngBounds'), - CameraPositionBuilder = require('com.mapbox.mapboxsdk.camera.CameraPosition.Builder'), - OnMapReadyCallback = require('com.mapbox.mapboxsdk.maps.OnMapReadyCallback'); - -function View(args) { - var options = new MapboxMapOptions(); - - if (args.region && args.region.latitude && args.region.longitude) { - var latLong = new LatLng(args.region.latitude, args.region.longitude); - var cameraBuilder = new CameraPositionBuilder().zoom(args.region.zoomLevel || 7).bearing(args.region.direction || 0).target(latLong); - options = options.camera(cameraBuilder.build()); - } - mapView = new MapView(new Activity(Ti.Android.currentActivity), options); -} - -View.prototype.setVisibleCoordinateBounds = function(args) { - mapView.getMapAsync(new OnMapReadyCallback({ - onMapReady: function(mapboxMap) { - var bounds = LatLngBounds.from(args.northEast.latitude, args.northEast.longitude, args.southWest.latitude, args.southWest.longitude); - mapboxMap.setLatLngBoundsForCameraTarget(bounds); - } - })); -}; - -View.prototype.addAnnotation = function(annotation) { - mapView.getMapAsync(new OnMapReadyCallback({ - onMapReady: function(mapboxMap) { - mapboxMap.addMarker(annotation); - } - })); -}; - -View.prototype.getInstance = function() { - return mapView; -}; - -module.exports = View; diff --git a/Resources/android/titanium-mapbox/annotation.js b/Resources/android/titanium-mapbox/annotation.js new file mode 100644 index 0000000..e79705f --- /dev/null +++ b/Resources/android/titanium-mapbox/annotation.js @@ -0,0 +1,16 @@ +const MarkerOptions = require('com.mapbox.mapboxsdk.annotations.MarkerOptions'); +const LatLng = require('com.mapbox.mapboxsdk.geometry.LatLng'); + +export default class Annotation { + constructor(args) { + if (!args.latitude || !args.longitude) { + throw new Error('Missing latitude / longitude'); + } + + this.annotation = new MarkerOptions().setTitle(args.title).setPosition(new LatLng(args.latitude, args.longitude)); + } + + getInstance() { + return this.annotation; + } +}; diff --git a/Resources/android/titanium-mapbox/index.js b/Resources/android/titanium-mapbox/index.js new file mode 100644 index 0000000..2b67f76 --- /dev/null +++ b/Resources/android/titanium-mapbox/index.js @@ -0,0 +1,14 @@ +import MapView from './mapview'; +import Annotation from './annotation'; + +const NativeMapbox = require('com.mapbox.mapboxsdk.Mapbox'); +const Activity = require('android.app.Activity'); + +class Mapbox { + static initialize(apiKey) { + if (!apiKey) { throw new Error('No API-key provided!'); } + NativeMapbox.getInstance(new Activity(Ti.Android.currentActivity), apiKey); + } +} + +export { Annotation, MapView, Mapbox } diff --git a/Resources/android/titanium-mapbox/mapview.js b/Resources/android/titanium-mapbox/mapview.js new file mode 100644 index 0000000..1a77058 --- /dev/null +++ b/Resources/android/titanium-mapbox/mapview.js @@ -0,0 +1,41 @@ +const Activity = require('android.app.Activity'); +const NativeMapView = require('com.mapbox.mapboxsdk.maps.MapView'); +const MapboxMapOptions = require('com.mapbox.mapboxsdk.maps.MapboxMapOptions'); +const LatLng = require('com.mapbox.mapboxsdk.geometry.LatLng'); +const LatLngBounds = require('com.mapbox.mapboxsdk.geometry.LatLngBounds'); +const CameraPositionBuilder = require('com.mapbox.mapboxsdk.camera.CameraPosition.Builder'); +const OnMapReadyCallback = require('com.mapbox.mapboxsdk.maps.OnMapReadyCallback'); + +export default class MapView { + constructor(args) { + let options = new MapboxMapOptions(); + + if (args.region && args.region.latitude && args.region.longitude) { + const latLong = new LatLng(args.region.latitude, args.region.longitude); + const cameraBuilder = new CameraPositionBuilder().zoom(args.region.zoomLevel || 7).bearing(args.region.direction || 0).target(latLong); + options = options.camera(cameraBuilder.build()); + } + this.mapView = new NativeMapView(new Activity(Ti.Android.currentActivity), options); + } + + set visibleCoordinateBounds(args) { + this.mapView.getMapAsync(new OnMapReadyCallback({ + onMapReady: (mapboxMap) => { + const bounds = LatLngBounds.from(args.northEast.latitude, args.northEast.longitude, args.southWest.latitude, args.southWest.longitude); + mapboxMap.setLatLngBoundsForCameraTarget(bounds); + } + })); + } + + addAnnotation(annotation) { + this.mapView.getMapAsync(new OnMapReadyCallback({ + onMapReady: (mapboxMap) => { + mapboxMap.addMarker(annotation); + } + })); + } + + getInstance() { + return this.mapView; + } +} diff --git a/Resources/app.js b/Resources/app.js index 70afe41..5a71524 100644 --- a/Resources/app.js +++ b/Resources/app.js @@ -1,13 +1,15 @@ -// Include our mapbox module (from "ti.mapbox/*.js") -var Mapbox = require('ti.mapbox'); +import { Mapbox, MapView, Annotation } from 'titanium-mapbox'; + +// Initialize with your Mapbox access token +Mapbox.initialize('YOUR_MAPBOX_ACCESS_TOKEN'); // Create a new window -var win = Ti.UI.createWindow({ - backgroundColor: '#fff' +const win = Ti.UI.createWindow({ + backgroundColor: '#fff' }); -// Create a new map -var mapView = Mapbox.createView({ +// Create a new map view +const mapView = new MapView({ region: { latitude: 52.020388, longitude: 9.580078, @@ -16,7 +18,7 @@ var mapView = Mapbox.createView({ }); // Set the coordinate bounds -mapView.setVisibleCoordinateBounds({ +mapView.visibleCoordinateBounds = { southWest: { latitude: 47.600607, longitude: 6.152344 @@ -25,10 +27,10 @@ mapView.setVisibleCoordinateBounds({ latitude: 53.977090, longitude: 13.447266 } -}); +}; -// Add a new annotation / marker -mapView.addAnnotation(Mapbox.createAnnotation({ +// Add a new annotation +mapView.addAnnotation(new Annotation({ latitude: 52.020388, longitude: 9.580078, title: 'Hyperloop rocks!' diff --git a/Resources/ios/ti.mapbox/annotation.js b/Resources/ios/ti.mapbox/annotation.js deleted file mode 100644 index 2e5e075..0000000 --- a/Resources/ios/ti.mapbox/annotation.js +++ /dev/null @@ -1,24 +0,0 @@ -var annotation, - MGLPointAnnotation = require('Mapbox/MGLPointAnnotation'), - MGLCoordinateBoundsMake = require('Mapbox').MGLCoordinateBoundsMake, - CLLocationCoordinate2DMake = require('CoreLocation').CLLocationCoordinate2DMake; - -function Annotation(args) { - annotation = new MGLPointAnnotation(); - - if (!args.latitude || !args.longitude) { - throw 'Missing latitude / longitude'; - } - - annotation.coordinate = CLLocationCoordinate2DMake(args.latitude, args.longitude); - annotation.title = args.title; - annotation.canShowCallout = true; - - // Expose more? See https://www.mapbox.com/ios-sdk/api/3.7.3/Classes/MGLPointAnnotation.html -} - -Annotation.prototype.getInstance = function() { - return annotation; -}; - -module.exports = Annotation; diff --git a/Resources/ios/ti.mapbox/index.js b/Resources/ios/ti.mapbox/index.js deleted file mode 100644 index 462b69e..0000000 --- a/Resources/ios/ti.mapbox/index.js +++ /dev/null @@ -1,10 +0,0 @@ -var View = require('./view'); -var Annotation = require('./annotation'); - -exports.createView = function(args) { - return new View(args); -}; - -exports.createAnnotation = function(args) { - return new Annotation(args); -}; diff --git a/Resources/ios/ti.mapbox/view.js b/Resources/ios/ti.mapbox/view.js deleted file mode 100644 index 646b754..0000000 --- a/Resources/ios/ti.mapbox/view.js +++ /dev/null @@ -1,41 +0,0 @@ -var mapView, - UIScreen = require('UIKit/UIScreen'), - UIViewAutoresizingFlexibleWidth = require('UIKit').UIViewAutoresizingFlexibleWidth, - UIViewAutoresizingFlexibleHeight = require('UIKit').UIViewAutoresizingFlexibleHeight, - MGLMapView = require('Mapbox/MGLMapView'), - MGLCoordinateBoundsMake = require('Mapbox').MGLCoordinateBoundsMake, - CLLocationCoordinate2DMake = require('CoreLocation').CLLocationCoordinate2DMake; - -function View(args) { - mapView = MGLMapView.alloc().initWithFrame(UIScreen.mainScreen.bounds); - - if (args.region && args.region.latitude && args.region.longitude) { - var latitude = args.region.latitude; - var longitude = args.region.longitude; - var animated = args.region.animated === undefined ? true : args.region.animated; - var zoomLevel = args.region.zoomLevel || 7; - var direction = args.region.direction || 0; - - // Wondering about the method name? It's simply: - // setCenterCoordinate:zoomLevel:direction:animated in Hyperloop (concatenated) - mapView.setCenterCoordinateZoomLevelDirectionAnimated(CLLocationCoordinate2DMake(latitude, longitude), zoomLevel, direction, animated); - } -} - -View.prototype.setVisibleCoordinateBounds = function(args) { - var bounds = MGLCoordinateBoundsMake( - CLLocationCoordinate2DMake(args.southWest.latitude, args.southWest.longitude), - CLLocationCoordinate2DMake(args.northEast.latitude, args.northEast.longitude) - ); - mapView.setVisibleCoordinateBounds(bounds); -}; - -View.prototype.addAnnotation = function(annotation) { - mapView.addAnnotation(annotation); -}; - -View.prototype.getInstance = function() { - return mapView; -}; - -module.exports = View; diff --git a/Resources/ios/titanium-mapbox/annotation.js b/Resources/ios/titanium-mapbox/annotation.js new file mode 100644 index 0000000..87e529c --- /dev/null +++ b/Resources/ios/titanium-mapbox/annotation.js @@ -0,0 +1,23 @@ +const MGLPointAnnotation = require('Mapbox/MGLPointAnnotation'); +const MGLCoordinateBoundsMake = require('Mapbox').MGLCoordinateBoundsMake; +const CLLocationCoordinate2DMake = require('CoreLocation').CLLocationCoordinate2DMake; + +export default class Annotation { + constructor(args) { + this.annotation = new MGLPointAnnotation(); + + if (!args.latitude || !args.longitude) { + throw 'Missing latitude / longitude'; + } + + this.annotation.coordinate = CLLocationCoordinate2DMake(args.latitude, args.longitude); + this.annotation.title = args.title; + this.annotation.canShowCallout = true; + + // Expose more? See https://www.mapbox.com/ios-sdk/api/3.7.3/Classes/MGLPointAnnotation.html + } + + getInstance() { + return this.annotation; + } +} diff --git a/Resources/ios/titanium-mapbox/index.js b/Resources/ios/titanium-mapbox/index.js new file mode 100644 index 0000000..233e15e --- /dev/null +++ b/Resources/ios/titanium-mapbox/index.js @@ -0,0 +1,13 @@ +import MapView from './mapview'; +import Annotation from './annotation'; + +const MGLAccountManager = require('Mapbox/MGLAccountManager'); + +class Mapbox { + static initialize(apiKey) { + if (!apiKey) { throw 'No API-key provided!'; } + MGLAccountManager.setAccessToken(apiKey); + } +} + +export { Annotation, MapView, Mapbox } diff --git a/Resources/ios/titanium-mapbox/mapview.js b/Resources/ios/titanium-mapbox/mapview.js new file mode 100644 index 0000000..0fe2946 --- /dev/null +++ b/Resources/ios/titanium-mapbox/mapview.js @@ -0,0 +1,38 @@ +const UIScreen = require('UIKit/UIScreen'); +const MGLMapView = require('Mapbox/MGLMapView'); +const MGLCoordinateBoundsMake = require('Mapbox').MGLCoordinateBoundsMake; +const CLLocationCoordinate2DMake = require('CoreLocation').CLLocationCoordinate2DMake; + +export default class MapView { + constructor(args) { + this.mapView = MGLMapView.alloc().initWithFrame(UIScreen.mainScreen.bounds); + + if (args.region && args.region.latitude && args.region.longitude) { + const latitude = args.region.latitude; + const longitude = args.region.longitude; + const animated = args.region.animated === undefined ? true : args.region.animated; + const zoomLevel = args.region.zoomLevel || 7; + const direction = args.region.direction || 0; + + // Wondering about the method name? It's simply: + // setCenterCoordinate:zoomLevel:direction:animated in Hyperloop (concatenated) + this.mapView.setCenterCoordinateZoomLevelDirectionAnimated(CLLocationCoordinate2DMake(latitude, longitude), zoomLevel, direction, animated); + } + } + + set visibleCoordinateBounds(args) { + const bounds = MGLCoordinateBoundsMake( + CLLocationCoordinate2DMake(args.southWest.latitude, args.southWest.longitude), + CLLocationCoordinate2DMake(args.northEast.latitude, args.northEast.longitude) + ); + this.mapView.setVisibleCoordinateBounds(bounds); + } + + addAnnotation(annotation) { + this.mapView.addAnnotation(annotation); + }; + + getInstance() { + return this.mapView; + } +} diff --git a/tiapp.xml b/tiapp.xml index 703dbe3..9a2049d 100644 --- a/tiapp.xml +++ b/tiapp.xml @@ -14,16 +14,13 @@ 11111111-1111-1111-1111-111111111111 dp true + true true true true - - MGLMapboxAccessToken - YOUR_MAPBOX_ACCESS_TOKEN - NSLocationWhenInUseUsageDescription Can we access your location while using the app?