Titanium Mapview Add Annotation

Question

I 'm using the code 'http://developer.appcelerator.com/question/132508/how-to-add-annotation-on-mapview-click-event' to calculate the lat and long.

But I getting some trouble in add a annotation. The calculate result of long and lat is not correct so the point putted at wrong position It's my problem or the method is not work now?

mapView.addEventListener('longpress', function(e) {
    var coordinate = calculateLatLngfromPixels(mapView, e.x, e.y);
    var longitude = coordinate.lon;
    var latitude = coordinate.lat;
    //var longitude = e.coords.longitude;
    //var latitude = e.coords.latitude;
    var annotation = Titanium.Map.createAnnotation({
                    latitude : latitude,
                    longitude : longitude,
                    title : "New Place",
                    //subtitle : 'My Place',
                    animate : true,
                    id : 1,
                    pincolor : Titanium.Map.ANNOTATION_RED
                });
    mapView.addAnnotation(annotation);

    var region = {
                    latitude : latitude,
                    longitude : longitude,
                    animate : true
                    //latitudeDelta : 0.002,
                    //longitudeDelta : 0.002
                };
    mapView.setLocation(region);
    alert('latitude'+latitude+' longitude'+longitude);
});

Thank you.

createMap:

var mapView = Ti.Map.createView({
     mapType: mapModule.NORMAL_TYPE,
    //latitudeDelta: 0.002, longitudeDelta:0.002  :  Zoom Level
    region : {
        latitude : curr_latitude,
        longitude : curr_longitude,
        latitudeDelta : 0.002,
        longitudeDelta : 0.002
    },
    top : 5,
    bottom : 5,
    left : 5,
    right : 5,
    animate : true,
    regionFit : true,
    userLocation : true
});

Answer 1

You need difference between iOS and Android at listener and callback. I have created Mobile Project (Titanium SDK 3.3.0GA, Map 2.0.2 iOS | 2.1.4 Android)

ApplicationWindow.js

//Application Window Component Constructor
function ApplicationWindow() {

    //create component instance
    var self = Ti.UI.createWindow({
        backgroundColor:'#ffffff'
    });

    var calculateLatLngfromPixels = function(mapview, xPixels, yPixels) {
        var region = mapview.region;
        var heightDegPerPixel = -region.latitudeDelta / mapview.rect.height; 
        var widthDegPerPixel = region.longitudeDelta / mapview.rect.width;
        return {
            lat : (yPixels - mapview.rect.height / 2) * heightDegPerPixel + region.latitude,
            lon : (xPixels - mapview.rect.width / 2) * widthDegPerPixel + region.longitude
        };
    };

    var mapModule = require('ti.map');

    var mapView = mapModule.createView({
        top: 0,
        left: 0,
        mapType: mapModule.NORMAL_TYPE
    });

    var addNewAnnotation = function addNewAnnotation(lat, lng){
        Ti.API.info("New Annotation at: {"+lat+", "+lng+"}");
        var annotation = mapModule.createAnnotation({
            latitude : lat,
            longitude : lng,
            title : "New Place",
            animate : true,
            id : 1,
            pincolor : mapModule.ANNOTATION_RED
        });
        mapView.addAnnotation(annotation);
    };

    if(Ti.Platform.osname === 'android'){
        mapView.addEventListener('longclick', function(e) {
            addNewAnnotation(e.latitude, e.longitude);  
        });
    }
    else {
        mapView.addEventListener('longpress', function(e) {
            var coordinates = calculateLatLngfromPixels(mapView, e.x, e.y);
            addNewAnnotation(coordinates.lat, coordinates.lon);  
        });
    }

    self.add(mapView);

    return self;
}

//make constructor function the public component interface
module.exports = ApplicationWindow;

I have compared two annotations on New York (Central Park and Apple Store) and the two coordinates are equals. This code works on iOS 7.1 and Android 4.4. More zoom, more accuracy.