Titanium Mapview Add Annotation - titanium

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
});

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.

Related

Get weather information in Titanium

Does someone know how to get weather information in Titanium? I read that the Google Weather API is no longer available. I have tried this link but I can't figure out how to put this to work.
Does someone have a working code? I would like to get the weather on my position given by longitude and latitude.
Titanium.Geolocation.getCurrentPosition(function(e) {
if (e.error) {
return;
} else {
var lon = e.coords.longitude;
var lat = e.coords.latitude;
if (Ti.Network.networkType == Ti.Network.NETWORK_NONE) {
return;
} else {
var client = Ti.Network.createHTTPClient({
onload : function(e) {
var weather = JSON.parse(this.responseText);
getweatherIcon(weather.weather[0].icon);
setweatherText(weather.weather[0].id, weather.main.temp);
},
onerror : function(e) {
},
timeout : 150000
});
client.open("GET", "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=CreatedAppID");
client.send();
}
}
});
The "CreatedAppID" is the ID that I have created after creating an account on the provided link that is above.

Set the bounds of a mapView

I have an app that calls an api and returns a list of locations.
Once the data is returned, I convert the JSON to map points for annotations.
These get added to the ma with no problem.
The problem I am running into is setting the bounds of the map. I can't seem to figure it out.
The code I currently have is.
_handleResponse(response) {
var locations = [];
// Loop through repsone and add items to an arra for annotations
for (var i = 0; i < response.length; i++) {
// Get the location
var location = response[i];
// Parse the co ords
var lat = parseFloat(location.Latitude);
var lng = parseFloat(location.Longitude);
// Add the location to array
locations.push({
latitude: lat,
longitude: lng,
title: location.Name
});
}
// This calls the map set state
this.setState({
annotations: locations
});
}
and here is my view code
<View style={styles.container}>
<MapView
style={styles.map}
onRegionChangeComplete={this._onRegionChangeComplete}
annotations={this.state.annotations}
/>
</View>
You'll want
<MapView
...
region={region}
/>
where
var region = {
latitude,
longitude,
latitudeDelta,
longitudeDelta,
};
latitude and longitude are the center of the map and the deltas are the distance (in degrees) between the minimum and maximum lat/long shown. For instance, given a certain radius in miles around a point and an aspect ratio of the map view, you could calculate region as follows:
var radiusInRad = radiusInKM / earthRadiusInKM;
var longitudeDelta = rad2deg(radiusInRad / Math.cos(deg2rad(latitude)));
var latitudeDelta = aspectRatio * rad2deg(radiusInRad);
The definitions of rad2deg, deg2rad, and earthRadiusInKM are left as an exercise to the reader.
Here is my complete code based on #Philipp's answer:
import React, { Component } from 'react';
import { MapView } from 'react-native';
const earthRadiusInKM = 6371;
// you can customize these two values based on your needs
const radiusInKM = 1;
const aspectRatio = 1;
class Map extends Component {
constructor(props) {
super(props);
// this will be the map's initial region
this.state = {
region : {
latitude: 0,
longitude: 0
}
};
}
// you need to invoke this method to update your map's region.
showRegion(locationCoords) {
if (locationCoords && locationCoords.latitude && locationCoords.longitude) {
var radiusInRad = radiusInKM / earthRadiusInKM;
var longitudeDelta = this.rad2deg(radiusInRad / Math.cos(this.deg2rad(locationCoords.latitude)));
var latitudeDelta = aspectRatio * this.rad2deg(radiusInRad);
this.setState({
region: { latitude: locationCoords.latitude, longitude: locationCoords.longitude, latitudeDelta: latitudeDelta, longitudeDelta: longitudeDelta }
});
}
}
render () {
return (
<MapView
style={{flex: 1}}
region={this.state.region}/>
)
}
deg2rad (angle) {
return angle * 0.017453292519943295 // (angle / 180) * Math.PI;
}
rad2deg (angle) {
return angle * 57.29577951308232 // angle / Math.PI * 180
}
}

How to show longitude and latitude on map in titanium.?

