From 27d79d705ac043ea1286050df29fff2e5cc7030f Mon Sep 17 00:00:00 2001 From: bsudekum Date: Sat, 24 Oct 2015 22:29:40 -0700 Subject: [PATCH] [android] Update to mapbox gl 2.1.0 --- .gitignore | 9 +- .npmignore | 7 ++ android/API.md | 4 +- android/build.gradle | 4 +- android/example.js | 18 ++-- .../ReactNativeMapboxGLManager.java | 69 ++++++++---- index.android.js | 102 ++++++++++-------- index.ios.js | 6 +- 8 files changed, 133 insertions(+), 86 deletions(-) diff --git a/.gitignore b/.gitignore index 99efb5f..a8a0479 100644 --- a/.gitignore +++ b/.gitignore @@ -54,5 +54,12 @@ ios/RCTMapboxGL/MGLShape.h ios/RCTMapboxGL/Mapbox.bundle/ ios/RCTMapboxGL/Mapbox.h ios/RCTMapboxGL/libMapbox.a -./android/build/ +android/build/ +android/.gradle/ +android/.idea/ +android/android.iml +android/gradle/ +android/gradlew +android/gradlew.bat +android/local.properties reactnativemapboxgl.iml diff --git a/.npmignore b/.npmignore index 2575b55..e1f38bc 100644 --- a/.npmignore +++ b/.npmignore @@ -42,3 +42,10 @@ MGLTypes.h MGLUserLocation.h MGLAccountManager.h MGLMapView_Private.h +android/.gradle/ +android/.idea/ +android/android.iml +android/gradle/ +android/gradlew +android/gradlew.bat +android/local.properties diff --git a/android/API.md b/android/API.md index 2305a2b..c54bf5e 100644 --- a/android/API.md +++ b/android/API.md @@ -19,7 +19,9 @@ ## Events -_Not yet implemented_ +| Event Name | Returns | Notes +|---|---|---| +| `onRegionChange` | `{latitude: 0, longitude: 0, zoom: 0}` | Fired when the map is panning or zooming. ## Methods for Modifying the Map State diff --git a/android/build.gradle b/android/build.gradle index e7d178b..223cc32 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -4,7 +4,7 @@ buildscript { } dependencies { - classpath 'com.android.tools.build:gradle:1.1.3' + classpath 'com.android.tools.build:gradle:1.3.0' } } @@ -31,7 +31,7 @@ repositories { dependencies { compile 'com.facebook.react:react-native:0.11.+' - compile('com.mapbox.mapboxsdk:mapbox-android-sdk:2.0.0@aar') { + compile('com.mapbox.mapboxsdk:mapbox-android-sdk:2.1.0@aar') { transitive = true } } diff --git a/android/example.js b/android/example.js index 99a4480..9e97f3b 100644 --- a/android/example.js +++ b/android/example.js @@ -20,23 +20,12 @@ var MapExample = React.createClass({ type: 'point', title: 'Important!', subtitle: 'Neat, this is a custom annotation image', - annotationImage: { - url: 'https://cldup.com/7NLZklp8zS.png', - height: 25, - width: 25 - }, id: 'marker2' }, { coordinates: [40.7923, -73.9178], type: 'point', title: 'Important!', - subtitle: 'Neat, this is a custom annotation image', - annotationImage: { - url: 'https://cldup.com/7NLZklp8zS.png', - height: 25, - width: 25 - }, - id: 'marker2' + subtitle: 'Neat, this is a custom annotation image' }, { "coordinates": [[40.76572150042782,-73.99429321289062],[40.743485405490695, -74.00218963623047],[40.728266950429735,-74.00218963623047],[40.728266950429735,-73.99154663085938],[40.73633186448861,-73.98983001708984],[40.74465591168391,-73.98914337158203],[40.749337730454826,-73.9870834350586]], "type": "polyline", @@ -55,6 +44,9 @@ var MapExample = React.createClass({ }] } }, + onRegionChange(location) { + console.log(location); + }, render: function() { return ( @@ -64,9 +56,11 @@ var MapExample = React.createClass({ centerCoordinate={this.state.center} debugActive={false} direction={0} + onRegionChange={this.onRegionChange} rotationEnabled={true} scrollEnabled={true} style={styles.map} + showsUserLocation={true} styleUrl={'asset://styles/streets-v8.json'} zoomEnabled={true} zoomLevel={12} diff --git a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java index a99b271..8b9c3b0 100644 --- a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java +++ b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java @@ -3,8 +3,10 @@ package com.mapbox.reactnativemapboxgl; import android.graphics.Color; import android.util.Log; -import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; +import com.facebook.react.bridge.WritableMap; +import com.facebook.react.bridge.ReactContext; +import com.facebook.react.bridge.Arguments; import com.facebook.react.uimanager.CatalystStylesDiffMap; import com.facebook.react.uimanager.SimpleViewManager; import com.facebook.react.uimanager.ThemedReactContext; @@ -14,6 +16,7 @@ import com.mapbox.mapboxsdk.annotations.PolygonOptions; import com.mapbox.mapboxsdk.annotations.PolylineOptions; import com.mapbox.mapboxsdk.views.MapView; import com.mapbox.mapboxsdk.geometry.LatLng; +import com.facebook.react.uimanager.events.RCTEventEmitter; public class ReactNativeMapboxGLManager extends SimpleViewManager { public static final String REACT_CLASS = "RCTMapbox"; @@ -28,6 +31,8 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { public static final String PROP_DEBUG_ACTIVE = "debugActive"; @UIProp(UIProp.Type.NUMBER) public static final String PROP_DIRECTION = "direction"; + @UIProp(UIProp.Type.MAP) + public static final String PROP_ONREGIONCHANGE = "onRegionChange"; @UIProp(UIProp.Type.BOOLEAN) public static final String PROP_ROTATION_ENABLED = "rotationEnabled"; @UIProp(UIProp.Type.STRING) @@ -50,8 +55,7 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { @Override public MapView createViewInstance(ThemedReactContext context) { - MapView mv = new MapView(context); - mv.setAccessToken("pk.foobar"); // Placeholder access token + MapView mv = new MapView(context, "pk.foo"); mv.onCreate(null); return mv; } @@ -65,19 +69,6 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { } else { view.setAccessToken(props.getString(PROP_ACCESS_TOKEN)); } - if (props.hasKey(PROP_USER_TRACKING_MODE)) { - String mode = props.getString(PROP_USER_TRACKING_MODE); - if (mode.equals("NONE")) { - view.setUserLocationTrackingMode(MapView.UserLocationTrackingMode.NONE); - } else if (mode.equals("FOLLOW")) { - view.setUserLocationTrackingMode(MapView.UserLocationTrackingMode.FOLLOW); - } else if (mode.equals("FOLLOW_BEARING")) { - view.setUserLocationTrackingMode(MapView.UserLocationTrackingMode.FOLLOW_BEARING); - } else { - view.setUserLocationTrackingMode(MapView.UserLocationTrackingMode.NONE); - Log.w("Error", "Tracking mode not found. Setting to NONE."); - } - } if (props.hasKey(PROP_ANNOTATIONS)) { int size = props.getArray(PROP_ANNOTATIONS).size(); for (int i = 0; i < size; i++) { @@ -139,10 +130,6 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { int strokeColor = Color.parseColor(annotation.getString("strokeColor")); polygon.strokeColor(strokeColor); } - if (annotation.hasKey("strokeWidth")) { - float strokeWidth = annotation.getInt("strokeWidth"); - polygon.strokeWidth(strokeWidth); - } view.addPolygon(polygon); } } @@ -153,6 +140,23 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { if (props.hasKey(PROP_DIRECTION)) { view.setDirection(props.getFloat(PROP_DIRECTION, 0)); } + if (props.hasKey(PROP_ONREGIONCHANGE)) { + view.addOnMapChangedListener(new MapView.OnMapChangedListener() { + @Override + public void onMapChanged(int change) { + if (change == MapView.REGION_DID_CHANGE) { + WritableMap event = Arguments.createMap(); + WritableMap location = Arguments.createMap(); + location.putDouble("latitude", view.getCenterCoordinate().getLatitude()); + location.putDouble("longitude", view.getCenterCoordinate().getLongitude()); + location.putDouble("zoom", view.getZoomLevel()); + event.putMap("src", location); + ReactContext reactContext = (ReactContext) view.getContext(); + reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(view.getId(), "topChange", event); + } + } + }); + } if (props.hasKey(PROP_CENTER_COORDINATE)) { ReadableMap center = props.getMap(PROP_CENTER_COORDINATE); double latitude = center.getDouble("latitude"); @@ -168,13 +172,36 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { if (props.hasKey(PROP_STYLE_URL)) { view.setStyleUrl(props.getString(PROP_STYLE_URL)); } - if (props.hasKey(PROP_STYLE_URL)) { + + /* + + This was removed in v2.1.0 and will be added back in the next release + + if (props.hasKey(PROP_USER_TRACKING_MODE)) { + String mode = props.getString(PROP_USER_TRACKING_MODE); + if (mode.equals("NONE")) { + view.setUserLocationTrackingMode(MapView.UserLocationTrackingMode.NONE); + } else if (mode.equals("FOLLOW")) { + view.setUserLocationTrackingMode(MapView.UserLocationTrackingMode.FOLLOW); + } else if (mode.equals("FOLLOW_BEARING")) { + view.setUserLocationTrackingMode(MapView.UserLocationTrackingMode.FOLLOW_BEARING); + } else { + view.setUserLocationTrackingMode(MapView.UserLocationTrackingMode.NONE); + Log.w("Error", "Tracking mode not found. Setting to NONE."); + } + }*/ + + if (props.hasKey(PROP_ZOOM_ENABLED)) { view.setZoomEnabled(props.getBoolean(PROP_ZOOM_ENABLED, true)); } if (props.hasKey(PROP_ZOOM_LEVEL)) { view.setZoomLevel(props.getFloat(PROP_ZOOM_LEVEL, 0)); } + if (props.hasKey(PROP_SCROLL_ENABLED)) { + view.setScrollEnabled(props.getBoolean(PROP_SCROLL_ENABLED, true)); + } + super.updateView(view, props); } } diff --git a/index.android.js b/index.android.js index d06b864..e5c2003 100644 --- a/index.android.js +++ b/index.android.js @@ -1,54 +1,64 @@ +'use strict' + var React = require('react-native'); var { NativeModules, requireNativeComponent } = React; +var ReactMapView = requireNativeComponent('RCTMapbox', { + name: 'RCTMapbox', + propTypes: { + accessToken: React.PropTypes.string.isRequired, + annotations: React.PropTypes.arrayOf(React.PropTypes.shape({ + title: React.PropTypes.string, + subtitle: React.PropTypes.string, + coordinates: React.PropTypes.arrayOf(), + alpha: React.PropTypes.number, + fillColor: React.PropTypes.string, + strokeColor: React.PropTypes.string, + strokeWidth: React.PropTypes.number + })), + centerCoordinate: React.PropTypes.shape({ + latitude: React.PropTypes.number.isRequired, + longitude: React.PropTypes.number.isRequired + }), + debugActive: React.PropTypes.bool, + direction: React.PropTypes.number, + rotationEnabled: React.PropTypes.bool, + scrollEnabled: React.PropTypes.bool, + showsUserLocation: React.PropTypes.bool, + styleUrl: React.PropTypes.string, + UserLocationTrackingMode: React.PropTypes.oneOf(['NONE', 'FOLLOW', 'FOLLOW_BEARING']), + zoomEnabled: React.PropTypes.bool, + zoomLevel: React.PropTypes.number, + onRegionChange: React.PropTypes.func + }, + defaultProps() { + return { + centerCoordinate: { + latitude: 0, + longitude: 0 + }, + debugActive: false, + direction: 0, + rotationEnabled: true, + scrollEnabled: true, + showsUserLocation: false, + styleUrl: 'asset://styles/streets-v8.json', + UserLocationTrackingMode: 'NONE', + zoomEnabled: true, + zoomLevel: 0 + }; + } +}); -var MapView = React.createClass({ - propTypes: { - accessToken: React.PropTypes.string.isRequired, - annotations: React.PropTypes.arrayOf(React.PropTypes.shape({ - title: React.PropTypes.string, - subtitle: React.PropTypes.string, - coordinates: React.PropTypes.arrayOf(), - alpha: React.PropTypes.number, - fillColor: React.PropTypes.string, - strokeColor: React.PropTypes.string, - strokeWidth: React.PropTypes.number - })), - centerCoordinate: React.PropTypes.shape({ - latitude: React.PropTypes.number.isRequired, - longitude: React.PropTypes.number.isRequired - }), - debugActive: React.PropTypes.bool, - direction: React.PropTypes.number, - rotationEnabled: React.PropTypes.bool, - scrollEnabled: React.PropTypes.bool, - showsUserLocation: React.PropTypes.bool, - styleUrl: React.PropTypes.string, - UserLocationTrackingMode: React.PropTypes.string, - zoomEnabled: React.PropTypes.bool, - zoomLevel: React.PropTypes.number +var ReactMapViewWrapper = React.createClass({ + handleOnChange(event) { + if (this.props.onRegionChange) this.props.onRegionChange(event.nativeEvent.src); }, - getDefaultProps() { - return { - centerCoordinate: { - latitude: 0, - longitude: 0 - }, - debugActive: false, - direction: 0, - rotationEnabled: true, - scrollEnabled: true, - showsUserLocation: false, - styleUrl: 'asset://styles/streets-v8.json', - UserLocationTrackingMode: 'NONE', - zoomEnabled: true, - zoomLevel: 0 - }; - }, - render: function() { - return (); + render() { + return } }); - -module.exports = requireNativeComponent('RCTMapbox', MapView); +module.exports = ReactMapViewWrapper; diff --git a/index.ios.js b/index.ios.js index d4a6241..4d35beb 100644 --- a/index.ios.js +++ b/index.ios.js @@ -106,14 +106,14 @@ var MapView = React.createClass({ zoomLevel: 0 }; }, - render: function() { - return (); + onUpdateUserLocation={this._onUpdateUserLocation} />; } });