Tutorial: How to create custom map annotations with Appcelerator

One of the most lacking features (in my opinion) in Titanium is the ability to customize how your annotations look on your map. You can only give it a local image (or leave it as a pin) and you can’t really do anything else.

Thankfully, you can get around this by using View’s toImage() function. This way, you can put anything that you’d put in a view in your annotation, including ImageViews which can take external URLs!

Start by creating a view like this

var thisView = Ti.UI.createView({
width:45,
height:45
});

Then create your ImageView and add it to the view. We’re going to use Kevin Hopkin’s awesome image caching function to save them into cache too (you can get it here) I modified it to include a callback when the image is loaded (get it here). I also made a slight change to create unique filenames by concatenating the ID I was getting back:

var thisImage = Ti.UI.createImageView({
width:45,
height:45
});
cachedImageView('imageCache', {YOUR IMAGE URL}, obj[0].Id , thisImage,function(data){
thisView.add(thisImage);
thisLoc.image = thisView.toImage();
});

Then all we have to do is add the view to the annotation above the callback like this:

var thisLoc = Titanium.Map.createAnnotation({
latitude:{your latitude},
longitude:{your longitude},
});

Add this annotation to the map, and it works amazingly well.

Let me know if you have any issues with this method. Hope this helps anyone.