Search code examples
androidtitaniumsmartphoneappcelerator-mobile

Remove annotations from Map in Titanium Appcelerator


I have made a Map based app using Titanium Appcelerator. I am showing the user's current location on the map. I also have a textbox where I am taking the user's desired location in order to show it on the map. For showing a particular place on the map I have used annotations and its working fine. The problem is that when the value of the textbox changes then another annotation is getting created on the map. What I want to do is, I want to clear the previous annotation before putting up a new annotation. My app.js file is depicted below:

app.js:

//create the window
var win1 = Titanium.UI.createWindow({
title:'Exercise Tracker',
backgroundColor: '#000'
});
//goto location label
var location_label = Titanium.UI.createLabel({
left:'10',
top:'20',
text:'Go to: ',
font:{fontSize:20}
})
//goto location textbox
var location_textbox= Titanium.UI.createTextField({
top: '15',
left: '85',
width: '300',
height: '50',

})
//go button
var btnGo=Ti.UI.createButton(
    
    {           
        top:'15',
        left:'420',
        width:'50',
        height:'50',
        title:"Go"
    })


//create our mapview
var mapview = Titanium.Map.createView({
top: 110,
height: 'auto',
width: 'auto',
mapType: Titanium.Map.STANDARD_TYPE,
region: {latitude: 51.50015,
longitude:-0.12623,
latitudeDelta:0.5,
longitudeDelta:0.5},
animate: true,
regionFit: true,
userLocation: true,

});
// to get values from both the textbox      
btnGo.addEventListener('click', function (e){
//var addr=location_textbox.value;

var addr="";
addr = location_textbox.value;
annote(addr);
});

// to refrsh the page on click textbox  
location_textbox.addEventListener('click', function (e){

});

//--------------------------annotations--------------------------------
//var addr = 'Howrah';
function annote(addr)
{
var addr_fw=addr; 
Titanium.Geolocation.forwardGeocoder(addr,function(evt) {
var objLocationAnnotation = Titanium.Map.createAnnotation({
    latitude: evt.latitude,
    longitude: evt.longitude,
    title: addr_fw
});
mapview.addAnnotation(objLocationAnnotation);
});
} 
//--------------------------annotations--------------------------------
//add the map to the window
win1.add(mapview);
//set the distance filter
Titanium.Geolocation.distanceFilter = 10;


Titanium.Geolocation.getCurrentPosition(function(e)
{
if (e.error)
{
//if mapping location doesn't work, show an alert
alert('Sorry, but it seems geo location is not available on your device!');
return;
}
//get the properties from Titanium.GeoLocation
var longitude = e.coords.longitude;
var latitude = e.coords.latitude;
var altitude = e.coords.altitude;
var heading = e.coords.heading;
var accuracy = e.coords.accuracy;
var speed = e.coords.speed;
var timestamp = e.coords.timestamp;
var altitudeAccuracy = e.coords.altitudeAccuracy;
//apply the lat and lon properties to our mapview
mapview.region = {latitude: latitude,
longitude: longitude,
latitudeDelta:0.5,
longitudeDelta:0.5
};
});
//finally, open the window
win1.open();
//adding display properties to the main window      
win1.add(location_label);
win1.add(location_textbox);
win1.add(btnGo); 

Solution

  • Use mapView.removeAnnotation String/Titanium.Map.Annotation annotation

    it Removes an existing annotation from the map.

    read the documentation for further details from here.

    http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Map.View-method-removeAnnotation