diff --git a/API.md b/API.md index fb01e61..d6e226d 100644 --- a/API.md +++ b/API.md @@ -1,4 +1,4 @@ -# iOS API Docs +# API Docs ## Access token @@ -29,6 +29,7 @@ import { MapView } from 'react-native-mapbox-gl'; | `rotateEnabled` | `boolean` | Optional | Whether the map can rotate. | `true` | | `scrollEnabled` | `boolean` | Optional | Whether the map can be scrolled. | `true` | | `zoomEnabled` | `boolean` | Optional | Whether the map zoom level can be changed. | `true` | +| `pitchEnabled` | `boolean` | Optional | Whether the map pitch (tilt) level can be changed via a two-finger drag (iOS) or three-finger drag (Android). | `true` | | `annotationsPopUpEnabled` | `boolean` | Optional | Whether annotations popups can be shown. | `true` | | `showsUserLocation` | `boolean` | Optional | Whether the user's location is shown on the map. Note: The map will not zoom to their location. | `false` | | `userTrackingMode` | `enum` | Optional | Wether the map is zoomed to and follows the user's location. One of `Mapbox.userTrackingMode.none`, `Mapbox.userTrackingMode.follow`, `Mapbox.userTrackingMode.followWithCourse`, `Mapbox.userTrackingMode.followWithHeading` | `Mapbox.userTrackingMode.none` | @@ -236,14 +237,14 @@ mapbox://styles/bobbysud/cigtw1pzy0000aam2346f7ex0 strokeColor, // optional. string. Only for type=polygon or type=polyline. CSS color (#rrggbb). Controls line color. strokeWidth, // optional. number. Only for type=polygon or type=polyline. Controls line width. id, // required. string. Unique identifier used for adding or selecting an annotation. - annotationImage, { // optional. Marker image for type=point + annotationImage: { // optional. Marker image for type=point source: { uri // required. string. Either remote image URL or the name (without extension) of a bundled image }, height, // required. number. Image height width, // required. number. Image width }, - rightCalloutAccessory, { // optional. iOS only. Clickable image that appears when type=point marker pressed + rightCalloutAccessory: { // optional. iOS only. Clickable image that appears when type=point marker pressed source: { uri // required. string. Either remote image URL or the name (without extension) of a bundled image }, diff --git a/android/install.md b/android/install.md index 46da583..50d2eb6 100644 --- a/android/install.md +++ b/android/install.md @@ -54,7 +54,7 @@ import com.mapbox.reactnativemapboxgl.ReactNativeMapboxGLPackage; // <-- import #### Step 3 - Add Mapbox to AndroidManifest.xml -Add the following permissions to your `AndroidManifest.xml`: +Add the following permissions to the `` root node of your `AndroidManifest.xml`: ```xml @@ -63,7 +63,7 @@ Add the following permissions to your `AndroidManifest.xml`: ``` -Also, add the Mapbox analytics service: +Also, add the Mapbox analytics service to the `` node: ```xml diff --git a/android/src/main/java/com/mapbox/reactnativemapboxgl/RNMGLAnnotationOptionsFactory.java b/android/src/main/java/com/mapbox/reactnativemapboxgl/RNMGLAnnotationOptionsFactory.java index f3cdc7a..efd98ed 100644 --- a/android/src/main/java/com/mapbox/reactnativemapboxgl/RNMGLAnnotationOptionsFactory.java +++ b/android/src/main/java/com/mapbox/reactnativemapboxgl/RNMGLAnnotationOptionsFactory.java @@ -9,6 +9,7 @@ import android.graphics.drawable.Drawable; import android.support.v4.content.ContextCompat; import com.facebook.react.bridge.ReadableMap; +import com.facebook.react.bridge.ReadableArray; import com.mapbox.mapboxsdk.annotations.Annotation; import com.mapbox.mapboxsdk.annotations.Icon; import com.mapbox.mapboxsdk.annotations.IconFactory; @@ -172,11 +173,19 @@ public class RNMGLAnnotationOptionsFactory { static RNMGLAnnotationOptions polylineOptionsFromJS(ReadableMap annotation) { PolylineOptions polyline = new PolylineOptions(); - int coordSize = annotation.getArray("coordinates").size(); - for (int p = 0; p < coordSize; p++) { - double latitude = annotation.getArray("coordinates").getArray(p).getDouble(0); - double longitude = annotation.getArray("coordinates").getArray(p).getDouble(1); - polyline.add(new LatLng(latitude, longitude)); + ReadableArray coordinates = annotation.getArray("coordinates"); + int coordinatesSize = coordinates.size(); + if (coordinatesSize > 0) { + LatLng[] points = new LatLng[coordinatesSize]; + ReadableArray coordinate; + for (int p = 0; p < coordinatesSize; p++) { + coordinate = coordinates.getArray(p); + points[p] = new LatLng( + coordinate.getDouble(0), + coordinate.getDouble(1) + ); + } + polyline.add(points); } if (annotation.hasKey("alpha")) { diff --git a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java index a816d1c..7497818 100644 --- a/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java +++ b/android/src/main/java/com/mapbox/reactnativemapboxgl/ReactNativeMapboxGLManager.java @@ -131,6 +131,11 @@ public class ReactNativeMapboxGLManager extends SimpleViewManager { + _onRegionDidChange(event: Event) { if (this.props.onRegionDidChange) this.props.onRegionDidChange(event.nativeEvent.src); - }; - _onRegionWillChange = (event: Event) => { + } + _onRegionWillChange(event: Event) { if (this.props.onRegionWillChange) this.props.onRegionWillChange(event.nativeEvent.src); - }; - _onOpenAnnotation = (event: Event) => { + } + _onOpenAnnotation(event: Event) { if (this.props.onOpenAnnotation) this.props.onOpenAnnotation(event.nativeEvent.src); - }; - _onRightAnnotationTapped = (event: Event) => { + } + _onRightAnnotationTapped(event: Event) { if (this.props.onRightAnnotationTapped) this.props.onRightAnnotationTapped(event.nativeEvent.src); - }; - _onChangeUserTrackingMode = (event: Event) => { + } + _onChangeUserTrackingMode(event: Event) { if (this.props.onChangeUserTrackingMode) this.props.onChangeUserTrackingMode(event.nativeEvent.src); - }; - _onUpdateUserLocation = (event: Event) => { + } + _onUpdateUserLocation(event: Event) { if (this.props.onUpdateUserLocation) this.props.onUpdateUserLocation(event.nativeEvent.src); - }; - _onLongPress = (event: Event) => { + } + _onLongPress(event: Event) { if (this.props.onLongPress) this.props.onLongPress(event.nativeEvent.src); - }; - _onTap = (event: Event) => { + } + _onTap(event: Event) { if (this.props.onTap) this.props.onTap(event.nativeEvent.src); - }; - _onFinishLoadingMap = (event: Event) => { + } + _onFinishLoadingMap(event: Event) { if (this.props.onFinishLoadingMap) this.props.onFinishLoadingMap(event.nativeEvent.src); - }; - _onStartLoadingMap = (event: Event) => { + } + _onStartLoadingMap(event: Event) { if (this.props.onStartLoadingMap) this.props.onStartLoadingMap(event.nativeEvent.src); - }; - _onLocateUserFailed = (event: Event) => { + } + _onLocateUserFailed(event: Event) { if (this.props.onLocateUserFailed) this.props.onLocateUserFailed(event.nativeEvent.src); - }; + } static propTypes = { ...View.propTypes, @@ -264,6 +280,7 @@ class MapView extends Component { rotateEnabled: PropTypes.bool, scrollEnabled: PropTypes.bool, zoomEnabled: PropTypes.bool, + pitchEnabled: PropTypes.bool, annotationsPopUpEnabled: PropTypes.bool, showsUserLocation: PropTypes.bool, styleURL: PropTypes.string.isRequired, @@ -321,6 +338,7 @@ class MapView extends Component { debugActive: false, rotateEnabled: true, scrollEnabled: true, + pitchEnabled: true, showsUserLocation: false, styleURL: mapStyles.streets, userTrackingMode: userTrackingMode.none, @@ -365,7 +383,7 @@ class MapView extends Component { _native = null; - _onNativeComponentMount = (ref) => { + _onNativeComponentMount(ref) { if (this._native === ref) { return; } this._native = ref; @@ -377,7 +395,7 @@ class MapView extends Component { acc[annotation.id] = isImmutable ? annotation : cloneDeep(annotation); return acc; }, {}); - }; + } setNativeProps(nativeProps) { this._native && this._native.setNativeProps(nativeProps); diff --git a/ios/RCTMapboxGL/RCTMapboxGL.m b/ios/RCTMapboxGL/RCTMapboxGL.m index bdf40f4..92bc9d0 100644 --- a/ios/RCTMapboxGL/RCTMapboxGL.m +++ b/ios/RCTMapboxGL/RCTMapboxGL.m @@ -31,6 +31,7 @@ BOOL _finishedLoading; BOOL _rotateEnabled; BOOL _scrollEnabled; + BOOL _pitchEnabled; BOOL _showsUserLocation; NSURL *_styleURL; int _userTrackingMode; @@ -92,6 +93,7 @@ _map.rotateEnabled = _rotateEnabled; _map.scrollEnabled = _scrollEnabled; _map.zoomEnabled = _zoomEnabled; + _map.pitchEnabled = _pitchEnabled; _map.showsUserLocation = _showsUserLocation; _map.styleURL = _styleURL; _map.zoomLevel = _initialZoomLevel; @@ -289,14 +291,21 @@ { if (_scrollEnabled == scrollEnabled) { return; } _scrollEnabled = scrollEnabled; - if (_map) { _map.scrollEnabled; } + if (_map) { _map.scrollEnabled = scrollEnabled; } } - (void)setZoomEnabled:(BOOL)zoomEnabled { if (_zoomEnabled == zoomEnabled) { return; } _zoomEnabled = zoomEnabled; - if (_map) { _map.zoomEnabled; } + if (_map) { _map.zoomEnabled = zoomEnabled; } +} + +- (void)setPitchEnabled:(BOOL)pitchEnabled +{ + if (_pitchEnabled == pitchEnabled) { return; } + _pitchEnabled = pitchEnabled; + if (_map) { _map.pitchEnabled = pitchEnabled; } } - (void)setAnnotationsPopUpEnabled:(BOOL)annotationsPopUpEnabled diff --git a/ios/RCTMapboxGL/RCTMapboxGLManager.m b/ios/RCTMapboxGL/RCTMapboxGLManager.m index 3c75b45..c2fa962 100644 --- a/ios/RCTMapboxGL/RCTMapboxGLManager.m +++ b/ios/RCTMapboxGL/RCTMapboxGLManager.m @@ -43,6 +43,7 @@ RCT_EXPORT_VIEW_PROPERTY(debugActive, BOOL); RCT_EXPORT_VIEW_PROPERTY(rotateEnabled, BOOL); RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL); RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL); +RCT_EXPORT_VIEW_PROPERTY(pitchEnabled, BOOL); RCT_EXPORT_VIEW_PROPERTY(showsUserLocation, BOOL); RCT_EXPORT_VIEW_PROPERTY(styleURL, NSURL); RCT_EXPORT_VIEW_PROPERTY(userTrackingMode, int); diff --git a/ios/install-cocoapods.md b/ios/install-cocoapods.md index 995475d..b699d0e 100644 --- a/ios/install-cocoapods.md +++ b/ios/install-cocoapods.md @@ -7,12 +7,12 @@ project, you can also add the react-native-mapbox-gl project to your Podfile. 2. In your `podfile`, make sure that `platform :ios, '8.0'` is set to `8.0` 3. Add `pod 'RCTMapboxGL', :path => 'node_modules/react-native-mapbox-gl/ios'` to your `Podfile` file. - (The path dependence on your Podfile location.) + (The path depends on your Podfile location.) 4. Open your Xcode project and ensure that the "Build Settings" parameter "Other linker flags" (`OTHER_LDFLAGS`) contains the CocoaPods generated linker options! * If you have used `react-native init` to setup your project you can just - remove this parameter. Just select the line and press the backspace key. + remove this parameter. Just select the line and press the Delete key. * Alternative, if you setup your Xcode project yourself, ensure that the parent configuration was included with a `$(inherited)` variable. 5. Install the new CocoaPods dependency with `pod install`.