Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Titanium.Map.Annotation.image not working properly

Hello

There seems to be a problem with the Titanium.Map.Annotation.image property, or the documentation thereof. The documentation states the property is an ImageView, but also a string: documentation

It seems the latter is true, as I am able to display an image file as a pin:

Ti.Map.createAnnotation({
  latitude: lat,
  longitude: lng,
  title: 'test',
  image: '/path/to/image.png'
});

but if I reference an ImageView object instead, the annotation doesn't show up.
It would be great if it were possible to use an ImageView object as an annotation image instead, this would offer us much more possibilities.

I tried creating the ImageView I wanted, then saving it to file and referencing that instead. This would work, except that an ImageView combined of multiple ImageView objects looks different when saved to file (ImageView.toBlob()) than on the screen.. but that's another issue.

Any help on this? I've seen the other topics on the pinimage matter, but they seem outdated, as the property was then only available on Android.

— asked August 19th 2011 by Chris Leuenberger
  • annotation
  • imageview
  • mapview
  • pinimage
0 Comments

2 Answers

  • Accepted Answer

    Unfortunately the image property of a map annotation can only be a local path. In a project I extended the Ti sdk for allowing remote urls for image annotations. Enabling the use of proper views would require a similar effort…

    — answered August 19th 2011 by Olivier Morandi
    permalink
    5 Comments
    • Olivier,
      Thanks for your reply. Could you point me in the direction of how to go about doing this? Unfortunately I don't have any experience in extending the Ti sdk.

      — commented August 19th 2011 by Chris Leuenberger
    • In this case you should put your hand in the sdk source. First thing you need is to understand how to develop native modules. Ti sdk internals follow the same principles. In your case you'd want also to have a look at the ios mapkit sdk http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/LocationAwarenessPG/ and how the Ti.Map module is currently implemented. Actually the key portion of code you'd want to focus on is at line 642 of https://github.com/appcelerator/titanium_mobile/blob/master/iphone/Classes/TiMapView.m there is where annotation views are provided when they need to be displayed on the currently visible portion of the map. Actually it's a bit difficult giving more details in a comment. Just drop me a line if you need more ;-)

      — commented August 19th 2011 by Olivier Morandi
    • Thanks for the tips. I'll have a look, but I'm not very confident as I have have absolutely no objective C knowledge.. :)

      — commented August 19th 2011 by Chris Leuenberger
    • I've actually experienced something weird. If I set the image property of an annotation to a URL it doesn't load but if I go to a new view that loads that same image from a URL and then go back to the map view where the annotation is, it now shows the pin as my customized image from a URL.

      — commented August 19th 2011 by Aaron Benzick
    • Try this, haven't checked but seems a valid answer. I will need this later today maybe i can confirm later.

      http://developer.appcelerator.com/question/8101/can-i-display-an-external-image-in-mapview-annotation

      — commented August 19th 2011 by Pablo Liz
  • I've found a way to load a remote image as the custom pin easily. It actually makes sense to do it this way as well. Simply use Kevin Hopkins image caching functions found here:

    http://kevin.h-pk-ns.com/2011/03/11/image-views-in-titanium-how-to-deal-with-caching/

    Once you import his library, you call the function:
    cachedImageView('imageDirectoryName', 'http://MyRemoteServer.com/public/images/1.png', imgMyImage);

    Replace imgMyImage with the name of your pin and it works great. The cachedImageView just sets the "image" property of whatever resource you pass to it in that 3rd parameter so it doesn't have to be an imageview. It can be an annotation since it uses the same 'image' property name.

    — answered August 19th 2011 by Aaron Benzick
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.