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);
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
Change
mapview.addAnnotation(objLocationAnnotation);
to
mapview.annotations = [objLocationAnnotation];
That will clear all the annotations on the mapview and set them to a new array of the one new annotation.
Related
I am trying to develop a hybrid ol3 map application using ionic3 with angularjs. I have generated xyz tiles of the map service which I was able to use for online maps. When I tried using them for download to a local directory of mobile and use them I am facing issues. Kindly provide any help which is much appreciated. I I could not trace any errors. Kindly suggest me how to check if any errors to test the maps.
//For downloading the image from server and stores it into mobile directory.
this.file.createDir(this.file.externalRootDirectory, 'Offline/Maps/custom_', true).then((files) => {
this.file.createDir(this.file.externalRootDirectory, 'Offline/Maps/custom_/02_02', true).then((files) => {
}).catch((err) => {
});
}).catch((err) => {
});
const imageURL = 'https://server.com/documents/ionic/path_track/maps/0041_0041.jpeg';
const fileTransfer: FileTransferObject = this.transfer.create();
const imageName = imageURL.split('/').pop();
//alert(imageName+"#"+this.file.externalRootDirectory);
//alert(imageName);
fileTransfer.download(imageURL, this.file.externalRootDirectory+'Offline/Maps/custom_07/02_02/'+imageName).then((entry) => {
//loader.dismiss();
//this.showOfflineButton = true;
}, (error) => {
let alert = this.alertCtrl.create({
message: 'Map is not downloaded '+JSON.stringify(error),
buttons: ['Ok'],
enableBackdropDismiss: false,
cssClass:'alert-error'
});
alert.present();
});
//For retrieving image from the mobile directory and to display into mobile app.
var config = {
"bounds": {
"left" : 68.1060582899974,
"bottom" : 6.72246026992798,
"right" : 97.7525939941406,
"top" : 37.0967391635301
}
};
var bounds = [config.bounds.left, config.bounds.bottom, config.bounds.right, config.bounds.top];
var resolutions = [
0.1186495269281333,
0.0593247634640666,
0.0296623817320333,
0.0148311908660167,
0.0074155954330083,
0.0037077977165042,
0.0018538988582521,
0.000926949429126,
0.000463474714563,
0.0002317373572815,
0.0001158686786408,
0.0000579343393204,
0.0000289671696602,
0.0000144835848301,
0.000007241792415
];
var projection_epsg_no = 4326
var layername = 'seamless_xyz1';
var tileGrid = new ol.tilegrid.TileGrid({
extent: bounds,
resolutions: resolutions,
origin: ol.extent.getTopLeft(bounds),
projection: 'EPSG:4326',
tileSize: [256, 256]
});
var view = new ol.View({
extent: [55.948355423604156, 4.853611184459009, 101.73937104860416, 38.07626743445901],
zoom: 10,
center: [78.48695, 17.41217],
projection: 'EPSG:4326',
resolutions: resolutions
});
var tms_source = new ol.source.XYZ({
projection: 'EPSG:4326',
tileGrid: tileGrid,
url: this.file.externalRootDirectory+'/Offline/Maps/custom_{z}/{x}/{-y}.jpeg'
//url: this.file.externalRootDirectory+'/Offline/Maps/custom_07/02_02/0041_0043.jpeg' (If I am giving static image name then its coming fine but not able to do it dynamically.)
});
var basegroup = new ol.layer.Tile({
source: tms_source,
extent: bounds
});
var mapview;
if(this.Source_lat == undefined || this.Source_long == undefined){
this.current_location1 = 'Location is not available.';
mapview = new ol.View({
projection: 'EPSG:4326',
center: [82.491,21.899],
extent: [66.2329, 7.68083, 98.2223, 39.03874],
maxZoom:16,
minZoom: 8,
zoom: 8
});
}else{
this.current_location1 = this.Source_lat+', '+this.Source_long;
mapview = new ol.View({
projection: 'EPSG:4326',
center: [this.Source_long,this.Source_lat],
extent: [66.2329, 7.68083, 98.2223, 39.03874],
maxZoom:10,
minZoom: 10,
zoom: 10
});
}
map = new ol.Map({
target: 'offline_map',
controls: ol.control.defaults({
zoom: false,
attribution: false,
rotate: false
}),
layers: [basegroup, jsonLayer_net1, jsonLayer_net],
overlays: [jsonoverlay],
view: mapview
});
Thanks in advance
I'm new with titanium. Can you please suggest me for edit android listview in titanium.
list items get from server database. I want to edit any row and update to database table. I already get the data/list items from database and showing as list view on a tabgroup in tab1. Now I want to edit any list item and update to database . for example, edit any name from list and update to database.
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'List',
window:win1
});
var scrollView = Ti.UI.createScrollView({
contentWidth: 'auto',
contentHeight: 'auto',
scrollType: 'horizontal',
height: 'auto',
width: 'auto'
});
var section = Ti.UI.createListSection();
var listView = Ti.UI.createListView
({
sections: [ section ],
searchView: search,
editing: true,
caseInsensitiveSearch: true,
pruneSectionsOnEdit : true,
width:'100%'
});
var ajax = Ti.Network.createHTTPClient();
ajax.onerror = function(e){
alert('Error');
};
ajax.onload = function(){
Titanium.API.info(this.responseText);
var data = this.responseText;
var jdata = JSON.parse(data);
if(jdata.success){
rows=jdata.data;
var dataArr = [];
for(i=0; i< rows.length; i++){
dataArr[i]={ properties: { title: rows[i].name, canEdit: true, canMove: true}};
}
console.log(dataArr);
section.setItems(dataArr);
}
else{
alert(jdata.msg);
}
};
ajax.open('POST', 'http://www.examples.com/get-users.php');
scrollView.add(listView);
win1.add(scrollView);
abGroup.addTab(tab1);
Once you have populated your list, if you want to update a certain row you should :
get the item from the section
update the field of the item
update section
Here is some code:
var item = section.getItemAt(index) //You should know the position
// do a check loop or save a hashmap
item["title"]["text"] = "new title"
section.updateItemAt(index, item)
//Extract the model now, update and save
var model = getModel() //TODO this function
model.set({"title": "new title"})
model.save()
Is it possible in android to highlight a street on google map as the user taps on the
street? Currently I am working on an app which would identify the streets where a parking
slot is available.
This fiddle could help:
// init map
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// init directions service
var dirService = new google.maps.DirectionsService();
var dirRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true});
dirRenderer.setMap(map);
// highlight a street
var request = {
origin: "48.1252,11.5407",
destination: "48.13376,11.5535",
//waypoints: [{location:"48.12449,11.5536"}, {location:"48.12515,11.5569"}],
travelMode: google.maps.TravelMode.DRIVING
};
dirService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
dirRenderer.setDirections(result);
}
});
http://jsfiddle.net/HG7SV/15/
Additional options:
https://developers.google.com/maps/documentation/javascript/directions
I'm a newbie in Titanium and web development. I uploaded some images to the Titanium Cloud Service (ACS) and wanna display them on my app. Below is my code. It runs, but I don't see any photos except for the title and back button. Can someone take a look at my code and give me some hint on what I'm missing? Thank you for your time!
//Import the module
var Cloud = require('ti.cloud');
Cloud.debug = true; // optional; if you add this line, set it to false for production
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
exports.getAlbumWin = function() {
//create window
var album_window = Titanium.UI.createWindow({
backgroundColor:'#FFF',
title: "Travel Diary"
});
//create title
var title = Titanium.UI.createLabel({
text: "All Trip Photos Submitted by Our Users",
top:10,
color: '#008000',
textAlign: 'center',
font: {fontSize:50}
});
var tableView = Ti.UI.createTableView({
top: '5%',
scrollable: true,
width: '100%',
minRowHeight: '500',
bottom: '10%',
});
//Get diary entries, add them to the table view and display it
Cloud.Photos.query({
page: 1,
per_page: 10
}, function(e) {
var row, dateLabel, placeLabel, reviewLabel;
var displayData = [];
if (e.success){
alert('Count: '+e.photos.length);
for (var i=0; i<e.photos.length; i++) {
var photo = e.photos[i];
var image2 = photo.urls.square.toImage();
//create imageView
var photoView = Ti.UI.createImageView({
image: image2
});
//photo.urls.square
displayData.push(photoView);
}
tableView.setData(displayData);
} else {
alert('Error:\n' + ((e.error && e.message) || JSON.stringify(e)));
}
});
//add a 'back' button
var back_button = Titanium.UI.createButton({
title: "Back",
height:160,
left:40,
right:40,
bottom: '0%'
});
//Add Event Listener
back_button.addEventListener('click', function(){
//call an export function
var win = require('home').getHomeWin;
//create new instance
var nextWin = new win();
nextWin.open();
});
album_window.add(title);
album_window.add(tableView);
album_window.add(back_button);
return album_window;
};
In appcelerator docs you can see what is image property of a Ti.UI.imageView,
image : (String/Titanium.Blob/Titanium.Filesystem.File)
Image to display, defined using a local filesystem path, a File
object, a remote URL, or a Blob object containing image data. Blob and
File objects are not supported on Mobile Web.
So you could, use url as it is.
Try like this,
var image2 = photo.urls.square_75;
(Use as this unless you have specified a Custom Photo Size named square).
Look here for more information about "urls" property of Cloud photo object.
I have created Map view using following code
var map = Ti.Map.createView({
mapType:Titanium.Map.STANDARD_TYPE,
regionFit: true,
animate: true,
touchEnabled: true,
userLocation:true,
region:{
latitude: 19.076719,
longitude: 72.878583,
latitudeDelta:0.5,
longitudeDelta:0.5
}
});
I am creating Annotation using following code
var pin = Ti.Map.createAnnotation({
latitude:19.076719,
longitude:72.878583,
title: "Dronzer",
image:"pin.png"
});
map.addAnnotation(pin);
Question: How to replace this image with number "12" to show it on map?
After few days some how I have found the solution.
Create a Label
var price = Ti.UI.createLabel({
text : " "+data.price,//Number=12 Input from server
color : 'black',
font : {fontSize:'15dp',font:"monospace",fontWeight:"bold"},
height : '30dp',
width : '30dp',
left: '50%',
backgroundImage:"red_pin1.png",
});
Create an ImageView and set its image property as a blob.
var anImageView = Ti.UI.createImageView({
image : price.toImage(), //setting label as a blob
width : 'auto',
height : 'auto',
});
Create an Annotation and set its image property as blob.
var pin = Ti.Map.createAnnotation({
myid:data._id,
latitude:data.latitude,
longitude:data.longitude,
title: data.vendor_name,
image:anImageView.toBlob() //setting ImageView as blob
});