Skip to content

Commit 7f961ba

Browse files
rossengeorgievrossengeorgiev
committed
get GPS position on idevices
- displays the coordinates in the top right corner - adds a marker to the map
1 parent 5aec4a7 commit 7f961ba

File tree

5 files changed

+73
-23
lines changed

5 files changed

+73
-23
lines changed

‎css/main.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,20 @@ header {
2121
z-index: 5;
2222
position: relative;
2323
}
24-
#map,
25-
#main {
26-
position: relative;
27-
z-index: 1;
24+
#app_name {
25+
line-height: normal;
26+
margin-top: 10px;
2827
}
2928
header > div,
3029
#app_name {
30+
position: relative;
3131
height: 50px;
3232
}
33-
33+
#map,
34+
#main {
35+
position: relative;
36+
z-index: 1;
37+
}
3438
#map {
3539
margin: 0;
3640
padding: 0;

‎img/marker-you.png‎

3.93 KB
Loading

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
<link rel="stylesheet" href="css/main.css"/>
2020
<script type="text/javascript" language="javascript" src="js/jquery-1.8.3-min.js"></script>
2121
<script type="text/javascript" language="javascript" src="js/iscroll.js"></script>
22-
<script type="text/javascript" language="javascript" src="js/app.js"></script>
2322
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>
2423
<script src="js/PolylineEncoder.js" type="text/javascript"></script>
2524
<script src="js/balloonmarker.js" type="text/javascript"></script>
2625
<script src="js/BDCCCircle.js" type="text/javascript"></script>
27-
<script src="js/tracker.js?asdasd=1" type="text/javascript"></script>
26+
<script src="js/tracker.js?nocache=1" type="text/javascript"></script>
27+
<script type="text/javascript" language="javascript" src="js/app.js?nocache=1"></script>
2828
</head>
2929
<body onload="load();">
3030
<header>

‎js/app.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ function hideAddressbar()
55
window.scrollTo(0, 1);
66
}
77

8+
89
$(window).ready(function() {
910
window.onorientationchange = hideAddressbar();
1011
listScroll = new iScroll('main', { hScrollbar: false, snap: true });
@@ -48,4 +49,29 @@ $(window).ready(function() {
4849
panTo(parseInt(e.attr('class').match(/vehicle(\d+)/)[1]));
4950
}
5051
});
52+
53+
// We are able to get GPS position on idevices, if the user allows
54+
// The position is displayed in top right corner of the screen
55+
// This should be very handly for in the field tracking
56+
//setTimeout(function() {updateCurrentPosition(50.27533, 3.335166);}, 5000);
57+
if(navigator.geolocation) {
58+
setInterval(function() {
59+
navigator.geolocation.getCurrentPosition(function(position) {
60+
var lat = position.coords.latitude;
61+
var long = position.coords.longitude;
62+
63+
// add marker on the map
64+
updateCurrentPosition(lat, long);
65+
66+
// round the coordinates
67+
lat = parseInt(lat * 1000000)/1000000;
68+
long = parseInt(long * 1000000)/1000000;
69+
70+
$('#app_name b').html(lat + '<br/>' + long);
71+
},
72+
function() {
73+
$('#app_name b').html('mobile<br/>tracker');
74+
});
75+
}, 10000); // poll every 10sec;
76+
}
5177
});

