react-native-mapbox-gl - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

android/API.md

@@ -28,4 +28,14 @@ # Android API Docs
 
-_Not yet implemented_
+Each method also requires you to pass in a string as the first argument which is equal to the `ref` on the map view you wish to modify. See the [example](https://github.com/mapbox/react-native-mapbox-gl/blob/master/android/example.js) on how this is implemented.
 
+| Method Name | Arguments | Notes
+|---|---|---|
+| `setDirectionAnimated` | `mapViewRef`, `heading` | Rotates the map to a new heading
+| `setCenterCoordinateAnimated` | `mapViewRef`, `latitude`, `longitude` | Moves the map to a new coordinate. Note, the zoom level stay at the current zoom level
+| `setCenterCoordinateZoomLevelAnimated` | `mapViewRef`, `latitude`, `longitude`, `zoomLevel` | Moves the map to a new coordinate and zoom level
+| `addAnnotations` | `mapViewRef`, `` (array of annotation objects, see [#annotations](https://github.com/bsudekum/react-native-mapbox-gl/blob/master/android/API.md#annotations)) | Adds annotation(s) to the map without redrawing the map. Note, this will remove all previous annotations from the map.
+| `removeAllAnnotations`  | `mapViewRef` | Removes all annotations on map.
+| `setVisibleCoordinateBoundsAnimated`  | `mapViewRef`, `latitude1`, `longitude1`, `latitude2`, `longitude2`, `padding top`, `padding right`, `padding bottom`, `padding left`  | Changes the viewport to fit the given coordinate bounds and some additional padding on each side.
+| `setUserTrackingMode` | `mapViewRef`, `NONE` or `FOLLOW` | Modifies the tracking mode.
+
 ## GL Styles
@@ -35,7 +45,7 @@
 
-* `asset://styles/dark-v8.json`
-* `asset://styles/light-v8.json`
-* `asset://styles/emerald-v8.json`
-* `asset://styles/streets-v8.json`
-* `asset://styles/satellite-v8.json`
+* `mapbox://styles/dark-v8.json`
+* `mapbox://styles/light-v8.json`
+* `mapbox://styles/emerald-v8.json`
+* `mapbox://styles/streets-v8.json`
+* `mapbox://styles/satellite-v8.json`
 
@@ -42,0 +52,0 @@ ## Annotations

android/example.js

@@ -8,6 +8,9 @@ 'use strict';
   StyleSheet,
-  View
+  View,
+  Text
 } = React;
+var mapRef = 'map';
 
 var MapExample = React.createClass({
+  mixins: [Mapbox.Mixin],
   getInitialState() {
@@ -24,3 +27,8 @@ return {
         subtitle: 'Neat, this is a custom annotation image',
-        id: 'marker2'
+        id: 'marker2',
+        annotationImage: {
+          url: 'https://cldup.com/7NLZklp8zS.png',
+          height: 25,
+          width: 25
+        }
       }, {
@@ -49,14 +57,47 @@ coordinates: [40.7923, -73.9178],
   },
-  onRegionChange(location) {
+  onUserLocationChange(location) {
     console.log(location);
   },
-  render: function() {
+  render() {
     return (
       <View style={styles.container}>
+        <Text style={styles.text} onPress={() => this.setDirectionAnimated(mapRef, 0)}>
+          Set direction to 0
+        </Text>
+        <Text style={styles.text} onPress={() => this.setCenterCoordinateAnimated(mapRef, 40.68454331694491, -73.93592834472656)}>
+          Go to New York at current zoom level
+        </Text>
+        <Text style={styles.text} onPress={() => this.setCenterCoordinateZoomLevelAnimated(mapRef, 35.68829, 139.77492, 14)}>
+          Go to Tokyo at fixed zoom level 14
+        </Text>
+        <Text style={styles.text} onPress={() => this.addAnnotations(mapRef, [{
+          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
+        </Text>
+        <Text style={styles.text} onPress={() => this.setUserTrackingMode(mapRef, this.userTrackingMode.follow)}>
+          Set userTrackingMode to follow
+        </Text>
+        <Text style={styles.text} onPress={() => this.removeAllAnnotations(mapRef)}>
+          Remove all annotations
+        </Text>
+        <Text style={styles.text} onPress={() => this.setTilt(mapRef, 50)}>
+          Set tilt to 50
+        </Text>
+        <Text style={styles.text} onPress={() => this.setVisibleCoordinateBoundsAnimated(mapRef, 40.712, -74.227, 40.774, -74.125, 100, 100, 100, 100)}>
+          Set visible bounds to 40.7, -74.2, 40.7, -74.1
+        </Text>
         <Mapbox
           annotations={this.state.annotations}
-          accessToken={'mapbox-access-token'}
+          accessToken={'your-mapbox.com-access-token'}
           centerCoordinate={this.state.center}
           debugActive={false}
-          direction={0}
+          direction={10}
+          ref={mapRef}
           onRegionChange={this.onRegionChange}
@@ -67,6 +108,8 @@ rotationEnabled={true}
           showsUserLocation={true}
-          styleUrl={'asset://styles/streets-v8.json'}
-          UserLocationTrackingMode={'FOLLOW'}
+          styleUrl={this.mapStyles.emerald}
+          userTrackingMode={this.userTrackingMode.none}
           zoomEnabled={true}
           zoomLevel={10}
+          compassIsHidden={true}
+          onUserLocationChange={this.onUserLocationChange}
         />
@@ -82,4 +125,7 @@ </View>
   },
+  text: {
+    padding: 3,
+    marginLeft: 5
+  },
   map: {
-    width: require('Dimensions').get('window').width,
     flex: 1
@@ -86,0 +132,0 @@ }

android/install.md

@@ -14,3 +14,3 @@ #### Step 1 - NPM Install
 
-include ':reactnativemapboxgl', ':app'
+include ':reactnativemapboxgl'
 project(':reactnativemapboxgl').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-mapbox-gl/android')
@@ -17,0 +17,0 @@ ```

CHANGELOG.md

@@ -0,1 +1,22 @@
+#v3.0.0
+
+With `v3.0.0` most breaking changes are around annotations. Now, to remove or select an annotation, you must provide the `id` of the annotation. On all annotations added to the map, an `id` is now required.
+
+Example:
+
+```js
+this.selectAnnotationAnimated('the-map-ref', 'storeLocation1');
+```
+
+This will open the point annotation with `id` `storeLocation1`. The same concept is applied to removing specific annotations:
+
+```js
+this.removeAnnotation('the-map-ref', 'marker2');
+```
+
+Changes:
+* [iOS & Android] Adds method `removeAllAnnotations`
+* [Android] `userTrackingMode` is now configured like iOS with constants. Example: `userTrackingMode={this.userTrackingMode.none}`
+* [Android] `styleURL` is now configured like iOS with constants. Example: `styleURL={this.mapStyles.emerald}`
+
 #v2.2.0
@@ -2,0 +23,0 @@

index.android.js

@@ -6,2 +6,40 @@ 'use strict'
 
+var MapMixins = {
+  setDirectionAnimated(mapRef, heading) {
+    NativeModules.MapboxGLManager.setDirectionAnimated(React.findNodeHandle(this.refs[mapRef]), heading);
+  },
+  setZoomLevelAnimated(mapRef, zoomLevel) {
+    NativeModules.MapboxGLManager.setZoomLevelAnimated(React.findNodeHandle(this.refs[mapRef]), zoomLevel);
+  },
+  setCenterCoordinateAnimated(mapRef, latitude, longitude) {
+    NativeModules.MapboxGLManager.setCenterCoordinateAnimated(React.findNodeHandle(this.refs[mapRef]), latitude, longitude);
+  },
+  setCenterCoordinateZoomLevelAnimated(mapRef, latitude, longitude, zoomLevel) {
+    NativeModules.MapboxGLManager.setCenterCoordinateZoomLevelAnimated(React.findNodeHandle(this.refs[mapRef]), latitude, longitude, zoomLevel);
+  },
+  addAnnotations(mapRef, annotations) {
+    NativeModules.MapboxGLManager.addAnnotations(React.findNodeHandle(this.refs[mapRef]), annotations);
+  },
+  selectAnnotationAnimated(mapRef, selectedIdentifier) {
+    NativeModules.MapboxGLManager.selectAnnotationAnimated(React.findNodeHandle(this.refs[mapRef]), selectedIdentifier);
+  },
+  removeAnnotation(mapRef, selectedIdentifier) {
+    NativeModules.MapboxGLManager.removeAnnotation(React.findNodeHandle(this.refs[mapRef]), selectedIdentifier);
+  },
+  removeAllAnnotations(mapRef) {
+    NativeModules.MapboxGLManager.removeAllAnnotations(React.findNodeHandle(this.refs[mapRef]));
+  },
+  setVisibleCoordinateBoundsAnimated(mapRef, latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft) {
+    NativeModules.MapboxGLManager.setVisibleCoordinateBoundsAnimated(React.findNodeHandle(this.refs[mapRef]), latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft);
+  },
+  setUserTrackingMode(mapRef, userTrackingMode) {
+    NativeModules.MapboxGLManager.setUserTrackingMode(React.findNodeHandle(this.refs[mapRef]), userTrackingMode);
+  },
+  setTilt(mapRef, tilt) {
+    NativeModules.MapboxGLManager.setTilt(React.findNodeHandle(this.refs[mapRef]), tilt);
+  },
+  mapStyles: NativeModules.MapboxGLManager.mapStyles,
+  userTrackingMode: NativeModules.MapboxGLManager.userTrackingMode
+};
+
 var ReactMapView = requireNativeComponent('RCTMapbox', {
@@ -24,2 +62,3 @@ name: 'RCTMapbox',
       }),
+      centerCoordinateZoom: React.PropTypes.shape(),
       debugActive: React.PropTypes.bool,
@@ -31,6 +70,9 @@ direction: React.PropTypes.number,
       styleUrl: React.PropTypes.string,
-      UserLocationTrackingMode: React.PropTypes.oneOf(['NONE', 'FOLLOW']),
+      userTrackingMode: React.PropTypes.number,
       zoomEnabled: React.PropTypes.bool,
       zoomLevel: React.PropTypes.number,
+      tilt: React.PropTypes.number,
+      compassIsHidden: React.PropTypes.bool,
       onRegionChange: React.PropTypes.func,
+      onUserLocationChange: React.PropTypes.func,
       // Fix for https://github.com/mapbox/react-native-mapbox-gl/issues/118
@@ -62,6 +104,8 @@ scaleY: React.PropTypes.number,
         showsUserLocation: false,
-        styleUrl: 'asset://styles/streets-v8.json',
-        UserLocationTrackingMode: 'NONE',
+        styleUrl: NativeModules.MapboxGLManager.mapStyles.streets,
+        userTrackingMode: NativeModules.MapboxGLManager.userTrackingMode.none,
         zoomEnabled: true,
-        zoomLevel: 0
+        zoomLevel: 0,
+        tilt: 0,
+        compassIsHidden: false
       };
@@ -72,9 +116,18 @@ }
 var ReactMapViewWrapper = React.createClass({
+  statics: {
+    Mixin: MapMixins
+  },
   handleOnChange(event) {
     if (this.props.onRegionChange) this.props.onRegionChange(event.nativeEvent.src);
   },
+  handleUserLocation(event) {
+    if (this.props.onUserLocationChange) this.props.onUserLocationChange(event.nativeEvent.src);
+  },
   render() {
-    return <ReactMapView
-      {...this.props}
-      onChange={this.handleOnChange} />
+    return (
+      <ReactMapView
+        {...this.props}
+        onChange={this.handleOnChange}
+        onSelect={this.handleUserLocation} />
+    );
   }
@@ -81,0 +134,0 @@ });

index.ios.js

@@ -22,8 +22,11 @@ 'use strict';
   },
-  selectAnnotationAnimated(mapRef, annotationInArray) {
-    NativeModules.MapboxGLManager.selectAnnotationAnimated(React.findNodeHandle(this.refs[mapRef]), annotationInArray);
+  selectAnnotationAnimated(mapRef, selectedIdentifier) {
+    NativeModules.MapboxGLManager.selectAnnotationAnimated(React.findNodeHandle(this.refs[mapRef]), selectedIdentifier);
   },
-  removeAnnotation(mapRef, annotationInArray) {
-    NativeModules.MapboxGLManager.removeAnnotation(React.findNodeHandle(this.refs[mapRef]), annotationInArray);
+  removeAnnotation(mapRef, selectedIdentifier) {
+    NativeModules.MapboxGLManager.removeAnnotation(React.findNodeHandle(this.refs[mapRef]), selectedIdentifier);
   },
+  removeAllAnnotations(mapRef) {
+    NativeModules.MapboxGLManager.removeAllAnnotations(React.findNodeHandle(this.refs[mapRef]));
+  },
   setVisibleCoordinateBoundsAnimated(mapRef, latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft) {
@@ -92,8 +95,8 @@ NativeModules.MapboxGLManager.setVisibleCoordinateBoundsAnimated(React.findNodeHandle(this.refs[mapRef]), latitudeSW, longitudeSW, latitudeNE, longitudeNE, paddingTop, paddingRight, paddingBottom, paddingLeft);
       fillAlpha: React.PropTypes.number,
-      fillColor: React.PropTypes.sting,
+      fillColor: React.PropTypes.string,
       strokeAlpha: React.PropTypes.number,
-      strokeColor: React.PropTypes.sting,
+      strokeColor: React.PropTypes.string,
       strokeWidth: React.PropTypes.number,
       id: React.PropTypes.string,
-      type: React.PropTypes.stringisRequired,
+      type: React.PropTypes.string.isRequired,
       rightCalloutAccessory: React.PropTypes.object({
@@ -100,0 +103,0 @@ height: React.PropTypes.number,

ios/API.md

@@ -42,3 +42,3 @@ # iOS API Docs
 
-These methods require you to use `MapboxGLMap.Mixin` to access the methods. Each method also requires you to pass in a string as the first argument which is equal to the `ref` on the map view you wish to modify. See the [example](https://github.com/bsudekum/react-native-mapbox-gl/blob/master/example.js) on how this is implemented.
+These methods require you to use `MapboxGLMap.Mixin` to access the methods. Each method also requires you to pass in a string as the first argument which is equal to the `ref` on the map view you wish to modify. See the [example](https://github.com/mapbox/react-native-mapbox-gl/blob/master/ios/example.js) on how this is implemented.
 
@@ -52,4 +52,5 @@ | Method Name | Arguments | Notes
 | `addAnnotations` | `mapViewRef`, `` (array of annotation objects, see [#annotations](https://github.com/bsudekum/react-native-mapbox-gl/blob/master/API.md#annotations)) | Adds annotation(s) to the map without redrawing the map. Note, this will remove all previous annotations from the map.
-| `selectAnnotationAnimated` | `mapViewRef`, `annotationPlaceInArray` | Open the callout of the selected annotation. This method works with the current annotations on the map. `annotationPlaceInArray` starts at 0 and refers to the first annotation.
-| `removeAnnotation`  | `mapViewRef`, `annotationPlaceInArray` | Removes the selected annotation from the map. This method works with the current annotations on the map. `annotationPlaceInArray` starts at 0 and refers to the first annotation.
+| `selectAnnotationAnimated` | `mapViewRef`, `marker id` | Open the callout of the selected annotation. This method requires that you supply an id to an annotation when creating. If 2 annotations have the same id, only the first annotation will be selected. Only works on annotation `type = 'point'``.
+| `removeAnnotation`  | `mapViewRef`, `marker id` | Removes annotation from map. This method requires that you supply an id to an annotation when creating. If 2 annotations have the same id, only the first will be removed.
+| `removeAllAnnotations`  | `mapViewRef`| Removes all annotations from the map.
 | `setVisibleCoordinateBoundsAnimated`  | `mapViewRef`, `latitude1`, `longitude1`, `latitude2`, `longitude2`, `padding top`, `padding right`, `padding bottom`, `padding left`  | Changes the viewport to fit the given coordinate bounds and some additional padding on each side.
@@ -101,3 +102,3 @@ | `setUserTrackingMode` | `mapViewRef`, `userTrackingMode` | Modifies the tracking mode. Valid args: `this.userTrackingMode.none`, `this.userTrackingMode.follow`, `this.userTrackingMode.followWithCourse`, `this.userTrackingMode.followWithHeading`
   "strokeWidth": "optional number. Only used for type=poyline. Controls line width",
-  "id": "optional string, unique identifier.",
+  "id": "required string, unique identifier. Used for adding or selecting an annotation.",
   "rightCalloutAccessory": {
@@ -152,3 +153,3 @@ "url": "Optional. Either remote image or specify via 'image!yourImage.png'",
   "strokeAlpha": 0.5,
-  "id": "foobar"
+  "id": "line"
 }, {
@@ -160,4 +161,4 @@ "coordinates": [[40.749857912194386, -73.96820068359375], [40.741924698522055,-73.9735221862793], [40.735681504432264,-73.97523880004883], [40.7315190495212,-73.97438049316406], [40.729177554196376,-73.97180557250975], [40.72345355209305,-73.97438049316406], [40.719290332250544,-73.97455215454102], [40.71369559554873,-73.97729873657227], [40.71200407096382,-73.97850036621094], [40.71031250340588,-73.98691177368163], [40.71031250340588,-73.99154663085938]],
   "strokeColor": "#DDDDD",
-  "id": "zap"
+  "id": "route"
 }]
 ```

ios/example.js

@@ -116,8 +116,11 @@ 'use strict';
         </Text>
-        <Text style={styles.text} onPress={() => this.selectAnnotationAnimated(mapRef, 0)}>
-          Open first popup
+        <Text style={styles.text} onPress={() => this.selectAnnotationAnimated(mapRef, 'marker1')}>
+          Open marker1 popup
         </Text>
-        <Text style={styles.text} onPress={() => this.removeAnnotation(mapRef, 0)}>
-          Remove first annotation
+        <Text style={styles.text} onPress={() => this.removeAnnotation(mapRef, 'marker2')}>
+          Remove marker2 annotation
         </Text>
+        <Text style={styles.text} onPress={() => this.removeAllAnnotations(mapRef)}>
+          Remove all annotations
+        </Text>
         <Text style={styles.text} onPress={() => this.setVisibleCoordinateBoundsAnimated(mapRef, 40.712, -74.227, 40.774, -74.125, 100, 0, 0, 0)}>
@@ -124,0 +127,0 @@ Set visible bounds to 40.7, -74.2, 40.7, -74.1

package.json

 {
   "name": "react-native-mapbox-gl",
   "description": "A Mapbox GL react native module for creating custom maps",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "author": "Bobby Sudekum",
@@ -6,0 +6,0 @@ "keywords": [

readme.md

 # React Native Mapbox GL
 
-_A React Native component for building maps with [Mapbox GL](https://www.mapbox.com/mapbox-gl/) for iOS and Android_
+_A React Native component for building maps with the [Mapbox iOS SDK](https://www.mapbox.com/ios-sdk/) and [Mapbox Android SDK](https://www.mapbox.com/android-sdk/)_
 
 [![npm version](https://badge.fury.io/js/react-native-mapbox-gl.svg)](https://badge.fury.io/js/react-native-mapbox-gl)
 
-*Current version of `react-native-mapbox-gl@2.1.4` requires `react-native@0.16.0`*
+*Current version of `react-native-mapbox-gl@3.0.0` requires `react-native@0.16.0`*
 
@@ -27,1 +27,3 @@ ```
 ![](http://i.imgur.com/I8XkXcS.jpg)
+
+*Need help? [Join the Discord channel](https://discord.gg/0iAWSG9X4zDK8ptn)*

Fixed alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

29

increased by7.41%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

152648

decreased by-99.82%

Number of package files

28

decreased by-46.15%

Lines of code

575

decreased by-17.5%

No dependency changes