refactor!: deprecate android RNMapboxMapsUseV11, also added SmapleMod…

…elLayer (#3225)

android/build.gradle

@@ -58,11 +58,15 @@ android {
         sourceSets {
             main {
                 java.srcDirs = ['src/main/java']
-                if (safeExtGet("RNMapboxMapsUseV11", false)) {
+                def majorMapboxVersion = safeExtGet("RNMapboxMapsVersion", defaultMapboxMapsVersion).split("\\.")[0] as Integer
+                if (majorMapboxVersion >= 11) {
                     java.srcDirs += 'src/main/mapbox-v11-compat/v11'
                 } else {
                     java.srcDirs += 'src/main/mapbox-v11-compat/v10'
                 }
+                if (safeExtGet("RNMapboxMapsUseV11", false)) {
+                    logger.warn("RNMapboxMapsUseV11 is deprecated, just set RNMapboxMapsVersion to 11.*")
+                }
             }
         }
 

android/install.md

@@ -83,8 +83,7 @@ buildscript {
 ```groovy
 buildscript {
     ext {
-        RNMapboxMapsUseV11 = true
-        RNMapboxMapsVersion = '10.6.0'
+        RNMapboxMapsVersion = '11.0.0'
     }
 }
 ```

docs/examples.json

@@ -476,6 +476,19 @@
         "relPath": "V10/QueryTerrainElevation.js",
         "name": "QueryTerrainElevation"
       },
+      {
+        "metadata": {
+          "title": "Simple Model Layer",
+          "tags": [
+            "Models",
+            "ModelLayer"
+          ],
+          "docs": "\nDeomnstrate the use of ModelLayer to render, and Models to associate 3D models with names.\n"
+        },
+        "fullPath": "example/src/examples/V10/SimpleModelLayer.js",
+        "relPath": "V10/SimpleModelLayer.js",
+        "name": "SimpleModelLayer"
+      },
       {
         "metadata": {
           "title": "Terrain, Sky, & Atmosphere",

example/__tests__/dumpExamplesJson.ts

@@ -25,6 +25,10 @@ jest.mock('../src/assets/scale-test-icon4.png', () => null, {
   virtual: true,
 });
 
+jest.mock('../src/assets/sportcar.glb', () => null, {
+  virtual: true,
+});
+
 const allTests = {
   SymbolCircleLayer,
   UserLocation,

example/android/build.gradle

@@ -3,7 +3,6 @@ buildscript {
         RNMapboxMapsImpl = "mapbox"
 
         if (project.hasProperty('RNMBX11') && project.getProperty('RNMBX11').toBoolean()) {
-            RNMapboxMapsUseV11 = true
             RNMapboxMapsVersion = '11.0.0'
         }
 
@@ -13,7 +12,6 @@ buildscript {
             RNMapboxMapsImpl = "mapbox"
             kotlinVersion = '1.6.21'
         } else if (System.getenv('CI_MAP_IMPL').equals('mapbox11')) {
-            RNMapboxMapsUseV11 = true
             RNMapboxMapsVersion = '11.0.0'
             RNMapboxMapsImpl = "mapbox"
         }

example/android/gradle.properties

@@ -24,7 +24,7 @@ android.useAndroidX=true
 # Automatically convert third-party libraries to use AndroidX
 android.enableJetifier=true
 
-RNMBX11=false
+RNMBX11=true
 
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using

example/src/examples/BugReportExample.js

@@ -7,8 +7,6 @@ import {
   SymbolLayer,
   CircleLayer,
   Camera,
-  Models,
-  ModelLayer,
 } from '@rnmapbox/maps';
 
 const styles = {
@@ -82,7 +80,6 @@ class BugReportExample extends React.Component {
         >
           <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
           <Images images={{ example: require('../assets/example.png') }} />
-          <Models models={{ car: require('../assets/sportcar.glb') }} />
           <ShapeSource id={'shape-source-id-0'} shape={features}>
             <CircleLayer
               id={'circle-layer'}
@@ -96,13 +93,6 @@ class BugReportExample extends React.Component {
               }}
               slot={'middle'}
             />
-            <ModelLayer
-              id="model-layer-id"
-              style={{
-                modelId: 'car',
-                modelScale: [50, 50, 50],
-              }}
-            />
           </ShapeSource>
         </MapView>
       </>

example/src/examples/V10/SimpleModelLayer.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import {
+  MapView,
+  ShapeSource,
+  CircleLayer,
+  Camera,
+  Models,
+  ModelLayer,
+} from '@rnmapbox/maps';
+
+const styles = {
+  mapView: { flex: 1 },
+  circleLayer: {
+    circleRadiusTransition: { duration: 5000, delay: 0 },
+    circleColor: '#ff0000',
+  },
+};
+
+const features = {
+  type: 'FeatureCollection',
+  features: [
+    {
+      type: 'Feature',
+      id: 'a-feature',
+      properties: {
+        icon: 'example',
+        text: 'example-icon-and-label',
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: [-74.00597, 40.71427],
+      },
+    },
+    {
+      type: 'Feature',
+      id: 'b-feature',
+      properties: {
+        text: 'just-label',
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: [-74.001097, 40.71527],
+      },
+    },
+    {
+      type: 'Feature',
+      id: 'c-feature',
+      properties: {
+        icon: 'example',
+      },
+      geometry: {
+        type: 'Point',
+        coordinates: [-74.00697, 40.72427],
+      },
+    },
+  ],
+};
+
+const modelLayerStyle = {
+  modelId: 'car',
+  modelScale: [50, 50, 50],
+};
+
+const models = {
+  car: require('../../assets/sportcar.glb'),
+};
+
+class SimpleModelLayer extends React.Component {
+  state = {
+    radius: 20,
+  };
+
+  render() {
+    const circleLayerStyle = {
+      ...styles.circleLayer,
+      ...{ circleRadius: this.state.radius },
+    };
+
+    return (
+      <>
+        <MapView style={styles.mapView}>
+          <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
+          <Models models={models} />
+          <ShapeSource id={'shape-source-id-0'} shape={features}>
+            <CircleLayer
+              id={'circle-layer'}
+              style={circleLayerStyle}
+              slot={'bottom'}
+            />
+            <ModelLayer id="model-layer-id" style={modelLayerStyle} />
+          </ShapeSource>
+        </MapView>
+      </>
+    );
+  }
+}
+
+export default SimpleModelLayer;
+
+/* end-example-doc */
+
+/** @type ExampleWithMetadata['metadata'] */
+const metadata = {
+  title: 'Simple Model Layer',
+  tags: ['Models', 'ModelLayer'],
+  docs: `
+Deomnstrate the use of ModelLayer to render, and Models to associate 3D models with names.
+`,
+};
+SimpleModelLayer.metadata = metadata;

example/src/examples/V10/index.js

@@ -4,6 +4,7 @@ export { default as MapHandlers } from './MapHandlers';
 export { default as Markers } from './Markers';
 export { default as QueryTerrainElevation } from './QueryTerrainElevation';
 export { default as TerrainSkyAtmosphere } from './TerrainSkyAtmosphere';
+export { default as SimpleModelLayer } from './SimpleModelLayer';
 
 export const metadata = {
   title: 'V10',