4 Answers

• No, an annotation cannot load a remote image. I have some code that I have written (very ugly) but it does allow for remote loading of an image into an annotation. I can post it here if you still need something like this.

• This is how I load remote images into annotations. The short version is the image is loaded to the local filesystem and there is a temp cache that holds the image. I used this to show Twitter followers on a map so it has extra code to resize the image. The first block of code is responsible for fetching an image and then sending the image to the caller. The second block is the part that makes the request. Make a folder named 'iconcache' in the resources folder or the code won't work as expected.

  I'm relatively new to be Javascript and Titanium so there may be easier/better ways to do this.

  // The first three parameters are mandatory
  function fetch_remote_image(url, tmpPath, callback, height, width, defaultImage, timeout) {
    var imagePath = tmpPath + Ti.Utils.md5HexDigest(url) + '.jpg';
    var imagefile = Ti.Filesystem.getFile(imagePath);      
  
    if (imagefile.exists()) {
      callback(imagePath);
    }
  
    defaultImage = defaultImage || 'images/dummy_profile50x50.png';
    timeout = timeout || 30000;
    height = height || 64;
    width = width || 64;
  
    var xhr = Ti.Network.createHTTPClient();
    xhr.setTimeout(timeout);
  
    xhr.onerror = function(e) { 
      callback(defaultImage);
    };
  
    xhr.onload = function(){
      var remoteimage = this.responseData;
  
      if (!remoteimage) {
        imagePath = defaultImage;
      } else {
        var imageView = Ti.UI.createImageView({
          image: remoteimage,
          width: width,
          height: height
        });
  
        var tmpImage = imageView.toImage();
        var imagefile = Ti.Filesystem.getFile(imagePath);      
        imagefile.write(tmpImage);
      }
  
      callback(imagePath);
    };
  
    xhr.open('GET', url);
    xhr.send();
  }
  

  function addFriendPushPin(lat, lng, title, subtitle, image, id) {
    var friendAnnotation;
  
    fetch_remote_image(image, 'iconcache/', function(remoteImage) {
      var imagefile = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, remoteImage);    
      if (imagefile.exists()) {          
        friendAnnotation = Ti.Map.createAnnotation({
          latitude: lat,
          longitude: lng,
          title: title,
          subtitle: subtitle,
          image: remoteImage,
          animate:true,
          leftButton: 'appicon.png',
          myid: id
        });  
  
        mapview.addAnnotation(friendAnnotation);  
      }    
    }, 50, 50);
  }
  

• I had ended up loading a WebView into the annotation, and loading the image URL into that. It worked well enough but I think this approach may be better for the ability to resize etc. Though not sure of the network effects - if using a webview I assume that the image doesn't load unless the view is displayed (could be wrong though).

  Does anyone know what the lifetime of a file made with Ti.Filesystem.createTempFile() is?

• A webview for a simple image? Webviews should be banned :)

  Try something like this:

  
  var big_img = Titanium.UI.createImage{
      image:'url_to_remote_image',
      left:-1000,
      top:-1000,
      width:160,
      height:160,
      backgroundColor:'#000'
  });
  
  var dest_img = Titanium.UI.createImage({
  
      image:big_img.toImage(),
      width:30,
      height:30
      });
  
  var dest = Titanium.Map.createAnnotation({
      latitude:the_venue.latitude,
          longitude:the_venue.longitude,
      pincolor:Titanium.Map.ANNOTATION_RED,
      title:the_venue.name,
      subtitle:the_venue.name+' '+the_venue.city+','+the_venue.state,
      leftView: dest_img
      // rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE
  });