Fix lineGradient showing wrong colors (#1471)

* Fix lineGradient showing wrong colors

`lineMetrics` property was missing.

Fixes https://github.com/react-native-mapbox-gl/maps/issues/1272

* Add line gradient example

* Re-generate documentation

* Update CHANGELOG.md

Co-authored-by: Kid Commit <26439946+ferdicus@users.noreply.github.com>

Author: chuchuva

CHANGELOG.md

@@ -12,6 +12,7 @@ Fix crash with missing okhttp dependency ([#1452](https://github.com/react-nativ
 Move from react-native-testing-library => @testing-library/react-native ([#1453](https://github.com/react-native-mapbox-gl/maps/pull/1453))  
 Feat(camera): maxBounds/(min|max)ZoomLevel can be updated dynamically ([#1462](https://github.com/react-native-mapbox-gl/maps/pull/1462))  
 Refactor(example): clean up folder structure ([#1464](https://github.com/react-native-mapbox-gl/maps/pull/1464))  
+Fix lineGradient showing wrong colors ([#1471](https://github.com/react-native-mapbox-gl/maps/pull/1471))
 Support tintColor on Android ([#1465](https://github.com/react-native-mapbox-gl/maps/pull/1465))  
 Feat(android): dynamically update tintColor & add example ([#1469](https://github.com/react-native-mapbox-gl/maps/pull/1469)
 

android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSource.java

@@ -48,6 +48,7 @@ public class RCTMGLShapeSource extends RCTSource<GeoJsonSource> {
     private Integer mMaxZoom;
     private Integer mBuffer;
     private Double mTolerance;
+    private Boolean mLineMetrics;
 
     private static Bitmap mImagePlaceholder;
     private List<Map.Entry<String, ImageEntry>> mImages;
@@ -121,6 +122,10 @@ public void setTolerance(double tolerance) {
         mTolerance = tolerance;
     }
 
+    public void setLineMetrics(boolean lineMetrics) {
+        mLineMetrics = lineMetrics;
+    }
+
     public void onPress(OnPressEvent event) {
         mManager.handleEvent(FeatureClickEvent.makeShapeSourceEvent(this, event));
     }
@@ -152,6 +157,10 @@ private GeoJsonOptions getOptions() {
             options.withTolerance(mTolerance.floatValue());
         }
 
+        if (mLineMetrics != null) {
+            options.withLineMetrics(mLineMetrics);
+        }
+
         return options;
     }
 

android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/sources/RCTMGLShapeSourceManager.java

@@ -128,6 +128,11 @@ public void setTolerance(RCTMGLShapeSource source, double tolerance) {
         source.setTolerance(tolerance);
     }
 
+    @ReactProp(name = "lineMetrics")
+    public void setLineMetrics(RCTMGLShapeSource source, boolean lineMetrics) {
+        source.setLineMetrics(lineMetrics);
+    }
+
     @ReactProp(name = "hasPressListener")
     public void setHasPressListener(RCTMGLShapeSource source, boolean hasPressListener) {
         source.setHasPressListener(hasPressListener);

docs/ShapeSource.md

@@ -14,6 +14,7 @@
 | maxZoomLevel | `number` | `none` | `false` | Specifies the maximum zoom level at which to create vector tiles.<br/>A greater value produces greater detail at high zoom levels.<br/>The default value is 18. |
 | buffer | `number` | `none` | `false` | Specifies the size of the tile buffer on each side.<br/>A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.<br/>Larger values produce fewer rendering artifacts near tile edges and slower performance.<br/>The default value is 128. |
 | tolerance | `number` | `none` | `false` | Specifies the Douglas-Peucker simplification tolerance.<br/>A greater value produces simpler geometries and improves performance.<br/>The default value is 0.375. |
+| lineMetrics | `bool` | `none` | `false` | Whether to calculate line distance metrics.<br/>This is required for line layers that specify lineGradient values.<br/>The default value is false. |
 | onPress | `func` | `none` | `false` | Source press listener, gets called when a user presses one of the children layers only<br/>if that layer has a higher z-index than another source layers |
 | hitbox | `shape` | `none` | `false` | Overrides the default touch hitbox(44x44 pixels) for the source layers |
 | &nbsp;&nbsp;width | `number` | `none` | `true` | `width` of hitbox |

docs/docs.json

@@ -3720,6 +3720,13 @@
         "default": "none",
         "description": "Specifies the Douglas-Peucker simplification tolerance.\nA greater value produces simpler geometries and improves performance.\nThe default value is 0.375."
       },
+      {
+        "name": "lineMetrics",
+        "required": false,
+        "type": "bool",
+        "default": "none",
+        "description": "Whether to calculate line distance metrics.\nThis is required for line layers that specify lineGradient values.\nThe default value is false."
+      },
       {
         "name": "onPress",
         "required": false,

example/src/examples/LineLayer/GradientLine.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import MapboxGL from '@react-native-mapbox-gl/maps';
+
+import sheet from '../../styles/sheet';
+
+import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
+import Page from '../common/Page';
+
+class GradientLine extends React.Component {
+  static propTypes = {
+    ...BaseExamplePropTypes,
+  };
+
+  render() {
+    return (
+      <Page {...this.props}>
+        <MapboxGL.MapView style={sheet.matchParent}>
+          <MapboxGL.Camera centerCoordinate={[-77.035, 38.875]} zoomLevel={12} />
+          <MapboxGL.ShapeSource id="source1" lineMetrics={true}
+            shape={{
+              type: 'Feature',
+              geometry: {
+                type: 'LineString',
+                coordinates: [
+                  [-77.044211, 38.852924],
+                  [-77.045659, 38.860158],
+                  [-77.044232, 38.862326],
+                  [-77.040879, 38.865454],
+                  [-77.039936, 38.867698],
+                  [-77.040338, 38.86943],
+                  [-77.04264, 38.872528],
+                  [-77.03696, 38.878424],
+                  [-77.032309, 38.87937],
+                  [-77.030056, 38.880945],
+                  [-77.027645, 38.881779],
+                  [-77.026946, 38.882645],
+                  [-77.026942, 38.885502],
+                  [-77.028054, 38.887449],
+                  [-77.02806, 38.892088],
+                  [-77.03364, 38.892108],
+                  [-77.033643, 38.899926],
+                ],
+              },
+            }}>
+            <MapboxGL.LineLayer id="layer1" style={{
+              lineColor: 'red',
+              lineCap: "round",
+              lineJoin: "round",
+              lineWidth: 14,
+              lineGradient: [
+                'interpolate',
+                ['linear'],
+                ['line-progress'],
+                0,
+                'blue',
+                0.1,
+                'royalblue',
+                0.3,
+                'cyan',
+                0.5,
+                'lime',
+                0.7,
+                'yellow',
+                1,
+                'red'
+              ]
+            }} />
+          </MapboxGL.ShapeSource>
+        </MapboxGL.MapView>
+      </Page>
+    );
+  }
+}
+
+export default GradientLine;

example/src/scenes/Home.js

@@ -41,6 +41,9 @@ import QueryAtPoint from '../examples/FillRasterLayer/QueryAtPoint';
 import QueryWithRect from '../examples/FillRasterLayer/QueryWithRect';
 import WatercolorRasterTiles from '../examples/FillRasterLayer/WatercolorRasterTiles';
 
+// LINE LAYER
+import GradientLine from '../examples/LineLayer/GradientLine';
+
 // MAP
 import ChangeLayerColor from '../examples/Map/ChangeLayerColor';
 import CreateOfflineRegion from '../examples/Map/CreateOfflineRegion';
@@ -174,6 +177,9 @@ const Examples = [
       ChoroplethLayerByZoomLevel,
     ),
   ]),
+  new ExampleGroup('LineLayer', [
+    new ExampleItem('GradientLine', GradientLine),
+  ]),
   new ExampleGroup('Annotations', [
     new ExampleItem('Show Point Annotation', ShowPointAnnotation),
     new ExampleItem('Marker View', MarkerView),

index.d.ts

@@ -827,6 +827,7 @@ export interface ShapeSourceProps extends ViewProps {
   maxZoomLevel?: number;
   buffer?: number;
   tolerance?: number;
+  lineMetrics?: boolean;
   images?: { assets?: string[] } & { [key: string]: ImageSourcePropType };
   onPress?: (event: OnPressEvent) => void;
   hitbox?: {

ios/RCTMGL/RCTMGLShapeSource.h

@@ -25,6 +25,7 @@
 @property (nonatomic, strong) NSNumber *maxZoomLevel;
 @property (nonatomic, strong) NSNumber *buffer;
 @property (nonatomic, strong) NSNumber *tolerance;
+@property (nonatomic, strong) NSNumber *lineMetrics;
 
 @property (nonatomic, copy) RCTBubblingEventBlock onPress;
 @property (nonatomic, assign) BOOL hasPressListener;

ios/RCTMGL/RCTMGLShapeSource.m

@@ -94,6 +94,10 @@ - (nullable MGLSource*)makeSource
         options[MGLShapeSourceOptionSimplificationTolerance] = _tolerance;
     }
 
+    if (_lineMetrics != nil) {
+        options[MGLShapeSourceOptionLineDistanceMetrics] = _lineMetrics;
+    }
+
     return options;
 }