]>
Commit | Line | Data |
---|---|---|
92a62e1d VP |
1 | <?php |
2 | ||
3 | require_once "../../inc/common.php"; | |
4 | require_once "../../inc/header.php"; | |
5 | require_once "../../inc/connection.php"; | |
6 | global $rpc; | |
7 | ?> | |
8 | <link rel="stylesheet" href="./leaflet.css" /> | |
9 | <script src="./leaflet.js"></script> | |
10 | <h2>Live Map</h2> | |
11 | <hr> | |
12 | <style> | |
13 | #map { | |
14 | height: 400px; | |
15 | width: 600px; | |
16 | } | |
17 | ||
18 | .new-number { | |
19 | animation: fadeToWhite 15s forwards; | |
20 | } | |
21 | .number-icon { | |
22 | background-color: white; | |
23 | border: 2px solid black; | |
24 | border-radius: 50%; | |
25 | display: flex; | |
26 | justify-content: center; | |
27 | align-items: center; | |
28 | max-height: 20px; | |
29 | max-width: 20px; | |
30 | font-size: 11px; | |
31 | font-weight: bold; | |
32 | } | |
33 | @keyframes fadeToWhite { | |
34 | 0% { background-color: red; color: white; } /* Start with red */ | |
35 | 100% { background-color: white; color: black; } /* End with white */ | |
36 | } | |
37 | </style> | |
38 | ||
39 | <div id="map"></div> | |
40 | <script> | |
41 | const countryCenters = { | |
42 | "AF": { "lat": 33.93911, "lng": 67.709953 }, | |
43 | "AL": { "lat": 41.153332, "lng": 20.168331 }, | |
44 | "DZ": { "lat": 28.033886, "lng": 1.659626 }, | |
45 | "AO": { "lat": -11.202692, "lng": 17.873887 }, | |
46 | "AR": { "lat": -38.416097, "lng": -63.616672 }, | |
47 | "AM": { "lat": 40.069099, "lng": 45.038189 }, | |
48 | "AU": { "lat": -25.274398, "lng": 133.775136 }, | |
49 | "AT": { "lat": 47.516231, "lng": 14.550072 }, | |
50 | "AZ": { "lat": 40.143105, "lng": 47.576927 }, | |
51 | "BH": { "lat": 25.930414, "lng": 50.637772 }, | |
52 | "BD": { "lat": 23.684994, "lng": 90.356331 }, | |
53 | "BY": { "lat": 53.709807, "lng": 27.953389 }, | |
54 | "BE": { "lat": 50.503887, "lng": 4.469936 }, | |
55 | "BZ": { "lat": 17.189877, "lng": -88.49765 }, | |
56 | "BJ": { "lat": 9.30769, "lng": 2.315834 }, | |
57 | "BT": { "lat": 27.514162, "lng": 90.433601 }, | |
58 | "BO": { "lat": -16.290154, "lng": -63.588653 }, | |
59 | "BA": { "lat": 43.915886, "lng": 17.679076 }, | |
60 | "BW": { "lat": -22.328474, "lng": 24.684866 }, | |
61 | "BR": { "lat": -14.235004, "lng": -51.92528 }, | |
62 | "BN": { "lat": 4.535277, "lng": 114.727669 }, | |
63 | "BG": { "lat": 42.733883, "lng": 25.48583 }, | |
64 | "BF": { "lat": 12.238333, "lng": -1.561593 }, | |
65 | "BI": { "lat": -3.373056, "lng": 29.918886 }, | |
66 | "KH": { "lat": 12.565679, "lng": 104.990963 }, | |
67 | "CM": { "lat": 7.369722, "lng": 12.354722 }, | |
68 | "CA": { "lat": 56.130366, "lng": -106.346771 }, | |
69 | "CF": { "lat": 6.611111, "lng": 20.939444 }, | |
70 | "TD": { "lat": 15.454166, "lng": 18.732207 }, | |
71 | "CL": { "lat": -35.675147, "lng": -71.542969 }, | |
72 | "CN": { "lat": 35.86166, "lng": 104.195397 }, | |
73 | "CO": { "lat": 4.570868, "lng": -74.297333 }, | |
74 | "KM": { "lat": -11.875001, "lng": 43.872219 }, | |
75 | "CG": { "lat": -0.228021, "lng": 15.827659 }, | |
76 | "CR": { "lat": 9.748917, "lng": -83.753428 }, | |
77 | "HR": { "lat": 45.1, "lng": 15.2 }, | |
78 | "CU": { "lat": 21.521757, "lng": -77.781167 }, | |
79 | "CY": { "lat": 35.126413, "lng": 33.429859 }, | |
80 | "CZ": { "lat": 49.817492, "lng": 15.472962 }, | |
81 | "DK": { "lat": 56.26392, "lng": 9.501785 }, | |
82 | "DJ": { "lat": 11.825138, "lng": 42.590275 }, | |
83 | "DM": { "lat": 15.414999, "lng": -61.370976 }, | |
84 | "DO": { "lat": 18.735693, "lng": -70.162651 }, | |
85 | "EC": { "lat": -1.831239, "lng": -78.183406 }, | |
86 | "EG": { "lat": 26.820553, "lng": 30.802498 }, | |
87 | "SV": { "lat": 13.794185, "lng": -88.89653 }, | |
88 | "GQ": { "lat": 1.650801, "lng": 10.267895 }, | |
89 | "ER": { "lat": 15.179384, "lng": 39.782334 }, | |
90 | "EE": { "lat": 58.595272, "lng": 25.013607 }, | |
91 | "ET": { "lat": 9.145, "lng": 40.489673 }, | |
92 | "FJ": { "lat": -16.578193, "lng": 179.414413 }, | |
93 | "FI": { "lat": 61.92411, "lng": 25.748151 }, | |
94 | "FR": { "lat": 46.603354, "lng": 1.888334 }, | |
95 | "GA": { "lat": -0.803689, "lng": 11.609444 }, | |
96 | "GM": { "lat": 13.443182, "lng": -15.310139 }, | |
97 | "GE": { "lat": 42.315407, "lng": 43.356892 }, | |
98 | "DE": { "lat": 51.165691, "lng": 10.451526 }, | |
99 | "GH": { "lat": 7.946527, "lng": -1.023194 }, | |
100 | "GR": { "lat": 39.074208, "lng": 21.824312 }, | |
101 | "GD": { "lat": 12.262776, "lng": -61.604171 }, | |
102 | "GT": { "lat": 15.783471, "lng": -90.230759 }, | |
103 | "GN": { "lat": 9.945587, "lng": -9.696645 }, | |
104 | "GW": { "lat": 11.803749, "lng": -15.180413 }, | |
105 | "GY": { "lat": 4.860416, "lng": -58.93018 }, | |
106 | "HT": { "lat": 18.971187, "lng": -72.285215 }, | |
107 | "HN": { "lat": 15.199999, "lng": -86.241905 }, | |
108 | "HU": { "lat": 47.162494, "lng": 19.503304 }, | |
109 | "IS": { "lat": 64.963051, "lng": -19.020835 }, | |
110 | "IN": { "lat": 20.593684, "lng": 78.96288 }, | |
111 | "ID": { "lat": -0.789275, "lng": 113.921327 }, | |
112 | "IR": { "lat": 32.427908, "lng": 53.688046 }, | |
113 | "IQ": { "lat": 33.223191, "lng": 43.679291 }, | |
114 | "IE": { "lat": 53.41291, "lng": -8.24389 }, | |
115 | "IL": { "lat": 31.046051, "lng": 34.851612 }, | |
116 | "IT": { "lat": 41.87194, "lng": 12.56738 }, | |
117 | "JM": { "lat": 18.109581, "lng": -77.297508 }, | |
118 | "JP": { "lat": 36.204824, "lng": 138.252924 }, | |
119 | "JO": { "lat": 30.585164, "lng": 36.238414 }, | |
120 | "KZ": { "lat": 48.019573, "lng": 66.923684 }, | |
121 | "KE": { "lat": -0.023559, "lng": 37.906193 }, | |
122 | "KI": { "lat": -3.370417, "lng": -168.734039 }, | |
123 | "KP": { "lat": 40.339852, "lng": 127.510093 }, | |
124 | "KR": { "lat": 35.907757, "lng": 127.766922 }, | |
125 | "XK": { "lat": 42.602636, "lng": 20.902977 }, | |
126 | "KW": { "lat": 29.31166, "lng": 47.481766 }, | |
127 | "KG": { "lat": 41.20438, "lng": 74.766098 }, | |
128 | "LA": { "lat": 19.85627, "lng": 102.495496 }, | |
129 | "LV": { "lat": 56.879635, "lng": 24.603189 }, | |
130 | "LB": { "lat": 33.854721, "lng": 35.862285 }, | |
131 | "LS": { "lat": -29.609988, "lng": 28.233608 }, | |
132 | "LR": { "lat": 6.428055, "lng": -9.429499 }, | |
133 | "LY": { "lat": 26.3351, "lng": 17.228331 }, | |
134 | "LI": { "lat": 47.166, "lng": 9.555373 }, | |
135 | "LT": { "lat": 55.169438, "lng": 23.881275 }, | |
136 | "LU": { "lat": 49.815273, "lng": 6.129583 }, | |
137 | "MK": { "lat": 41.608635, "lng": 21.745275 }, | |
138 | "MG": { "lat": -18.766947, "lng": 46.869107 }, | |
139 | "MW": { "lat": -13.254308, "lng": 34.301525 }, | |
140 | "MY": { "lat": 4.210484, "lng": 101.975766 }, | |
141 | "MV": { "lat": 3.202778, "lng": 73.22068 }, | |
142 | "ML": { "lat": 17.570692, "lng": -3.996166 }, | |
143 | "MT": { "lat": 35.937496, "lng": 14.375416 }, | |
144 | "MH": { "lat": 7.131474, "lng": 171.184478 }, | |
145 | "MR": { "lat": 21.00789, "lng": -10.940835 }, | |
146 | "MU": { "lat": -20.348404, "lng": 57.552152 }, | |
147 | "MX": { "lat": 23.634501, "lng": -102.552784 }, | |
148 | "FM": { "lat": 7.425554, "lng": 150.550812 }, | |
149 | "MD": { "lat": 47.411631, "lng": 28.369885 }, | |
150 | "MC": { "lat": 43.750298, "lng": 7.412841 }, | |
151 | "MN": { "lat": 46.862496, "lng": 103.846656 }, | |
152 | "ME": { "lat": 42.708678, "lng": 19.37439 }, | |
153 | "MA": { "lat": 31.791702, "lng": -7.09262 }, | |
154 | "MZ": { "lat": -18.665695, "lng": 35.529562 }, | |
155 | "MM": { "lat": 21.913965, "lng": 95.956223 }, | |
156 | "NA": { "lat": -22.95764, "lng": 18.49041 }, | |
157 | "NR": { "lat": -0.522778, "lng": 166.931503 }, | |
158 | "NP": { "lat": 28.394857, "lng": 84.124008 }, | |
159 | "NL": { "lat": 52.132633, "lng": 5.291266 }, | |
160 | "NZ": { "lat": -40.900557, "lng": 174.885971 }, | |
161 | "NI": { "lat": 12.865416, "lng": -85.207229 }, | |
162 | "NE": { "lat": 17.607789, "lng": 8.081666 }, | |
163 | "NG": { "lat": 9.081999, "lng": 8.675277 }, | |
164 | "NO": { "lat": 60.472024, "lng": 8.468946 }, | |
165 | "OM": { "lat": 21.512583, "lng": 55.923255 }, | |
166 | "PK": { "lat": 30.375321, "lng": 69.345116 }, | |
167 | "PW": { "lat": 7.51498, "lng": 134.58252 }, | |
168 | "PA": { "lat": 8.537981, "lng": -80.782127 }, | |
169 | "PG": { "lat": -6.314993, "lng": 143.95555 }, | |
170 | "PY": { "lat": -23.442503, "lng": -58.443832 }, | |
171 | "PE": { "lat": -9.189967, "lng": -75.015152 }, | |
172 | "PH": { "lat": 12.879721, "lng": 121.774017 }, | |
173 | "PL": { "lat": 51.919438, "lng": 19.145136 }, | |
174 | "PT": { "lat": 39.399872, "lng": -8.224454 }, | |
175 | "QA": { "lat": 25.354826, "lng": 51.183884 }, | |
176 | "RO": { "lat": 45.943161, "lng": 24.96676 }, | |
177 | "RU": { "lat": 61.52401, "lng": 105.318756 }, | |
178 | "RW": { "lat": -1.940278, "lng": 29.873888 }, | |
179 | "KN": { "lat": 17.357822, "lng": -62.782998 }, | |
180 | "LC": { "lat": 13.909444, "lng": -60.978893 }, | |
181 | "VC": { "lat": 13.252817, "lng": -61.287228 }, | |
182 | "WS": { "lat": -13.759029, "lng": -172.104629 }, | |
183 | "SM": { "lat": 43.94236, "lng": 12.457777 }, | |
184 | "ST": { "lat": 0.18636, "lng": 6.613081 }, | |
185 | "SA": { "lat": 23.885942, "lng": 45.079162 }, | |
186 | "SN": { "lat": 14.497401, "lng": -14.452362 }, | |
187 | "RS": { "lat": 44.016521, "lng": 21.005859 }, | |
188 | "SC": { "lat": -4.679574, "lng": 55.491977 }, | |
189 | "SL": { "lat": 8.460555, "lng": -11.779889 }, | |
190 | "SG": { "lat": 1.352083, "lng": 103.819836 }, | |
191 | "SK": { "lat": 48.669026, "lng": 19.699024 }, | |
192 | "SI": { "lat": 46.151241, "lng": 14.995463 }, | |
193 | "SB": { "lat": -9.64571, "lng": 160.156194 }, | |
194 | "SO": { "lat": 5.152149, "lng": 46.199616 }, | |
195 | "ZA": { "lat": -30.559482, "lng": 22.937506 }, | |
196 | "ES": { "lat": 40.463667, "lng": -3.74922 }, | |
197 | "LK": { "lat": 7.873054, "lng": 80.771797 }, | |
198 | "SD": { "lat": 12.862807, "lng": 30.217636 }, | |
199 | "SR": { "lat": 3.919305, "lng": -56.027783 }, | |
200 | "SZ": { "lat": -26.522503, "lng": 31.465866 }, | |
201 | "SE": { "lat": 60.128161, "lng": 18.643501 }, | |
202 | "CH": { "lat": 46.818188, "lng": 8.227512 }, | |
203 | "SY": { "lat": 34.802075, "lng": 38.996815 }, | |
204 | "TW": { "lat": 23.69781, "lng": 120.960515 }, | |
205 | "TJ": { "lat": 38.861034, "lng": 71.276093 }, | |
206 | "TZ": { "lat": -6.369028, "lng": 34.888822 }, | |
207 | "TH": { "lat": 15.870032, "lng": 100.992541 }, | |
208 | "TL": { "lat": -8.874217, "lng": 125.727539 }, | |
209 | "TG": { "lat": 8.619543, "lng": 0.824782 }, | |
210 | "TO": { "lat": -21.178986, "lng": -175.198242 }, | |
211 | "TT": { "lat": 10.691803, "lng": -61.222503 }, | |
212 | "TN": { "lat": 33.886917, "lng": 9.537499 }, | |
213 | "TR": { "lat": 38.963745, "lng": 35.243322 }, | |
214 | "TM": { "lat": 38.969719, "lng": 59.556278 }, | |
215 | "TV": { "lat": -7.109535, "lng": 177.64933 }, | |
216 | "UG": { "lat": 1.373333, "lng": 32.290275 }, | |
217 | "UA": { "lat": 48.379433, "lng": 31.16558 }, | |
218 | "AE": { "lat": 23.424076, "lng": 53.847818 }, | |
219 | "GB": { "lat": 55.378051, "lng": -3.435973 }, | |
220 | "US": { "lat": 37.09024, "lng": -95.712891 }, | |
221 | "UY": { "lat": -32.522779, "lng": -55.765835 }, | |
222 | "UZ": { "lat": 41.377491, "lng": 64.585262 }, | |
223 | "VU": { "lat": -15.376706, "lng": 166.959158 }, | |
224 | "VE": { "lat": 6.42375, "lng": -66.58973 }, | |
225 | "VN": { "lat": 14.058324, "lng": 108.277199 }, | |
226 | "YE": { "lat": 15.552727, "lng": 48.516388 }, | |
227 | "ZM": { "lat": -13.133897, "lng": 27.849332 }, | |
228 | "ZW": { "lat": -19.015438, "lng": 29.154857 } | |
229 | }; | |
230 | ||
231 | var map = L.map('map'); | |
232 | map.setView([-0,-0], 1.4); | |
233 | ||
234 | var BASE_URL = "<?php echo get_config("base_url"); ?>"; | |
235 | if (!!window.EventSource) { | |
236 | var source = new EventSource(BASE_URL+"api/notification.php"); | |
237 | source.addEventListener('message', GetNotifs, false); | |
238 | } | |
239 | ||
240 | countrycounts = {}; | |
241 | function GetNotifs(e) | |
242 | { | |
243 | var event = JSON.parse(e.data); | |
244 | if (event.subsystem !== "connect") | |
245 | return; | |
246 | ||
247 | if (event.event_id === "REMOTE_CLIENT_CONNECT" | |
248 | || event.event_id === "LOCAL_CLIENT_CONNECT") | |
249 | { | |
250 | let cc = event.client.geoip.country_code; | |
251 | const co = countryCenters[event.client.geoip.country_code]; | |
252 | if (countrycounts[cc] != NaN && countrycounts[cc] > 0) | |
253 | { | |
254 | let v = document.getElementsByClassName('country-'+cc)[0]; | |
255 | v.innerHTML = ++countrycounts[cc]; | |
256 | v.classList.add('new-number'); | |
257 | v.style.animation = 'none'; | |
258 | v.offsetHeight; | |
259 | v.style.animation = null; | |
260 | } | |
261 | else { | |
262 | var numberIcon = L.divIcon({ | |
263 | className: 'number-icon new-number country-'+cc, | |
264 | html: 1, | |
265 | iconSize: [30, 30], | |
266 | iconAnchor: [15, 15] // Center the icon | |
267 | }); | |
268 | countrycounts[cc] = 1; | |
269 | L.marker([co.lat, co.lng], {icon: numberIcon}).addTo(map); | |
270 | } | |
271 | } | |
272 | if (event.event_id === "REMOTE_CLIENT_DISCONNECT" | |
273 | || event.event_id === "LOCAL_CLIENT_DISCONNECT") | |
274 | { | |
275 | let cc = event.client.geoip.country_code; | |
276 | const co = countryCenters[cc]; | |
277 | if (countrycounts[cc] && countrycounts[cc] > 0) | |
278 | { | |
279 | let v = document.getElementsByClassName('country-'+cc)[0]; | |
280 | v.innerHTML = --countrycounts[event.client.geoip.country_code]; | |
281 | } | |
282 | else { | |
283 | var numberIcon = L.divIcon({ | |
284 | className: 'number-icon', | |
285 | html: --countrycounts[event.client.geoip.country_code], | |
286 | iconSize: [30, 30], | |
287 | iconAnchor: [15, 15] // Center the icon | |
288 | }); | |
289 | L.marker([co.lat, co.lng], {icon: numberIcon}).addTo(map); | |
290 | } | |
291 | if (countrycounts[cc] == undefined || countrycounts[cc] < 1) | |
292 | { | |
293 | document.getElementsByClassName('country-'+cc)[0].remove(); | |
294 | } | |
295 | } | |
296 | } | |
297 | ||
298 | L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
299 | maxZoom: 10, | |
300 | attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' | |
301 | }).addTo(map); | |
302 | ||
303 | ||
304 | var users = <?php echo json_encode((object)$rpc->user()->getAll()); ?>; | |
305 | var count = 0; | |
306 | for (let i = 0; users[i] != null; i++) | |
307 | { | |
308 | if (!users[i].geoip) | |
309 | continue; | |
310 | const cc = users[i].geoip.country_code; | |
311 | const coords = countryCenters[cc]; | |
312 | if (countrycounts[cc]) | |
313 | { | |
314 | let v = document.getElementsByClassName('country-'+cc)[0]; | |
315 | v.innerHTML = ++countrycounts[cc]; | |
316 | } | |
317 | else { | |
318 | countrycounts[cc] = 1; | |
319 | var numberIcon = L.divIcon({ | |
320 | className: 'number-icon country-'+cc, | |
321 | html: 1, | |
322 | iconSize: [30, 30], | |
323 | iconAnchor: [15, 15] // Center the icon | |
324 | }); | |
325 | L.marker([coords.lat, coords.lng], {icon: numberIcon}).addTo(map); | |
326 | } | |
327 | } | |
328 | ||
329 | ||
330 | ||
331 | ||
332 | </script> | |
333 | <?php | |
334 | ||
335 | require_once "../../inc/footer.php"; |