status-im/react-native-mapbox-gl
1
0
Fork 0
mirror of https://github.com/status-im/react-native-mapbox-gl.git synced 2026-08-31 13:01:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[android] Update to mapbox gl 2.1.0

Browse Source
This commit is contained in:
bsudekum
2015-10-24 22:29:40 -07:00
parent f536b404e6
commit 27d79d705a
8 changed files with 133 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+8 -1
View File
@@ -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
.npmignore
+7
View File
@@ -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
android/API.md
+3 -1
View File
@@ -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
android/build.gradle
+2 -2
View File
@@ -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
}
}
android/example.js
+6 -12
View File
@@ -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 (
<View style={styles.container}>
@@ -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}
android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java
+48 -21
View File
@@ -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<MapView> {
public static final String REACT_CLASS = "RCTMapbox";
@@ -28,6 +31,8 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager<MapView> {
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<MapView> {
@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<MapView> {
} 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<MapView> {
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<MapView> {
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<MapView> {
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);
}
}
index.android.js
+56 -46
View File
@@ -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 (<Mapbox {...this.props} />);
render() {
return <ReactMapView
{...this.props}
onChange={this.handleOnChange} />
}
});
module.exports = requireNativeComponent('RCTMapbox', MapView);
module.exports = ReactMapViewWrapper;
index.ios.js
+3 -3
View File
@@ -106,14 +106,14 @@ var MapView = React.createClass({
zoomLevel: 0
};
},
render: function() {
return (<MapboxGLView
render() {
return <MapboxGLView
{...this.props}
onRegionChange={this._onRegionChange}
onRegionWillChange={this._onRegionWillChange}
onOpenAnnotation={this._onOpenAnnotation}
onRightAnnotationTapped={this._onRightAnnotationTapped}
onUpdateUserLocation={this._onUpdateUserLocation} />);
onUpdateUserLocation={this._onUpdateUserLocation} />;
}
});