Move to ES6

Podfile.lock

@@ -9,4 +9,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: aca95d0d8ce7ca2fd82e83e2cfaaa83799fe5b7a
 
-COCOAPODS: 1.3.1
+COCOAPODS: 1.4.0

README.md

@@ -7,13 +7,23 @@ expose all possible API's of the SDK. See the [official](https://www.mapbox.com/
 
 <img src="example.jpg" width="800" alt="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,23 +37,22 @@ 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
 });
 
 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
-<!-- Mapbox configuration -->
-<key>MGLMapboxAccessToken</key>
-<string>YOUR_MAPBOX_ACCESS_TOKEN</string>
-
 <!-- General Geolocation permissions -->
 <key>NSLocationWhenInUseUsageDescription</key>
 <string>Can we access your location while using the app?</string>
@@ -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
 ```

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;
+	}
+};

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 }

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;
+	}
+}

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!'

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;
+	}
+}

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 }