1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nrusingh GPS</title>
<%
String email = session.getAttribute("email").toString();
String password = session.getAttribute("password").toString();
%>
<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.22&key=AIzaSyAwhtPukjfFu0p8p7KtAToIuLjqSQJmThM"></script>
<script src="js/jquery.min.js"></script>
<script src="js/maplace.min.js"></script>
<script type="text/javascript">
var test = [];
$(function() {
var email = '<%= email %>';
var password = '<%= password %>';
//alert("id_devices: "+id_devices+" -- deviceId_devices: "+deviceId_devices);
var position_url = 'http://23.92.61.79:8082/api/positions/';
current_location();
setInterval(function(){
current_location();
},10000);
function current_location(){
$.ajax({
type: 'get',
url: position_url,
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
"Authorization": "Basic " + btoa(email + ":" + password)
},
'dataType': 'json',
success: function (response) {
console.log('Success: '+JSON.stringify(response));
var imageno = 10;
var locatio_arr = [];
$.each(response, function(k,v){
var _id = v.id,
_deviceId = v.deviceId,
_type = v.type,
_protocol = v.protocol,
_serverTime = v.serverTime,
_deviceTime = v.deviceTime,
_fixTime = v.fixTime,
_outdated = v.outdated,
_valid = v.valid,
_latitude = v.latitude,
_longitude = v.longitude,
_altitude = v.altitude,
_speed = v.speed,
_course = v.course,
_address = v.address,
_accuracy = v.accuracy,
_network = v.network;
_address = (_address == null)?"":_address;
imageno = ((k+1) <= 9) ? (k+1) : 10;
var locatio_obj = {};
locatio_obj["lat"]=_latitude;
locatio_obj["lon"]=_longitude;
locatio_obj["title"]="Device id: "+_deviceId;
locatio_obj["html"]='<div style="overflow: auto;color: #2f2f2f;border: 1px solid #d7d7d7;padding: 10px;background: aliceblue;font-size: 12px;">Device ID: <b>'+_deviceId+'</b><br><u>Address</u>:'+_address+'</div>';
locatio_obj["icon"]="images/car11"+imageno+".png";
locatio_arr.push(locatio_obj);
});
new Maplace({
/* locations: [
{ "lat":_latitude,
"lon":_longitude,
"title":"<i>"+_deviceId+"</i>",
"html":"<h1>"+_deviceId+"</h1><br><u>Address</u>:"+_address,
"icon":"images/car24.png"
}
]
*/
locations : locatio_arr
//,map_div: '#gmap-polyline',
//,controls_div: '#controls-polyline'
,controls_type : 'list'
,controls_on_map : false
,view_all_text : 'Start'
//,type : 'polyline'
,map_options: {
zoom: 12,
controls_on_map: false
}
}).Load();
$('#loader_left').hide();
},
error: function(response){
alert('Error: '+JSON.stringify(response));
$('#loader_left').hide();
}
});
}
});
</script>
</head>
<body>
<div id="gmap" style="with: 400px; height: 400px;"></div>
<!--
<div id="controls"></div>
<div id="controls-polyline"></div>
<div id="gmap-polyline"></div>
-->
</body>
</html>
|