‎js/tracker.js‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1009,7 +1009,7 @@ function addPosition(position) {
10091009

10101010
function refresh() {
10111011
status = '<img src="spinner.gif" width="16" height="16" alt="" /> Refreshing ...';
1012-
$('#status_bar').html(status);
1012+
//$('#status_bar').html(status);
10131013

10141014
$.ajax({
10151015
type: "GET",
@@ -1018,18 +1018,18 @@ function refresh() {
10181018
dataType: "json",
10191019
success: function(response, textStatus) {
10201020
update(response);
1021-
$('#status_bar').html(status);
1021+
//$('#status_bar').html(status);
10221022
},
10231023
complete: function(request, textStatus) {
10241024
// remove the spinner
1025-
$('status_bar').removeClass('ajax_loading');
1025+
//$('status_bar').removeClass('ajax_loading');
10261026
periodical = setTimeout(refresh, timer_seconds * 1000);
10271027
}
10281028
});
10291029
}
10301030

10311031
function refreshReceivers() {
1032-
$('#status_bar').html('<img src="spinner.gif" width="16" height="16" alt="" /> Refreshing receivers ...');
1032+
//$('#status_bar').html('<img src="spinner.gif" width="16" height="16" alt="" /> Refreshing receivers ...');
10331033

10341034
$.ajax({
10351035
type: "GET",
@@ -1041,15 +1041,15 @@ function refreshReceivers() {
10411041
},
10421042
complete: function(request, textStatus) {
10431043
// remove the spinner
1044-
$('status_bar').removeClass('ajax_loading');
1045-
$('#status_bar').html(status);
1044+
//$('status_bar').removeClass('ajax_loading');
1045+
//$('#status_bar').html(status);
10461046
periodical_listeners = setTimeout(refreshReceivers, 60 * 1000);
10471047
}
10481048
});
10491049
}
10501050

10511051
function refreshPredictions() {
1052-
$('#status_bar').html('<img src="spinner.gif" width="16" height="16" alt="" /> Refreshing predictions ...');
1052+
//$('#status_bar').html('<img src="spinner.gif" width="16" height="16" alt="" /> Refreshing predictions ...');
10531053

10541054
$.ajax({
10551055
type: "GET",
@@ -1061,8 +1061,8 @@ function refreshPredictions() {
10611061
},
10621062
complete: function(request, textStatus) {
10631063
// remove the spinner
1064-
$('status_bar').removeClass('ajax_loading');
1065-
$('#status_bar').html(status);
1064+
//$('status_bar').removeClass('ajax_loading');
1065+
//$('#status_bar').html(status);
10661066
periodical_predictions = setTimeout(refreshPredictions, 2 * timer_seconds * 1000);
10671067
}
10681068
});
@@ -1078,7 +1078,7 @@ function startAjax() {
10781078
clearTimeout(periodical_predictions);
10791079

10801080
/* a bit of fancy styles */
1081-
$('status_bar').innerHTML = '<img src="spinner.gif" width="16" height="16" alt="" /> Refreshing ...';
1081+
//$('status_bar').innerHTML = '<img src="spinner.gif" width="16" height="16" alt="" /> Refreshing ...';
10821082

10831083
// the periodical starts here, the * 1000 is because milliseconds required
10841084

@@ -1098,14 +1098,34 @@ function stopAjax() {
10981098
}
10991099

11001100
function centerAndZoomOnBounds(bounds) {
1101-
var center = bounds.getCenter();
1102-
var newZoom = map.getBoundsZoomLevel(bounds);
1103-
if (map.getZoom() != newZoom) {
1104-
map.setCenter(center, newZoom);
1105-
} else {
1106-
map.panTo(center);
1101+
var center = bounds.getCenter();
1102+
var newZoom = map.getBoundsZoomLevel(bounds);
1103+
if (map.getZoom() != newZoom) {
1104+
map.setCenter(center, newZoom);
1105+
} else {
1106+
map.panTo(center);
1107+
}
11071108
}
1109+
1110+
var currentPosition = null;
1111+
1112+
function updateCurrentPosition(lat, lon) {
1113+
var latlng = new GLatLng(lat, lon);
1114+
1115+
if(!currentPosition) {
1116+
currentPosition = {icon: null, marker: null};
1117+
currentPosition.icon = new GIcon();
1118+
currentPosition.icon.image = "img/marker-you.png";
1119+
currentPosition.icon.iconSize = new GSize(19,40);
1120+
currentPosition.icon.iconAnchor = new GPoint(13,40);
1121+
//currentPosition.icon.infoWindowAnchor = new GPoint(18,5);
1122+
currentPosition.marker = new GMarker(latlng, {icon: currentPosition.icon});
1123+
map.addOverlay(currentPosition.marker);
1124+
} else {
1125+
currentPosition.marker.setLatLng(latlng);
1126+
}
11081127
}
1128+
11091129
function updateReceiverMarker(receiver) {
11101130
var latlng = new GLatLng(receiver.lat, receiver.lon);
11111131
if(!receiver.marker) {

0 commit comments

Comments
 (0)