Setting Angle to Symbol-Layer in Shape-Source Dynamically ?

[yaduc]

@nitaliano
I am drawing a poly-line with arrow annotations with angles set to arrows dynamically, Each angle is set to each arrow annotation at the time of creation dynamically.

The annotation has rendering issues in android, due to the fact that i am setting angles dynamically in a loop i am unable to use shape-source with symbol-layer.

 <MapboxGL.ShapeSource
                    id="symbolLayerSource"
                    shape={getMarkerFeatureCollection(stops)}
                    images={{
                        icon: Images.stop_marker
                    }}
                >
         <MapboxGL.SymbolLayer id='symbol' style={mapStyles.marker}  iconRotate={}/>
   </MapboxGL.ShapeSource>

Since the shape={} property of shape-source is fed with co-ordinates first and the symbols just appears on this ( correct me if i am wrong) . I am unable to load the symbol layers dynamically with each angle fed to it in a loop as i done with the annotation as seen in the code below.

renderArrowAnnotations(lat, lon, index, angle) {
        return (
            <Mapbox.PointAnnotation
                key={index.toString()}
                id={index.toString()}
                coordinate={[lon, lat]}
                style={[styles.annotationStyle,
                { transform: [{ rotate: angle.toString() + 'deg' }] }]}
            >
                <Image source={Images.right_arrow} style={styles.arrowImageStyle} />
            </Mapbox.PointAnnotation>
        );
    }

The map is moving slowly and getting stuck when annotation is used how will deal with this issue, can i feed the angles dynamically to a shape-source with symbol-layer or is there a way to improve performance of annotations.

sample output below-( point annotations used here)

[nitaliano]

@yaduc the style prop for a SymbolLayer to rotate the icon is called iconRotate https://github.com/mapbox/react-native-mapbox-gl/blob/master/docs/SymbolLayer.md#name-11 there's tons of styles you can apply to a SymbolLayer I would recommend looking through them all in the link I posted above.

Also you need to set it on the layer like style={{ iconRotate: '...' }}