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({

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({
cachedImageView('imageCache', {YOUR IMAGE URL}, obj[0].Id , thisImage,function(data){
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.

5 comments so far

Add Your Comment
  1. How well does this perform when, say, you’ve got 50 annotations to put on the map?

    • I’ve running 30-50 with it and it works fine for me.

  2. Hey Adam, this is awesome. Nice work on putting this together. I’ve played with maps and the annotations on a previous project, but got frustrated with it like you did. Using toImage() is a great idea. My question to you though, I’ve had some garbage collection and memory leak issues with maps on iOS, have you had the chance to profile the footprint of custom annotations in this way?

    • Hey Kevin, I’m still doing some testing with it. If I find any major issues, I’ll post it here/let you know.

  3. […] Zwakk created a tutorial on how to create custom map annotations with URL images and custom […]