-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap.html
135 lines (103 loc) · 4.36 KB
/
map.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
131
132
133
134
135
<!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>
function onRefreshButtonClicked(){
var login = document.getElementById("login_edit").value;
var password = document.getElementById("password_edit").value;
//var onlyLastTag = document.getElementById("only_last_tag_checkbox").checked;
//console.log("onlyLastTag:"+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(){
var dbName = document.getElementById("db_name_edit").value;
sendSetDbRequest(mapWidget.authToken, dbName, onSetDbSuccess, bind(mapWidget,"onErrorOccured"));
}
function onSetDbSuccess(jsonResponse){
var radius = document.getElementById("radius_edit").value;
var latitude = document.getElementById("latitude_edit").value;
var longitude = document.getElementById("longitude_edit").value;
if ( (typeof latitude == "number") || (typeof longitude == "number") || radius<1){
console.log("Radius, latitude or longitude have incorrect value!!!");
return;
}
var tagNumber = document.getElementById("tags_number_edit").value;
//mapWidget.loadTags(latitude, longitude, radius );
mapWidget.filterCircle(latitude, longitude, radius, getPastDateTime(1), getCurrentDateTime(), tagNumber);
}
function onContextMenu(e){
console.log("Map clicked at "+e.latlng);
document.getElementById("latitude_edit").value = e.latlng.lat;
document.getElementById("longitude_edit").value = 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>
Login<br>
<input type="text" size="40" id="login_edit" title="Login" value="Mark" ><br>
Password<br>
<input type="text" size="40" id="password_edit" title="Password" value="test"><br>
Radius (km)<br>
<input type="number" size="40" id="radius_edit" title="Radius" value="10" min="1"><br>
Latitude<br>
<input type="text" size="40" id="latitude_edit" title="Latitude" value="59.9195" ><br>
Longitude<br>
<input type="text" size="40" id="longitude_edit" title="Longitude" value="30.3262"><br>
DbName<br>
<input type="text" size="40" id="db_name_edit" title="DbName" value="default"><br>
How many tags display in each channel (set 0 to display all tags)<br>
<input type="number" size="40" id="tags_number_edit" title="TagsNumber" value="5" min="0"><br>
<button onclick="onRefreshButtonClicked();">Refresh</button><br>
</td>
<td>
<div id="map" style="width: 600px; height: 400px"></div>
<script>
var mapWidget = new MapWidget(59.9195, 30.3262, "map");
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);
mapWidget.map.on("contextmenu", onContextMenu);
onRefreshButtonClicked();
</script>
</td>
</tr>
</table>
</body>
</html>