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
[…] 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) […]
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