Merge remote-tracking branch 'upstream/main' into OB1

README.md

@@ -154,7 +154,7 @@ const styles = StyleSheet.create({
 - [Callout](/docs/Callout.md)
 - [Camera](docs/Camera.md)
 - [UserLocation](docs/UserLocation.md)
-- [LocaitonPuck](docs/LocationPuck.md)
+- [LocationPuck](docs/LocationPuck.md)
 - [Images](docs/Images.md)
 - [Image](docs/Image.md)
 - [Models](docs/Models.md)

android/build.gradle

@@ -1,5 +1,5 @@
 def defaultMapboxMapsImpl = "mapbox"
-def defaultMapboxMapsVersion = "10.16.3"
+def defaultMapboxMapsVersion = "10.16.4"
 
 def safeExtGet(prop, fallback) {
     rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback

android/install.md

@@ -46,7 +46,7 @@ Set `RNMapboxMapsVersion` in `android/build.gradle > buildscript > ext` section
 ```groovy
 buildscript {
     ext {
-        RNMapboxMapsVersion = '11.0.0'
+        RNMapboxMapsVersion = '11.1.0'
     }
 }
 ```

android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapView.kt

@@ -1512,14 +1512,18 @@ fun RNMBXMapView.updateRequestDisallowInterceptTouchEvent(oldValue: Boolean, val
         return
     }
     if (value) {
-        mapView.setOnTouchListener { view, event ->
-            this.requestDisallowInterceptTouchEvent(true)
-            mapView.onTouchEvent(event)
-            true
+        withMapView {
+            it.setOnTouchListener { view, event ->
+                this.requestDisallowInterceptTouchEvent(true)
+                mapView.onTouchEvent(event)
+                true
+            }
         }
     } else {
-        mapView.setOnTouchListener { view, event ->
-            mapView.onTouchEvent(event)
+        withMapView {
+            it.setOnTouchListener { view, event ->
+                mapView.onTouchEvent(event)
+            }
         }
     }
 }

android/src/main/java/com/rnmapbox/rnmbx/components/styles/sources/RNMBXRasterDemSource.kt

@@ -21,6 +21,9 @@ import com.rnmapbox.rnmbx.v11compat.feature.*
 // import com.rnmapbox.rnmbx.utils.DownloadMapImageTask;
 class RNMBXRasterDemSource(context: Context?, private val mManager: RNMBXRasterDemSourceManager) :
     RNMBXTileSource<RasterDemSource?>(context) {
+
+    private var tileSize: Long? = null
+
     override fun onPress(event: OnPressEvent?) {
         mManager.handleEvent(FeatureClickEvent.makeVectorSourceEvent(this, event))
     }
@@ -35,15 +38,18 @@ class RNMBXRasterDemSource(context: Context?, private val mManager: RNMBXRasterD
             return mMap!!.getStyle()!!.getSource(DEFAULT_ID) as RasterDemSource
         }
         val configurationUrl = uRL
-        return if (configurationUrl != null) {
-            RasterDemSource(
-                RasterDemSource.Builder(id)
-                    .url(configurationUrl)
-            )
-        } else RasterDemSource(
+
+        val builder = if (configurationUrl != null) {
+            RasterDemSource.Builder(id)
+                .url(configurationUrl)
+        } else {
             RasterDemSource.Builder(id)
                 .tileSet(buildTileset())
-        )
+        }
+
+        tileSize?.let { builder.tileSize(it) }
+
+        return RasterDemSource(builder)
     }
 
     fun querySourceFeatures(
@@ -81,4 +87,8 @@ class RNMBXRasterDemSource(context: Context?, private val mManager: RNMBXRasterD
     override fun hasNoDataSoRefersToExisting(): Boolean {
         return uRL == null && tileUrlTemplates.isEmpty()
     }
+
+    fun setTileSize(tileSize: Int) {
+        this.tileSize = tileSize.toLong()
+    }
 }

android/src/main/java/com/rnmapbox/rnmbx/components/styles/sources/RNMBXRasterDemSourceManager.kt

@@ -39,6 +39,6 @@ class RNMBXRasterDemSourceManager(private val mContext: ReactApplicationContext)
 
     @ReactProp(name = "tileSize")
     override fun setTileSize(view: RNMBXRasterDemSource, value: Dynamic) {
-        Logger.e("RNMBXRasterDemSourceManager", "tileSize not implemented")
+        view.setTileSize(value.asInt())
     }
 }

docs/examples.json

@@ -468,9 +468,12 @@
         "metadata": {
           "title": "Query Terrain Elevation",
           "tags": [
-            "MapView#queryTerrainElevation"
+            "MapView#queryTerrainElevation",
+            "AnimatedShape",
+            "AnimatedRouteCoordinatesArray",
+            "AnimatedExtractCoordinateFromArray"
           ],
-          "docs": "\nQuery Terrain Elevation\n"
+          "docs": "\nThis is a fairly complex example demonstraing the use of AnimatedShape, Camera animation, queryTerrainElevation and AnimatedMarkerView\n"
         },
         "fullPath": "example/src/examples/V10/QueryTerrainElevation.js",
         "relPath": "V10/QueryTerrainElevation.js",

example/android/build.gradle

@@ -8,10 +8,10 @@ buildscript {
             RNMapboxMapsImpl = "mapbox"
             kotlinVersion = '1.6.21'
         } else if (System.getenv('CI_MAP_IMPL').equals('mapbox11')) {
-            RNMapboxMapsVersion = '11.0.0'
+            RNMapboxMapsVersion = '11.1.0'
             RNMapboxMapsImpl = "mapbox"
         } else if (project.hasProperty('RNMBX11') && project.getProperty('RNMBX11').toBoolean()) {
-            RNMapboxMapsVersion = '11.0.0'
+            RNMapboxMapsVersion = '11.1.0'
         }
 
         // Mapbox deps

example/ios/Podfile

@@ -10,7 +10,7 @@ prepare_react_native_project!
 
 $RNMapboxMapsImpl = 'mapbox'
 if ENV['RNMBX11']
-  $RNMapboxMapsVersion = '= 11.0.0'
+  $RNMapboxMapsVersion = '= 11.1.0'
 end
 
 if ENV['CI_MAP_IMPL']

example/src/examples/Animations/AnimatedLine.js

@@ -1,6 +1,14 @@
 import React from 'react';
 import { Easing, Button } from 'react-native';
-import { Animated, MapView, Camera } from '@rnmapbox/maps';
+import {
+  Animated,
+  MapView,
+  Camera,
+  AnimatedRouteCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedCoordinatesArray,
+  AnimatedShape,
+} from '@rnmapbox/maps';
 import along from '@turf/along';
 import length from '@turf/length';
 import { point, lineString } from '@turf/helpers';
@@ -47,7 +55,7 @@ class AnimatedLine extends React.Component {
   constructor(props) {
     super(props);
 
-    const route = new Animated.RouteCoordinatesArray([
+    const route = new AnimatedRouteCoordinatesArray([
       [blon, blat],
       [blon, blat + 2 * bdelta],
       [blon + bdelta, blat + 2 * bdelta + bdelta],
@@ -58,7 +66,7 @@ class AnimatedLine extends React.Component {
       backgroundColor: 'blue',
       coordinates: [[-73.99155, 40.73581]],
 
-      shape: new Animated.CoordinatesArray(
+      shape: new AnimatedCoordinatesArray(
         [...Array(steps).keys()].map((v, i) => [
           lon + delta * (i / steps) * (i / steps),
           lat + (delta * i) / steps,
@@ -69,7 +77,7 @@ class AnimatedLine extends React.Component {
         features: [],
       },
       route,
-      actPoint: new Animated.ExtractCoordinateFromArray(route, -1),
+      actPoint: new AnimatedExtractCoordinateFromArray(route, -1),
     };
   }
 
@@ -219,7 +227,7 @@ class AnimatedLine extends React.Component {
           <Animated.ShapeSource
             id={'route'}
             shape={
-              new Animated.Shape({
+              new AnimatedShape({
                 type: 'LineString',
                 coordinates: this.state.route,
               })
@@ -231,7 +239,7 @@ class AnimatedLine extends React.Component {
           <Animated.ShapeSource
             id="currentLocationSource"
             shape={
-              new Animated.Shape({
+              new AnimatedShape({
                 type: 'Point',
                 coordinates: this.state.actPoint,
               })
@@ -246,7 +254,7 @@ class AnimatedLine extends React.Component {
           <Animated.ShapeSource
             id={'shape'}
             shape={
-              new Animated.Shape({
+              new AnimatedShape({
                 type: 'LineString',
                 coordinates: this.state.shape,
               })

example/src/examples/FillRasterLayer/RasterSource.js

@@ -22,7 +22,7 @@ export default function RasterSourceExample() {
       />
       <RasterSource
         id="stamen-watercolor"
-        titleSize={256}
+        tileSize={256}
         tileUrlTemplates={['https://tile.openstreetmap.org/{z}/{x}/{y}.png']}
       />
       <RasterLayer

example/src/examples/V10/QueryTerrainElevation.js

@@ -5,20 +5,19 @@ import { lineString } from '@turf/helpers';
 import { Animated as RNAnimated } from 'react-native';
 import {
   MapView,
-  ShapeSource,
-  LineLayer,
   SkyLayer,
   Camera,
   Logger,
   Terrain,
   RasterDemSource,
   Animated,
+  AnimatedShape,
+  AnimatedRouteCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
   MarkerView,
   Atmosphere,
 } from '@rnmapbox/maps';
 
-import Page from '../common/Page';
-
 Logger.setLogLevel('verbose');
 
 const AnimatedMarkerView = RNAnimated.createAnimatedComponent(MarkerView);
@@ -39,11 +38,9 @@ const styles = {
   }),
 };
 
-const QueryTerrainElevation = ({ ...props }) => {
-  let [routeGeojson, setRouteGeojson] = useState(null);
+const QueryTerrainElevation = () => {
   let [animatedRoute, setAnimatedRoute] = useState(null);
   let [actPoint, setActPoint] = useState(null);
-  // let [pinRoute, setPinRoute] = useState(null);
   let camera = useRef();
   let [altitude, setAltitude] = useState(null);
   let updateAltitudeInterval = useRef();
@@ -93,21 +90,20 @@ const QueryTerrainElevation = ({ ...props }) => {
         'https://docs.mapbox.com/mapbox-gl-js/assets/route-pin.geojson',
       );
       let featureCollection = await response.json();
-      setRouteGeojson(featureCollection);
+
       let pinRoute = featureCollection.features[0].geometry.coordinates;
 
-      let animatedRoute = new Animated.RouteCoordinatesArray(pinRoute, {
+      let animatedRoute = new AnimatedRouteCoordinatesArray(pinRoute, {
         end: {
           from: length(lineString(pinRoute)),
         },
       });
       setAnimatedRoute(animatedRoute);
-      setActPoint(new Animated.ExtractCoordinateFromArray(animatedRoute, -1));
-      //setPinRoute(pinRoute);
+      setActPoint(new AnimatedExtractCoordinateFromArray(animatedRoute, -1));
     })();
   }, []);
   return (
-    <Page {...props}>
+    <>
       <Button title="Start" onPress={() => startAnimation(animatedRoute)} />
       <MapView
         style={styles.mapView}
@@ -140,32 +136,19 @@ const QueryTerrainElevation = ({ ...props }) => {
           <Atmosphere
             style={{
               starIntensity: 1.0,
-              range: [-3.5, 10.0],
-              spaceColor: '#00ffff',
-              color: '#00ff00',
-              highColor: '#ff00ff',
+              range: [-0.7, 2.0],
+              spaceColor: '#def',
+              color: '#def',
+              highColor: '#def',
             }}
           />
         </RasterDemSource>
 
-        {routeGeojson && false && (
-          <ShapeSource id="route" shape={routeGeojson}>
-            <LineLayer
-              id="root"
-              style={{
-                lineColor: 'rgba(0,0,255,0)',
-                lineWidth: 5,
-                lineCap: 'round',
-                lineJoin: 'round',
-              }}
-            />
-          </ShapeSource>
-        )}
         {animatedRoute && (
           <Animated.ShapeSource
             id="animated-route"
             shape={
-              new Animated.Shape({
+              new AnimatedShape({
                 type: 'LineString',
                 coordinates: animatedRoute,
               })
@@ -174,7 +157,7 @@ const QueryTerrainElevation = ({ ...props }) => {
             <Animated.LineLayer
               id={'animated-route'}
               style={{
-                lineColor: 'rgba(255,0,0,0)',
+                lineColor: 'rgba(255,0,0,255)',
                 lineWidth: 3,
                 lineCap: 'round',
                 lineJoin: 'round',
@@ -187,7 +170,7 @@ const QueryTerrainElevation = ({ ...props }) => {
           <Animated.ShapeSource
             id="currentLocationSource"
             shape={
-              new Animated.Shape({
+              new AnimatedShape({
                 type: 'Point',
                 coordinates: actPoint,
               })
@@ -224,7 +207,7 @@ const QueryTerrainElevation = ({ ...props }) => {
           </AnimatedMarkerView>
         )}
       </MapView>
-    </Page>
+    </>
   );
 };
 
@@ -235,9 +218,14 @@ export default QueryTerrainElevation;
 /** @type ExampleWithMetadata['metadata'] */
 const metadata = {
   title: 'Query Terrain Elevation',
-  tags: ['MapView#queryTerrainElevation'],
+  tags: [
+    'MapView#queryTerrainElevation',
+    'AnimatedShape',
+    'AnimatedRouteCoordinatesArray',
+    'AnimatedExtractCoordinateFromArray',
+  ],
   docs: `
-Query Terrain Elevation
+This is a fairly complex example demonstraing the use of AnimatedShape, Camera animation, queryTerrainElevation and AnimatedMarkerView
 `,
 };
 QueryTerrainElevation.metadata = metadata;

ios/install.md

@@ -69,7 +69,7 @@ We have support for mapbox 11.
 Add the following to your Podfile:
 
 ```ruby
-$RNMapboxMapsVersion = '= 11.0.0'
+$RNMapboxMapsVersion = '= 11.1.0'
 ```
 
 If using expo managed workflow, set the "RNMapboxMapsVersion" variable. See the [expo guide](/plugin/install.md)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.1.6",
+  "version": "10.1.8",
   "publishConfig": {
     "access": "public"
   },