feat: added visibility layout property support to all layer types. added circle-pitch and circle-translate property support

Author: Chris Vietor

src/layers/layer-factory.android.ts

@@ -69,7 +69,7 @@ export class LayerFactory {
             line-translate ✓
             line-translate-anchor ✓
             line-width ✓
-            visibility
+            visibility ✓
         */
         const PropertyFactory = com.mapbox.mapboxsdk.style.layers.PropertyFactory;
         const Property = com.mapbox.mapboxsdk.style.layers.Property;
@@ -170,6 +170,10 @@ export class LayerFactory {
             lineProperties.push(PropertyFactory.lineWidth(new java.lang.Float(propertiesObject['line-width'])));
         }
 
+        if (propertiesObject['visibility']) {
+            lineProperties.push(PropertyFactory.visibility(propertiesObject['visibility']));
+        }
+
         return lineProperties;
     }
 
@@ -184,16 +188,16 @@ export class LayerFactory {
             circle-blur ✓
             circle-color ✓
             circle-opacity ✓
-            circle-pitch-alignment
-            circle-pitch-scale
+            circle-pitch-alignment ✓
+            circle-pitch-scale ✓
             circle-radius ✓
             circle-sort-key
             circle-stroke-color ✓
             circle-stroke-opacity ✓
             circle-stroke-width ✓
-            circle-translate
-            circle-translate-anchor
-            visibility    
+            circle-translate ✓
+            circle-translate-anchor ✓
+            visibility ✓
         */
 
         const PropertyFactory = com.mapbox.mapboxsdk.style.layers.PropertyFactory;
@@ -211,6 +215,14 @@ export class LayerFactory {
             circleProperties.push(PropertyFactory.circleOpacity(new java.lang.Float(propertiesObject['circle-opacity'])));
         }
 
+        if (propertiesObject['circle-pitch-alignment']) {
+            circleProperties.push(PropertyFactory.circlePitchAlignment(propertiesObject['circle-pitch-alignment']));
+        }
+
+        if (propertiesObject['circle-pitch-scale']) {
+            circleProperties.push(PropertyFactory.circlePitchScale(propertiesObject['circle-pitch-scale']));
+        }
+
         if (propertiesObject['circle-radius']) {
             // we have two options for a radius. We might have a fixed float or an expression
 
@@ -258,6 +270,23 @@ export class LayerFactory {
             circleProperties.push(PropertyFactory.circleStrokeWidth(new java.lang.Float(propertiesObject['circle-stroke-width'])));
         }
 
+        if (propertiesObject['circle-translate']) {
+            const fillTranslateArray = Array.create('java.lang.Float', propertiesObject['circle-translate'].length);
+
+            for (let i = 0; i < propertiesObject['circle-translate'].length; i++) {
+                fillTranslateArray[i] = new java.lang.Float(propertiesObject['circle-translate'][i]);
+            }
+            circleProperties.push(PropertyFactory.circleTranslate(fillTranslateArray));
+        }
+
+        if (propertiesObject['circle-translate-anchor']) {
+            circleProperties.push(PropertyFactory.circleTranslateAnchor(propertiesObject['circle-translate-anchor']));
+        }
+
+        if (propertiesObject['visibility']) {
+            circleProperties.push(PropertyFactory.visibility(propertiesObject['visibility']));
+        }
+
         return circleProperties;
     }
 
@@ -277,7 +306,7 @@ export class LayerFactory {
             fill-sort-key
             fill-translate ✓
             fill-translate-anchor ✓
-            visibility
+            visibility ✓
         */
 
         const PropertyFactory = com.mapbox.mapboxsdk.style.layers.PropertyFactory;
@@ -316,6 +345,10 @@ export class LayerFactory {
             fillProperties.push(PropertyFactory.fillTranslateAnchor(propertiesObject['fill-translate-anchor']));
         }
 
+        if (propertiesObject['visibility']) {
+            fillProperties.push(PropertyFactory.visibility(propertiesObject['visibility']));
+        }
+
         return fillProperties;
     }
 
@@ -382,7 +415,7 @@ export class LayerFactory {
             text-translate-anchor
             text-variable-anchor
             text-writing-mode
-            visibility
+            visibility ✓
         */
 
         const PropertyFactory = com.mapbox.mapboxsdk.style.layers.PropertyFactory;
@@ -407,6 +440,10 @@ export class LayerFactory {
             symbolProperties.push(PropertyFactory.textField(propertiesObject['text-field']));
         }
 
+        if (propertiesObject['visibility']) {
+            symbolProperties.push(PropertyFactory.visibility(propertiesObject['visibility']));
+        }
+ 
         return symbolProperties;
     }
 }

src/layers/layer-factory.ios.ts

