From 6074b048fb254ab4ac81fe821df500e4c30ec4f0 Mon Sep 17 00:00:00 2001 From: bsudekum Date: Sat, 12 Dec 2015 12:40:14 -0800 Subject: [PATCH] Modify androind map after init --- android/build.gradle | 2 +- android/example.js | 49 +++++++++++--- .../ReactNativeMapboxGLManager.java | 67 ++++++++++++++++--- .../ReactNativeMapboxGLPackage.java | 21 ++++-- index.android.js | 11 ++- 5 files changed, 122 insertions(+), 28 deletions(-) diff --git a/android/build.gradle b/android/build.gradle index 4f22363..4fc3e0d 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -31,7 +31,7 @@ repositories { dependencies { compile 'com.facebook.react:react-native:0.14.+' - compile('com.mapbox.mapboxsdk:mapbox-android-sdk:2.2.0@aar') { + compile('com.mapbox.mapboxsdk:mapbox-android-sdk:2.3.0@aar') { transitive = true } } diff --git a/android/example.js b/android/example.js index 8d70502..7ff8b4d 100644 --- a/android/example.js +++ b/android/example.js @@ -5,10 +5,12 @@ var Mapbox = require('react-native-mapbox-gl'); var { AppRegistry, StyleSheet, - View + View, + Text } = React; var MapExample = React.createClass({ + mixins: [Mapbox.Mixin], getInitialState() { return { center: { @@ -44,15 +46,41 @@ var MapExample = React.createClass({ }] } }, - onRegionChange(location) { - console.log(location); - }, - render: function() { + render() { return ( + this.setDirectionAnimated(0)}> + Set direction to 0 + + this.setCenterCoordinateAnimated(40.68454331694491, -73.93592834472656)}> + Go to New York at current zoom level + + this.setCenterCoordinateZoomLevelAnimated(35.68829, 139.77492, 14)}> + Go to Tokyo at fixed zoom level 14 + + this.addAnnotation([{ + coordinates: [40.73312,-73.989], + type: 'point', + title: 'This is a new marker', + id: 'foo' + }, { + 'coordinates': [[40.75974059207392, -74.02484893798828], [40.68454331694491, -73.93592834472656]], + 'type': 'polyline' + }])}> + Add new marker + + this.setUserTrackingMode('FOLLOW')}> + Set userTrackingMode to follow + + this.removeAllAnnotations()}> + Remove all annotations + + this.setTilt(50)}> + Set tilt to 50 + @@ -75,8 +103,11 @@ var styles = StyleSheet.create({ container: { flex: 1 }, + text: { + padding: 3, + marginLeft: 5 + }, map: { - width: require('Dimensions').get('window').width, flex: 1 } }); diff --git a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java index cc64bf2..6ac787a 100644 --- a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java +++ b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java @@ -1,23 +1,25 @@ + package com.mapbox.reactnativemapboxgl; import android.graphics.Color; import android.util.Log; +import com.facebook.react.bridge.Arguments; +import com.facebook.react.bridge.ReactContext; 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.ReactProp; +import com.mapbox.mapboxsdk.constants.Style; import com.facebook.react.uimanager.SimpleViewManager; import com.facebook.react.uimanager.ThemedReactContext; +import com.facebook.react.uimanager.events.RCTEventEmitter; import com.mapbox.mapboxsdk.annotations.MarkerOptions; import com.mapbox.mapboxsdk.annotations.PolygonOptions; -import com.mapbox.mapboxsdk.constants.MyLocationTracking; import com.mapbox.mapboxsdk.annotations.PolylineOptions; -import com.mapbox.mapboxsdk.views.MapView; +import com.mapbox.mapboxsdk.constants.MyLocationTracking; import com.mapbox.mapboxsdk.geometry.LatLng; -import com.facebook.react.uimanager.events.RCTEventEmitter; +import com.mapbox.mapboxsdk.views.MapView; import javax.annotation.Nullable; @@ -27,9 +29,11 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { public static final String PROP_ACCESS_TOKEN = "accessToken"; public static final String PROP_ANNOTATIONS = "annotations"; public static final String PROP_CENTER_COORDINATE = "centerCoordinate"; + public static final String PROP_CENTER_COORDINATE_ZOOM = "centerCoordinateZoom"; public static final String PROP_DEBUG_ACTIVE = "debugActive"; public static final String PROP_DIRECTION = "direction"; public static final String PROP_ONREGIONCHANGE = "onRegionChange"; + public static final String PROP_ONUSER_LOCATION_CHANGE = "onUserLocationChange"; public static final String PROP_ROTATION_ENABLED = "rotationEnabled"; public static final String PROP_SCROLL_ENABLED = "scrollEnabled"; public static final String PROP_USER_LOCATON = "showsUserLocation"; @@ -37,6 +41,10 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { public static final String PROP_USER_TRACKING_MODE = "UserLocationTrackingMode"; public static final String PROP_ZOOM_ENABLED = "zoomEnabled"; public static final String PROP_ZOOM_LEVEL = "zoomLevel"; + public static final String PROP_REMOVE_ALL_ANNOTATIONS = "removeAllAnnotations"; + public static final String PROP_SET_TILT = "tilt"; + private MapView mapView; + @Override public String getName() { @@ -45,9 +53,9 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { @Override public MapView createViewInstance(ThemedReactContext context) { - MapView mv = new MapView(context, "pk.foo"); - mv.onCreate(null); - return mv; + mapView = new MapView(context, "pk.foo"); + mapView.onCreate(null); + return mapView; } @ReactProp(name = PROP_ACCESS_TOKEN) @@ -59,6 +67,16 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { } } + @ReactProp(name = PROP_REMOVE_ALL_ANNOTATIONS) + public void removeAllAnnotations(MapView view, @Nullable Boolean placeHolder) { + view.removeAllAnnotations(); + } + + @ReactProp(name = PROP_SET_TILT) + public void setTilt(MapView view, @Nullable double pitch) { + mapView.setTilt(pitch, 1L); + } + @ReactProp(name = PROP_ANNOTATIONS) public void setAnnotations(MapView view, @Nullable ReadableArray value) { if (value == null || value.size() < 1) { @@ -137,10 +155,10 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { @ReactProp(name = PROP_DIRECTION, defaultFloat = 0f) public void setDirection(MapView view, float value) { - view.setDirection(value); + view.setDirection(value, true); } - @ReactProp(name = PROP_ONREGIONCHANGE, defaultBoolean=true) + @ReactProp(name = PROP_ONREGIONCHANGE, defaultBoolean = true) public void onMapChanged(final MapView view, Boolean value) { view.addOnMapChangedListener(new MapView.OnMapChangedListener() { @Override @@ -159,6 +177,16 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { }); } +// @ReactProp(name = PROP_ONUSER_LOCATION_CHANGE, defaultBoolean = true) +// public void onUserLocationChange(final MapView view, Boolean value) { +// view.setOnMyLocationChangeListener(new MapView.OnMyLocationChangeListener() { +// @Override +// public void onUserLocationChange(int location) { +// +// } +// }); +// } + @ReactProp(name = PROP_CENTER_COORDINATE) public void setCenterCoordinate(MapView view, @Nullable ReadableMap center) { if (center != null) { @@ -170,6 +198,18 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { } } + @ReactProp(name = PROP_CENTER_COORDINATE_ZOOM) + public void setCenterCoordinateZoomLevel(MapView view, @Nullable ReadableMap center) { + if (center != null) { + double latitude = center.getDouble("latitude"); + double longitude = center.getDouble("longitude"); + double zoom = center.getDouble("zoom"); + view.setCenterCoordinate(new LatLng(latitude, longitude, zoom), true); + }else{ + Log.w(REACT_CLASS, "No CenterCoordinate provided"); + } + } + @ReactProp(name = PROP_ROTATION_ENABLED, defaultBoolean = true) public void setRotateEnabled(MapView view, Boolean value) { view.setRotateEnabled(value); @@ -217,4 +257,9 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { public void setScrollEnabled(MapView view, Boolean value) { view.setScrollEnabled(value); } -} + + + public MapView getMapView() { + return mapView; + } +} \ No newline at end of file diff --git a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLPackage.java b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLPackage.java index 389c60e..4295eec 100644 --- a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLPackage.java +++ b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLPackage.java @@ -6,16 +6,22 @@ import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; +import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.List; -import android.util.Log; - public class ReactNativeMapboxGLPackage implements ReactPackage { + + private ReactNativeMapboxGLManager glManager; + @Override public List createNativeModules(ReactApplicationContext reactContext) { - return Collections.emptyList(); + List modules = new ArrayList<>(); + ReactNativeMapboxGLModule module = new ReactNativeMapboxGLModule(reactContext); + module.setPackage(this); + modules.add(module); + return modules; } @Override @@ -25,8 +31,13 @@ public class ReactNativeMapboxGLPackage implements ReactPackage { @Override public List createViewManagers(ReactApplicationContext reactContext) { + glManager = new ReactNativeMapboxGLManager(); return Arrays.asList( - new ReactNativeMapboxGLManager() + glManager ); } -} + + public ReactNativeMapboxGLManager getManager() { + return glManager; + } +} \ No newline at end of file diff --git a/index.android.js b/index.android.js index 1396fee..6f0aed1 100644 --- a/index.android.js +++ b/index.android.js @@ -20,6 +20,7 @@ var ReactMapView = requireNativeComponent('RCTMapbox', { latitude: React.PropTypes.number.isRequired, longitude: React.PropTypes.number.isRequired }), + centerCoordinateZoom: React.PropTypes.shape(), debugActive: React.PropTypes.bool, direction: React.PropTypes.number, rotationEnabled: React.PropTypes.bool, @@ -29,7 +30,9 @@ var ReactMapView = requireNativeComponent('RCTMapbox', { UserLocationTrackingMode: React.PropTypes.oneOf(['NONE', 'FOLLOW']), zoomEnabled: React.PropTypes.bool, zoomLevel: React.PropTypes.number, + tilt: React.PropTypes.number, onRegionChange: React.PropTypes.func, + removeAllAnnotations: React.PropTypes.bool, // Fix for https://github.com/mapbox/react-native-mapbox-gl/issues/118 scaleY: React.PropTypes.number, scaleX: React.PropTypes.number, @@ -56,15 +59,19 @@ var ReactMapView = requireNativeComponent('RCTMapbox', { rotationEnabled: true, scrollEnabled: true, showsUserLocation: false, - styleUrl: 'asset://styles/streets-v8.json', + styleUrl: 'mapbox://styles/mapbox/streets-v8', UserLocationTrackingMode: 'NONE', zoomEnabled: true, - zoomLevel: 0 + zoomLevel: 0, + tilt: 0 }; } }); var ReactMapViewWrapper = React.createClass({ + statics: { + Mixin: NativeModules.Mapbox + }, handleOnChange(event) { if (this.props.onRegionChange) this.props.onRegionChange(event.nativeEvent.src); },