[Bug]: How can I use lineZOffset in React Native Mapbox

[huytm2k3]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.76.2

Platform

iOS

@rnmapbox/maps version

#main

Standalone component to reproduce

// <MapboxGL.LineLayer
//    id={`COLLECT_LINESTRING_${lineString.uuid}_LINE_LAYER`}
//    style={{
//      lineColor: checkSelected ? GCColor.colorHighlight : GCColor.colorCollectLine,
//      lineCap: 'round',
//      lineJoin: 'round',
//      lineWidth: checkSelected ? 6 : 3,
//      lineOpacity: overlayOpacity,
//      lineZOffset: 5,
//      lineElevationReference: 'ground',
//    }}
//  />

Observed behavior and steps to reproduce

I want to display a linestring on map with elevation, but application throws this error: [Error: lineZOffset is not a valid Mapbox layer style]

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response

[chris-gaona]

I'm curious the answer to this as well. I have a use case to display elevation for a line string.

[mfazekas]

import React from 'react';
import { MapView, Camera, ShapeSource, LineLayer } from '@rnmapbox/maps';

const styles = {
  matchParent: {
    flex: 1,
  },
  lineLayer: {
    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',
    ],
    lineZOffset: 3,
  },
  lineLayer2: {
    lineColor: 'red',
    lineCap: 'round',
    lineJoin: 'round',
    lineWidth: 7,
    lineGradient: [
      'interpolate',
      ['linear'],
      ['line-progress'],
      0,
      'blue',
      1,
      'red',
    ],
    lineZOffset: 400,
  },
};

const lineString = {
  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],
    ],
  },
};

class GradientLine extends React.Component {
  render() {
    return (
      <>
        <MapView style={styles.matchParent}>
          <Camera
            defaultSettings={{
              centerCoordinate: [-77.035, 38.875],
              zoomLevel: 12,
              pitch: 45,
            }}
          />
          <ShapeSource id="line-source" lineMetrics={true} shape={lineString}>
            <LineLayer id="line-layer" style={styles.lineLayer} />
            <LineLayer id="line-layer2" style={styles.lineLayer2} />
          </ShapeSource>
        </MapView>
      </>
    );
  }
}

export default GradientLine;

So it seems to work fine