Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
bsudekum committed Oct 31, 2015
2 parents 18ecb8e + 846e2d4 commit 1c99af7
Show file tree
Hide file tree
Showing 11 changed files with 168 additions and 115 deletions.
9 changes: 8 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
7 changes: 7 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -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
4 changes: 3 additions & 1 deletion android/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions android/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ buildscript {
}

dependencies {
classpath 'com.android.tools.build:gradle:1.1.3'
classpath 'com.android.tools.build:gradle:1.3.0'
}
}

Expand All @@ -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.2.0@aar') {
transitive = true
}
}
21 changes: 8 additions & 13 deletions android/example.js
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -55,6 +44,9 @@ var MapExample = React.createClass({
}]
}
},
onRegionChange(location) {
console.log(location);
},
render: function() {
return (
<View style={styles.container}>
Expand All @@ -64,12 +56,15 @@ 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'}
UserLocationTrackingMode={'FOLLOW'}
zoomEnabled={true}
zoomLevel={12}
zoomLevel={10}
/>
</View>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,23 @@
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;
import com.facebook.react.uimanager.UIProp;
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.geometry.LatLng;
import com.facebook.react.uimanager.events.RCTEventEmitter;

import java.util.Map;

public class ReactNativeMapboxGLManager extends SimpleViewManager<MapView> {
public static final String REACT_CLASS = "RCTMapbox";
Expand All @@ -28,6 +34,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)
Expand All @@ -50,8 +58,7 @@ public String getName() {

@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;
}
Expand All @@ -65,19 +72,6 @@ public void updateView(final MapView view,
} 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++) {
Expand Down Expand Up @@ -139,10 +133,6 @@ public void updateView(final MapView view,
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);
}
}
Expand All @@ -153,6 +143,23 @@ public void updateView(final MapView view,
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 || change == MapView.REGION_DID_CHANGE_ANIMATED) {
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");
Expand All @@ -168,13 +175,28 @@ public void updateView(final MapView view,
if (props.hasKey(PROP_STYLE_URL)) {
view.setStyleUrl(props.getString(PROP_STYLE_URL));
}
if (props.hasKey(PROP_STYLE_URL)) {
if (props.hasKey(PROP_USER_TRACKING_MODE)) {
String mode = props.getString(PROP_USER_TRACKING_MODE);
if (mode.equals("NONE")) {
view.setMyLocationTrackingMode(MyLocationTracking.TRACKING_NONE);
} else if (mode.equals("FOLLOW")) {
view.setMyLocationTrackingMode(MyLocationTracking.TRACKING_FOLLOW);
} else {
view.setMyLocationTrackingMode(MyLocationTracking.TRACKING_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);
}
}
108 changes: 62 additions & 46 deletions index.android.js
Original file line number Diff line number Diff line change
@@ -1,54 +1,70 @@
'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']),
zoomEnabled: React.PropTypes.bool,
zoomLevel: React.PropTypes.number,
onRegionChange: React.PropTypes.func,
// Fix for https://github.com/mapbox/react-native-mapbox-gl/issues/118
scaleY: React.PropTypes.number,
scaleX: React.PropTypes.number,
translateY: React.PropTypes.number,
translateX: React.PropTypes.number,
rotation: React.PropTypes.number
},
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;
6 changes: 3 additions & 3 deletions index.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,14 +109,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} />;
}
});

Expand Down
4 changes: 4 additions & 0 deletions ios/RCTMapboxGL.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,8 @@
HEADER_SEARCH_PATHS = (
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../../../React/**",
"$(SRCROOT)/../../react-native/React/**",
);
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
Expand All @@ -347,6 +349,8 @@
HEADER_SEARCH_PATHS = (
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../../../React/**",
"$(SRCROOT)/../../react-native/React/**",
);
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
Expand Down
Loading

0 comments on commit 1c99af7

Please sign in to comment.