-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap_template_m.html
130 lines (97 loc) · 3.49 KB
/
map_template_m.html
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="geo2tag_requests.js"></script>
<script src="spin.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<script src="geo2tag_map_widget.js"></script>
<script>
var login = "LOGIN_PLACEHOLDER";
var password = "PASSWORD_PLACEHOLDER";
var dbName = "tracker_db";
var serverUrl = "http://194.85.173.9:20005/service";
var tagNumber = 0;
SettingsStorage.SERVER_URL = serverUrl;
function onRefreshButtonClicked(){
//console.log("onlyLastTag:"+onlyLastTag);
mapWidget.addEventListener("onLoginSuccess",onMapWidgetLogin);
//mapWidget.setShowOnlyLastTag(onlyLastTag);
mapWidget.addEventListener("onLoginSuccess",onMapWidgetLogin);
mapWidget.addEventListener("onErrorOccured", stopSpinner);
mapWidget.addEventListener("onFilterSuccess", stopSpinner);
//mapWidget.setShowOnlyLastTag(onlyLastTag);
mapWidget.login(login, password);
spinner.spin(target);
}
function stopSpinner(){
spinner.stop();
}
function onMapWidgetLogin(){
sendSetDbRequest(mapWidget.authToken, dbName, onSetDbSuccess, bind(mapWidget,"onErrorOccured"));
}
function onSetDbSuccess(jsonResponse){
var radius = document.getElementById("radius_edit").value;
if (radius<1){
console.log("Radius has incorrect value!!!");
stopSpinner();
return;
}
mapWidget.filterCircle(latitude, longitude, radius, getPastDateTime(1), getCurrentDateTime(), tagNumber);
}
function onContextMenu(e){
console.log("Map clicked at "+e.latlng);
latitude = e.latlng.lat;
longitude = e.latlng.lng;
mapWidget.changeMapCenter(e.latlng.lat, e.latlng.lng);
//alert("You clicked the map at " + e.latlng);
}
</script>
</head>
<body>
<table border>
<tr>
<td>
<div id="map" style="width: 600px; height: 400px"></div>
<script>
var latitude = LAT_PLACEHOLDER;
var longitude = LON_PLACEHOLDER;
var mapWidget = new MapWidget(LAT_PLACEHOLDER, LON_PLACEHOLDER, "map");
mapWidget.showLayerControl = false;
mapWidget.map.on("contextmenu", onContextMenu);
var opts = {
lines: 17, // The number of lines to draw
length: 34, // The length of each line
width: 8, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 63, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb
speed: 0.8, // Rounds per second
trail: 58, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('map');
var spinner = new Spinner(opts);
onRefreshButtonClicked();
</script>
</td>
</tr>
<tr>
<td>
Radius (km)<br>
<input type="number" size="40" id="radius_edit" title="Radius" value="10" min="1"><br>
<button onclick="onRefreshButtonClicked();">Refresh</button><br>
</td>
</tr>
</table>
</body>
</html>