@@ -75,7 +75,7 @@ export class LayerFactory {
             line-translate ✓
             line-translate-anchor ✓
             line-width ✓
-            visibility
+            visibility ✓
         */
 
         if (propertiesObject['line-blur']) {
@@ -130,6 +130,10 @@ export class LayerFactory {
             lineProperties['lineWidth'] = NSExpression.expressionForConstantValue(propertiesObject['line-width']);
         }
 
+        if (propertiesObject['visibility']) {
+            lineProperties['visibility'] = NSExpression.expressionForConstantValue(propertiesObject['visibility']);
+        }
+
         return lineProperties;
     }
 
@@ -144,16 +148,16 @@ export class LayerFactory {
             circle-blur ✓
             circle-color ✓
             circle-opacity ✓
-            circle-pitch-alignment
-            circle-pitch-scale
+            circle-pitch-alignment ✓
+            circle-pitch-scale ✓
             circle-radius ✓
             circle-sort-key
             circle-stroke-color ✓
             circle-stroke-opacity ✓
             circle-stroke-width ✓
-            circle-translate
-            circle-translate-anchor
-            visibility    
+            circle-translate ✓
+            circle-translate-anchor ✓
+            visibility ✓
         */
 
         if (propertiesObject['circle-blur']) {
@@ -168,6 +172,14 @@ export class LayerFactory {
             circleProperties['circleOpacity'] = NSExpression.expressionForConstantValue(propertiesObject['circle-opacity']);
         }
 
+        if (propertiesObject['circle-pitch-alignment']) {
+            circleProperties['circlePitchAlignment'] = NSExpression.expressionForConstantValue(propertiesObject['circle-pitch-alignment']);
+        }
+
+        if (propertiesObject['circle-pitch-scale']) {
+            circleProperties['circleScaleAlignment'] = NSExpression.expressionForConstantValue(propertiesObject['circle-pitch-scale']);
+        }
+
         if (propertiesObject['circle-radius']) {
             if (typeof propertiesObject['circle-radius'] !== 'number') {
                 throw new Error('Unsupported circle-radius type'); // TODO: Implement circle radius with stops
@@ -187,6 +199,18 @@ export class LayerFactory {
             circleProperties['circleStrokeWidth'] = NSExpression.expressionForConstantValue(propertiesObject['circle-stroke-width']);
         }
 
+        if (propertiesObject['circle-translate']) {
+            circleProperties['circleTranslation'] = NSExpression.expressionForConstantValue(propertiesObject['circle-translate']);
+        }
+
+        if (propertiesObject['circle-translate-anchor']) {
+            circleProperties['circleTranslationAnchor'] = NSExpression.expressionForConstantValue(propertiesObject['circle-translate-anchor']);
+        }
+
+        if (propertiesObject['visibility']) {
+            circleProperties['visibility'] = NSExpression.expressionForConstantValue(propertiesObject['visibility']);
+        }
+
         return circleProperties;
     }
 
@@ -206,7 +230,7 @@ export class LayerFactory {
             fill-sort-key
             fill-translate ✓
             fill-translate-anchor ✓
-            visibility
+            visibility ✓
         */
 
         if (propertiesObject['fill-antialias']) {
@@ -237,14 +261,18 @@ export class LayerFactory {
             fillProperties['fillTranslationAnchor'] = NSExpression.expressionForConstantValue(propertiesObject['fill-translate-anchor']);
         }
 
+        if (propertiesObject['visibility']) {
+            fillProperties['visibility'] = NSExpression.expressionForConstantValue(propertiesObject['visibility']);
+        }
+
         return fillProperties;
     }
 
     private static parsePropertiesForSymbolLayer(propertiesObject) {
-        const fillProperties = {};
+        const symbolProperties = {};
 
         if (!propertiesObject) {
-            return fillProperties;
+            return symbolProperties;
         }
 
         /*
@@ -303,29 +331,33 @@ export class LayerFactory {
             text-translate-anchor
             text-variable-anchor
             text-writing-mode
-            visibility
+            visibility ✓
         */
 
         if (propertiesObject['icon-image']) {
-            fillProperties['iconImageName'] = NSExpression.expressionForConstantValue(propertiesObject['icon-image']);
+            symbolProperties['iconImageName'] = NSExpression.expressionForConstantValue(propertiesObject['icon-image']);
         }
 
         if (propertiesObject['icon-rotate']) {
-            fillProperties['iconRotation'] = NSExpression.expressionForConstantValue(propertiesObject['icon-rotate']);
+            symbolProperties['iconRotation'] = NSExpression.expressionForConstantValue(propertiesObject['icon-rotate']);
         }
 
         if (propertiesObject['icon-size']) {
-            fillProperties['iconScale'] = NSExpression.expressionForConstantValue(propertiesObject['icon-size']);
+            symbolProperties['iconScale'] = NSExpression.expressionForConstantValue(propertiesObject['icon-size']);
         }
 
         if (propertiesObject['text-color']) {
-            fillProperties['textColor'] = NSExpression.expressionForConstantValue(new Color(propertiesObject['text-color']).ios);
+            symbolProperties['textColor'] = NSExpression.expressionForConstantValue(new Color(propertiesObject['text-color']).ios);
         }
 
         if (propertiesObject['text-field']) {
-            fillProperties['text'] = NSExpression.expressionForConstantValue(propertiesObject['text-field']);
+            symbolProperties['text'] = NSExpression.expressionForConstantValue(propertiesObject['text-field']);
         }
 
-        return fillProperties;
+        if (propertiesObject['visibility']) {
+            symbolProperties['visibility'] = NSExpression.expressionForConstantValue(propertiesObject['visibility']);
+        }
+
+        return symbolProperties;
     }
 }