Search code examples
google-mapstitaniumappcelerator

custom Image in Modules.map view Appcelerator Studio?

I'm currently stuck on trying to implement a custom Image on the google maps for appcelerator studio.

The custom Image is supposed to work like the Modules.map.circle object, or almost exactly like it but with an image instead of a circle. Is there any way I could do this? I have annotations already set-up, so I'd like to try to avoid using custom images on annotations. Another side note is that I'm using multiple images for animating like a sprite. (e.g. ex001.png, ex002.png, etc.)

Some of the options that I've tried:

  • use a View, add it to the map's view and then try a lng/lat to px conversion.
  • Use an Annotation and then use the customView property for imageView.

EDIT:

var location = {lat: 43.2163, lng: 54.3461};
var loading = Ti.UI.createView({backgroundImage: '/images/image1.png'});
var load, loadingIndex = 1;

function loadingScreen() {
    loading.backgroundImage = '/images/image' + loadingIndex + '.png';

    loadingIndex++;
    if (loadingIndex == 20) loadingIndex = 1;
}

setInterval(loadingScreen, 80);

$.mapView.add(loading);

I'm using the loading's left and top property to convert lng/lat to px, something that they call a Mercator projection. It ended up not working for me, so as a resort I used annotations and inside the annotation would be a view that would change views almost all the time, but that didn't work either.

Solution

  • You should use the image property of an Annotation. This will replace the pin of the annotation with an image you provided.

    See documentation: http://docs.appcelerator.com/platform/latest/#!/api/Modules.Map.Annotation-property-image

    Furthermore, you cannot use multiple images for the annotation.