Geo Location

June 15th, 2011 § 2 comments

Hi all,

It’s been a while since the last post of iOS Databases Limit. Now, I’m doing an experiment about the geolocation on iPhone using Navigator – Geolocation on Google Maps.

This is just for your information about HTML5 navigator – GeoLocation. GeoLocation API is part of HTML5 library that can be used to define your device location.

methods:

getCurrentPosition(callback[, error[, opts]])
return: none;

watchPositioin(callback[, error[, opts]])
return: watchID (long)

clearWatch(watchID)
return: none;

/* callback -> triggered when success of getting position */
callback(position)
return: none;
position: {
	coords:  {
		latitude: (double),
		longitude: (double),
		altitude: (double),
		accuracy: (double),
		altitudeAccuracy: (double),
		heading: (double),
		speed: (double)
	},
	timestamp: (timestamp)
};

/* callback -> triggered when error occur while getting position */
error(e)
return: none;
error {
	PERMISSION_DENIED: 1;
	POSITION_UNAVAILABLE: 2;
	TIMEOUT: 3;
	code: (enum);
	message: (string)
};

/* Options */
opts: {
	enableHighAccuracy: (boolean),
	timeout: (long);
	long maximumAge: (long);
};


For my GeoLocation app, this is my code (this is not finish yet, but working):

if(typeof(geoMap)=='undefined') var geoMap = {};
if(typeof(app)=='undefined') var app = {
		width: jQuery(window).width(),
		height: jQuery(window).height()
	};
(function(){
geoMap = {
	element: null,
	elementStatus:null,
	limit: 5,
	interval: 15,
	isPulling: false,
	watchID: null,
	watchIDOther: [],
	marker: null,
	markerSelected: null,
	markerOthers: [],
	posCurrent: null,
	posPin: null,
	posOthers: [],
	gmap: null,
	gmapOptions: {
		zoom: 18,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	},
	init: function(el){
		var self = this;
		if(!self.element){
			var $element
			if(el){
				$element = jQuery(el);
			}else{
				$element = jQuery('<div></div>');
				$element.insertAfter(jQuery('.app').find('.header'));
			}
			$element.addClass('app-panel')
			.attr('id', 'webgenMap')
			.css({
//				display:'none',
				width:app.width,
				height:app.height-40
			});
			self.element = $element[0];
			var $elementStatus = jQuery('<div></div>');
			$elementStatus.addClass('webgenMapStatus')
			.css({
				width:app.width,
				height: 30,
				'font-size': 8,
				position: 'absolute',
				bottom: 0,
				'z-index':10
			}).appendTo(document.body);
			self.elementStatus = $elementStatus[0];
		}
		if(!self.gmap){
			self.gmap = new google.maps.Map(self.element, self.gmapOptions);
			self.marker = new google.maps.Marker({
			      map:self.gmap,
			      animation: google.maps.Animation.DROP
			    });
			self.attachEvent(self.marker,"YOU");
		}
		self.initEvent();
	},
	attachEvent: function(marker,msg){
		var self = this;
		var infowindow = new google.maps.InfoWindow({
			content: msg,
			size: new google.maps.Size(5,5)
		});
		google.maps.event.addListener(marker,'click',function(e){
			if(!marker.getAnimation()){
				marker.setAnimation(google.maps.Animation.BOUNCE);
			}else{
				marker.setAnimation(null);
			}
			infowindow.open(self.gmap,marker);
		});
	},
	initEvent: function(){
		var self = this;
		if(navigator.geolocation){
			navigator.geolocation.watchPosition(function(position){self.posWatch(position);});
		}
	},
	posWatch: function(position){
		var self = this;
		var coords = position.coords;
		jQuery(self.elementStatus).text('Lat='+coords.latitude+';Lng='+coords.longitude+';Alt='+coords.altitude+';heading='+coords.heading);
		var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
		self.gmap.setCenter(latlng);
		self.marker.setPosition(latlng);
	}
}
})();

My script is quite big of definition, because I’m planning to save the position to database and make a historical of it. I remove the update function to shorten it (sorry for not putting all my code in).

HTML code:

<html>
<head>
<script src="jquery.js">
<script src="geomap.js">
<script>
window.load = function(){
geoMap.init(jQuery('#map')[0]);
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

from this app, I find out:
– The interval of HTML5 Geolocation is 1000ms, not really real time, and make the movement not smooth.
– The location some will not accurate if:
— Cloudy weather / rainy weather.
— Lot of high building.
— Signal receiving very low.
— Using built-in cellular position (triangle waves).
heading feature is not working
– Altitude is not working perfectly

I’m going to try the native GeoLocation / Location Awareness under iOS tomorrow. Because that is the only hardware i have. :p (want to have a smooth movement on Map). I’ll post it after i get a simple code working, hopefully. :)

Hope this simple example will help somebody that looking for GeoLocation example, and don’t forget to POKE me it you have any question about this GeoLocation.

Cheers,
helman

Tagged , , , , , , , , ,


§ 2 Responses to Geo Location"

  • [...] that is the only change that i did. thanks for reading this. hope this will help somebody. if you want to look at my changes, here is it: (extended from my previous class GeoLocation) [...]

  • admin says:

    Hi, Just thinking about it, is that any Unlimited data transfer on VPS if i’m not paying A LOT.
    I know there is Unlimited data transfer, but only apply when we use DPS, also the Unlimited speed is not really fast. and we need to pay A LOT more.

    Cheers
    helman

Leave a Reply