feat: add symbolZOffset to symbol layer

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

@@ -194,6 +194,8 @@ object RNMBXStyleFactory {
                 setSymbolAvoidEdges(layer, styleValue)
               "symbolSortKey" ->
                 setSymbolSortKey(layer, styleValue)
+              "symbolZOffset" ->
+                setSymbolZOffset(layer, styleValue)
               "symbolZOrder" ->
                 setSymbolZOrder(layer, styleValue)
               "iconAllowOverlap" ->
@@ -1559,6 +1561,24 @@ object RNMBXStyleFactory {
       }
     }
 
+    fun setSymbolZOffset(layer: SymbolLayer, styleValue: RNMBXStyleValue ) {
+      if (styleValue.isExpression()) {
+        val expression = styleValue.getExpression()
+        if (expression != null) {
+          layer.symbolZOffset(expression)
+        } else {
+          Logger.e("RNMBXSymbol", "Expression for symbolZOffset is null")
+        }
+      } else {
+          val value = styleValue.getDouble(VALUE_KEY)
+          if (value != null) {
+            layer.symbolZOffset(value)
+          } else {
+            Logger.e("RNMBXSymbol", "value for symbolZOffset is null")
+          }
+      }
+    }
+
     fun setSymbolZOrder(layer: SymbolLayer, styleValue: RNMBXStyleValue ) {
       if (styleValue.isExpression()) {
         val expression = styleValue.getExpression()

docs/SymbolLayer.md

@@ -150,6 +150,7 @@ This is now deprecated, use Image component instead.
 * <a href="#symbolplacement">symbolPlacement</a><br/>
 * <a href="#symbolspacing">symbolSpacing</a><br/>
 * <a href="#symbolavoidedges">symbolAvoidEdges</a><br/>
+* <a href="#symbolzoffset">symbolZOffset</a><br/>
 * <a href="#symbolsortkey">symbolSortKey</a><br/>
 * <a href="#symbolzorder">symbolZOrder</a><br/>
 * <a href="#iconallowoverlap">iconAllowOverlap</a><br/>

docs/docs.json

@@ -5904,6 +5904,29 @@
           "namespace": "layout"
         }
       },
+      {
+        "name": "symbolZOffset",
+        "type": "number",
+        "values": [],
+        "units": "meters",
+        "default": 0,
+        "description": "Specifies an uniform elevation from the ground, in meters.",
+        "requires": [],
+        "disabledBy": [],
+        "allowedFunctionTypes": [],
+        "expression": {
+          "interpolated": true,
+          "parameters": [ 
+            "zoom",
+            "feature"
+          ]
+        },
+        "mbx": {
+          "fullName": "paint-symbol-symbol-z-offset",
+          "name": "symbol-z-offset",
+          "namespace": "paint"
+        }
+      },
       {
         "name": "symbolZOrder",
         "type": "enum",

ios/RNMBX/RNMBXStyle.swift

@@ -177,6 +177,8 @@ func symbolLayer(layer: inout SymbolLayer, reactStyle:Dictionary<String, Any>, o
       self.setSymbolAvoidEdges(&layer, styleValue:styleValue);
     } else if (prop == "symbolSortKey") {
       self.setSymbolSortKey(&layer, styleValue:styleValue);
+    } else if (prop == "symbolZOffset") {
+      self.setSymbolZOffset(&layer, styleValue:styleValue);
     } else if (prop == "symbolZOrder") {
       self.setSymbolZOrder(&layer, styleValue:styleValue);
     } else if (prop == "iconAllowOverlap") {
@@ -1283,6 +1285,15 @@ func setSymbolSortKey(_ layer: inout SymbolLayer, styleValue: RNMBXStyleValue)
           layer.symbolSortKey = styleValue.mglStyleValueNumber();
 
 
+}
+
+func setSymbolZOffset(_ layer: inout SymbolLayer, styleValue: RNMBXStyleValue)
+{
+
+
+          layer.symbolZOffset = styleValue.mglStyleValueNumber();
+
+
 }
 
 func setSymbolZOrder(_ layer: inout SymbolLayer, styleValue: RNMBXStyleValue)

src/utils/MapboxStyles.d.ts

@@ -689,6 +689,10 @@ export interface SymbolLayerStyleProps {
    * Sorts features in ascending order based on this value. Features with lower sort keys are drawn and placed first. When `iconAllowOverlap` or `textAllowOverlap` is `false`, features with a lower sort key will have priority during placement. When `iconAllowOverlap` or `textAllowOverlap` is set to `true`, features with a higher sort key will overlap over features with a lower sort key.
    */
   symbolSortKey?: Value<number, ['zoom', 'feature']>;
+  /**
+   * Specifies an uniform elevation from the ground, in meters.
+   */
+  symbolZOffset?: Value<number, ['zoom', 'feature']>;
   /**
    * Determines whether overlapping symbols in the same layer are rendered in the order that they appear in the data source or by their yPosition relative to the viewport. To control the order and prioritization of symbols otherwise, use `symbolSortKey`.
    */

src/utils/styleMap.ts

@@ -72,6 +72,7 @@ const styleMap = {
   symbolSpacing: StyleTypes.Constant,
   symbolAvoidEdges: StyleTypes.Constant,
   symbolSortKey: StyleTypes.Constant,
+  symbolZOffset: StyleTypes.Constant,
   symbolZOrder: StyleTypes.Enum,
   iconAllowOverlap: StyleTypes.Constant,
   iconIgnorePlacement: StyleTypes.Constant,

style-spec/v8.json

@@ -1848,6 +1848,33 @@
       },
       "property-type": "data-driven"
     },
+    "symbol-z-offset": {
+      "type": "number",
+      "default": 0,
+      "minimum": 0,
+      "units": "meters",
+      "doc": "Specifies an uniform elevation from the ground, in meters.",
+      "sdk-support": {
+        "basic functionality": {
+          "js": "3.7.0",
+          "android": "11.7.0",
+          "ios": "11.7.0"
+        },
+        "data-driven styling": {
+          "js": "3.7.0",
+          "android": "11.7.0",
+          "ios": "11.7.0"
+        }
+      },
+      "expression": {
+        "interpolated": true,
+        "parameters": [
+          "zoom",
+          "feature"
+        ]
+      },
+      "property-type": "data-driven"
+    },
     "symbol-z-order": {
       "type": "enum",
       "values": {