I am able to get current location point .Now I want to show this point(longitude and latitude ) on map .
if(Ti.Network.online){
Ti.Geolocation.purpose = "Receive User Location";
Titanium.Geolocation.getCurrentPosition(function(e){
if (!e.success || e.error)
{
alert('Could not find the device location');
return;
}
var longitude = e.coords.longitude;
var latitude = e.coords.latitude;
alert("latitude: " + latitude + "longitude: " + longitude);
});
}else{
alert("Internet connection is required to use localization features");
}
have a look at this simple example. If you don't want to add an annotation, setRegion might be what you are looking for.
// Create a simple fullscreen map and add an annotation to it
// This example assumes you have a window called "win"
// Our lat/lng fake data
var latitude = 11.11111;
var longitude = 11.11111;
// Create Map View
// For more information on Map Views refer to:
// http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.Map-method-createView
var mapView = Titanium.Map.createView({
top : 0,
left : 0,
bottom : 0,
right : 0,
mapType : Titanium.Map.STANDARD_TYPE,
animate : true,
regionFit : true,
userLocation : true,
touchEnabled : true
});
win.add(mapView);
// Create an annotation with a right button
// For more information on annotations refer to:
// http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.Map-method-createView
var annotation = Ti.Map.createAnnotation({
latitude : latitude,
longitude : longitude,
title : 'My Annotation',
subtitle : 'My Subtitle',
rightButton : Ti.UI.iPhone.SystemButton.DISCLOSURE
});
// Add this annotation to your map View
// Note that this is an array, you can add more
// than one annotation at a time
mapView.setAnnotations([annotation]);
// Set the region of your map
// that is, zoom to where our annotation is
var region = {
latitude : latitude,
longitude : longitude,
animate : true,
latitudeDelta : 0.005,
longitudeDelta : 0.005
};
mapView.setRegion(region);
// Check if our annotation is clicked
mapView.addEventListener('click', function(e) {
if(e.clicksource === 'rightButton') {
// Do something here
};
});
This is more or less the same as Appcelerators own example at:
http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.Map-method-createAnnotation
https://github.com/appcelerator/KitchenSink/blob/master/Resources/ui/common/phone/geolocation.js
Run this and it would give you longitude and latitude for android and iOS
Thanks

I can't get my video to play in Titaniums Titanium.Media.createVideoPlayer AP

Using the Titanium.Media.createVideoPlayer API in Android 2.2 can't get the video to play in Titanium 2.1.2 using a Ti.UI.currentWindow.
/**
* #author David
*/
var win = Ti.UI.currentWindow;
//var win = Ti.UI.createWindow({});
var contentURL = "http://assets.appcelerator.com.s3.amazonaws.com/video/media.m4v";
var openButton = Ti.UI.createButton({
title : "Start Video",
top : "0dp",
height : "40dp",
left : "10dp",
right : "10dp"
});
openButton.addEventListener('click', function() {
var activeMovie = Titanium.Media.createVideoPlayer({
url : contentURL,
backgroundColor : 'blue',
movieControlMode : Titanium.Media.VIDEO_CONTROL_DEFAULT,
scalingMode : Titanium.Media.VIDEO_SCALING_ASPECT_FILL,
fullscreen : true,
autoplay : true
});
var closeButton = Ti.UI.createButton({
title : "Exit Video",
top : "0dp",
height : "40dp",
left : "10dp",
right : "10dp"
});
closeButton.addEventListener('click', function() {
activeMovie.hide();
activeMovie.release();
activeMovie = null;
});
activeMovie.add(closeButton);
});
win.add(openButton);

Showing multiple markers on map : Titanium

