Titanium - Map custom annotation rotation

Question

I'm trying to display the wind on a map. For each pin on my map, I'd like to change color and orientation in order to represent the force and the heading of the wind.

Here's what I've done :

var pinWindLabel = Ti.UI.createLabel({ width:Ti.UI.SIZE, height:Ti.UI.SIZE, text:'\ue958', font:{fontFamily:Ti.App.ICONS, fontSize:25}, touchEnabled:false });
var pinWind = Ti.UI.createView({width:Ti.UI.SIZE, height:Ti.UI.SIZE});
pinWind.add(pinWindLabel);

And, in the API response :

for(var k=0; k<res.length; k++){

    if(res[k].wind_avg < 10){
        pinWindLabel.setColor('green');
    } else{
        pinWindLabel.setColor('blue');
    }

    var pin = Map.createAnnotation({
        latitude: res[k].lat,
        longitude: res[k].lng,
        image:pinWind.toImage(),
    });
    annotations.push(pin);
}

I had difficulties to change the color of each pin. Without the 'toImage()', I think it's not possible. But now, it works :)

Now I'd like to change its orientation. But even with this code, the pin has always the same orientation :

var pinWindLabel = Ti.UI.createLabel({ width:Ti.UI.SIZE, height:Ti.UI.SIZE, text:'\ue958', font:{fontFamily:Ti.App.ICONS, fontSize:25}, touchEnabled:false });
var pinWind = Ti.UI.createView({width:Ti.UI.SIZE, height:Ti.UI.SIZE});
pinWind.transform = Ti.UI.create2DMatrix({rotate: 236});
pinWind.add(pinWindLabel);

So, how can I do to, first of all, rotate all pins, and, after, rotate each pin in the for loop ?

Thanks a lot :)

Answer 1

As advised in comments section, in this case, it's more efficient to use pre-rotated image files Click here to see Rotated Pins as pins.

Though you will need to create many images, but it's most efficient solution across all platforms without much code & complexity.

Another point to note is that modifying images at run-time takes more computation power, so it's always recommended to apply least modifications especially on images at run-time. Always have optimal-resolution & least-size images for faster loading.