I am making an app in which i have to show Map in my Application.
I am able to show map and able to add Markers using annotation on Mapview.
Problem is
1> I am not able to show multiple markers on map.
So any body can help me how i can add multiple markers on Map.
Thanks,
Rakesh
Here is a map class that I use. You would include this map.js file in your window and call map.init and pass in an array of map annotations to add, the center lat/long, the top and bottom positions of the map, and optionally the lat/long delta. If you want to dynamically add annotations after the map has already been created then you can call the other functions in the class to do so:
var path = Ti.Platform.name == 'android' ? Ti.Filesystem.resourcesDirectory : "../../";
var map = {
top: 0,
bottom: 0,
latitude: 0,
longitude: 0,
latitudeDelta: 0.1,
longitudeDelta: 0.1,
display: "map",
init: function (annotations, latitude, longitude, top, bottom, delta) {
if (top)
map.top = top;
if (bottom)
map.bottom = bottom;
if (delta) {
map.latitudeDelta = delta;
map.longitudeDelta = delta;
}
map.createMap(annotations, latitude, longitude);
map.createOptions();
map.getLocation();
},
createMap: function (annotations, latitude, longitude) {
map.mapView = Ti.Map.createView({
mapType: Ti.Map.STANDARD_TYPE, animate: true, regionFit: false, userLocation: true,
region: { latitude: latitude, longitude: longitude, latitudeDelta: map.latitudeDelta, longitudeDelta: map.longitudeDelta },
annotations: annotations, bottom: map.bottom, top: map.top, borderWidth: 1
});
if (!isAndroid) {
map.mapView.addAnnotation(annotations[0]);
}
map.mapView.selectAnnotation(annotations[0]);
win.add(map.mapView);
},
createOptions: function () {
//map/satellite displays.
var mapDisplay = new ImageView({ image: path + 'images/map/satellite-view.png', width: 70, height: 49, zIndex: 2, top: map.top + 5, right: 5 });
mapDisplay.addEventListener('click', function () {
if (map.display == "map") {
map.mapView.setMapType(Titanium.Map.SATELLITE_TYPE);
mapDisplay.image = path + "images/map/map-view.png";
map.display = "satellite";
}
else {
map.mapView.setMapType(Titanium.Map.STANDARD_TYPE);
mapDisplay.image = path + "images/map/satellite-view.png";
map.display = "map";
}
});
win.add(mapDisplay);
//crosshairs.
if(Ti.Geolocation.locationServicesEnabled) {
var centerDisplay = new ImageView({ image: path + 'images/map/crosshairs.png', width: 49, height: 49, zIndex: 2, top: map.top + 5, right: 80 });
centerDisplay.addEventListener('click', function () {
if(map.latitude != 0 && map.longitude != 0) {
info("setting user location to " + map.latitude + " / " + map.longitude);
//center map.
var userLocation = {
latitude: map.latitude,
longitude: map.longitude,
latitudeDelta: map.latitudeDelta,
longitudeDelta: map.longitudeDelta,
animate: true
};
map.mapView.setLocation(userLocation);
}
else {
info("Can't get user location, lat and long is 0!");
}
});
win.add(centerDisplay);
}
},
createAnnotation: function (title, subtitle, latitude, longitude, isLocation, addToMap) {
var mapAnnotation = Ti.Map.createAnnotation({
latitude: latitude, longitude: longitude,
title: title,
subtitle: subtitle,
animate: true
});
if (isAndroid) {
mapAnnotation.pinImage = path + (isLocation ? "images/map/blue-pin.png" : "images/map/purple-pin.png");
}
else {
mapAnnotation.pincolor = isLocation ? Ti.Map.ANNOTATION_PURPLE : Ti.Map.ANNOTATION_RED;
}
if (addToMap)
map.mapView.addAnnotation(mapAnnotation);
return mapAnnotation;
},
updateAnnotation: function (mapAnnotation, title, subtitle, latitude, longitude, isLocation) {
if (mapAnnotation) {
map.mapView.removeAnnotation(mapAnnotation);
mapAnnotation = map.createAnnotation(title, subtitle, latitude, longitude, isLocation);
map.mapView.addAnnotation(mapAnnotation);
map.mapView.selectAnnotation(mapAnnotation);
}
},
addAnnotation: function (mapAnnotation) {
map.mapView.addAnnotation(mapAnnotation);
},
removeAnnotation: function (mapAnnotation) {
map.mapView.removeAnnotation(mapAnnotation);
},
selectAnnotation: function (mapAnnotation) {
map.mapView.selectAnnotation(mapAnnotation);
},
createRoute: function (name, points) {
var route = {
name: name, points: points, color: "#7c74d4", width: 4
};
map.mapView.addRoute(route);
setTimeout(function () { map.mapView.regionFit = true; }, 700);
},
getLocation: function() {
Ti.Geolocation.preferredProvider = Ti.Geolocation.PROVIDER_GPS;
Ti.Geolocation.purpose = "testing";
Ti.Geolocation.accuracy = Ti.Geolocation.ACCURACY_BEST;
Ti.Geolocation.distanceFilter = 10;
if(!Ti.Geolocation.locationServicesEnabled) {
//alert('Your device has GPS turned off. Please turn it on.');
return;
}
function updatePosition(e) {
if(!e.success || e.error) {
info("Unable to get your location - " + e.error);
return;
}
info(JSON.stringify(e.coords));
map.latitude = e.coords.latitude;
map.longitude = e.coords.longitude;
Ti.Geolocation.removeEventListener('location', updatePosition);
};
Ti.Geolocation.getCurrentPosition(updatePosition);
Ti.Geolocation.addEventListener('location', updatePosition);
}
};