1
|
var mymap;
|
2
|
var heatmapLayer = null;
|
3
|
var marksLayer = null;
|
4
|
|
5
|
var startX = 49.7248;
|
6
|
var startY = 13.3521;
|
7
|
var startZoom = 17;
|
8
|
|
9
|
var dataSourceRoute;
|
10
|
var currentTime;
|
11
|
var name;
|
12
|
var date;
|
13
|
|
14
|
var timer;
|
15
|
var isAnimationRunning = false;
|
16
|
var data = [];
|
17
|
|
18
|
|
19
|
|
20
|
function initMap() {
|
21
|
mymap = L.map('heatmap').setView([startX, startY], startZoom);
|
22
|
|
23
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
24
|
attribution: '',
|
25
|
maxZoom: 19
|
26
|
}).addTo(mymap);
|
27
|
|
28
|
mymap.on('click', showInfo);
|
29
|
|
30
|
}
|
31
|
|
32
|
var info = [];
|
33
|
var currenInfo = 0;
|
34
|
var infoLength = 0;
|
35
|
|
36
|
function showInfo(e) {
|
37
|
|
38
|
info = []
|
39
|
currenInfo = 0;
|
40
|
|
41
|
// https://wiki.openstreetmap.org/wiki/Zoom_levels
|
42
|
// Todo change to variable - it is used in heatmap init
|
43
|
var stile = 40075016.686 * Math.cos(startX) / Math.pow(2, mymap.getZoom()) ;
|
44
|
var radius = 25 * stile / 256;
|
45
|
|
46
|
var i = 0;
|
47
|
var lat = 0;
|
48
|
var lng = 0;
|
49
|
|
50
|
var total = 0;
|
51
|
data[currentTime]['items'].forEach(element => {
|
52
|
if (e.latlng.distanceTo(new L.LatLng(element.x, element.y)) < radius) {
|
53
|
lat += element.x
|
54
|
lng += element.y;
|
55
|
info[i] = {'place' : element.place, 'number' : element.number};
|
56
|
total += parseInt(element.number);
|
57
|
i++;
|
58
|
}
|
59
|
});
|
60
|
|
61
|
|
62
|
if (info.length > 0) {
|
63
|
var popup = L.popup({
|
64
|
autoPan: false
|
65
|
})
|
66
|
.setLatLng([lat / i, lng / i])
|
67
|
.setContent('<strong>Zařízení a počet:</strong><div id=\'place-info\'>' + info[currenInfo].place + '</div>' +
|
68
|
'<div id=\'number-info\'><span id=\'digit-info\'>' + info[currenInfo].number + '</span>' + '<span id=\'total-info\' style="font-size: large">/' + total +'</span></div>' +
|
69
|
'<div class=\'popup-controls\'>' +
|
70
|
'<button id=\'previous-info-btn\' class=\'circle-button\' onclick=\'previousInfo()\'></button>' +
|
71
|
'<div id=\'count-info\'>' + (currenInfo + 1) + ' z ' + info.length + '</div>' +
|
72
|
'<button id=\'next-info-btn\' onclick=\'nextInfo()\' class=\'circle-button next\'></button>' +
|
73
|
'</div>'
|
74
|
)
|
75
|
.openOn(mymap);
|
76
|
|
77
|
if (info.length == 1) {
|
78
|
$('#previous-info-btn').prop('disabled', true);
|
79
|
$('#next-info-btn').prop('disabled', true);
|
80
|
$('.popup-controls').hide();
|
81
|
}
|
82
|
}
|
83
|
|
84
|
}
|
85
|
|
86
|
function previousInfo() {
|
87
|
currenInfo = (currenInfo + info.length - 1) % info.length;
|
88
|
displayInfoText();
|
89
|
}
|
90
|
|
91
|
function nextInfo() {
|
92
|
currenInfo = (currenInfo + 1) % info.length
|
93
|
displayInfoText();
|
94
|
}
|
95
|
|
96
|
function displayInfoText() {
|
97
|
$('#place-info').html(info[currenInfo].place)
|
98
|
$('#digit-info').html(info[currenInfo].number)
|
99
|
$('#count-info').html(currenInfo + 1 + ' z ' + info.length);
|
100
|
}
|
101
|
|
102
|
function setMapView(latitude = startX, longitude = startY, zoom = startZoom) {
|
103
|
mymap.setView([latitude, longitude], zoom);
|
104
|
}
|
105
|
|
106
|
function changeAnimationState() {
|
107
|
|
108
|
isAnimationRunning = !isAnimationRunning
|
109
|
if (isAnimationRunning) {
|
110
|
$('#play-pause').attr('class', 'pause');
|
111
|
timer = setInterval(
|
112
|
function() {
|
113
|
next();
|
114
|
},
|
115
|
800
|
116
|
);
|
117
|
}
|
118
|
else {
|
119
|
clearTimeout(timer);
|
120
|
$('#play-pause').attr('class', 'play');
|
121
|
}
|
122
|
|
123
|
|
124
|
}
|
125
|
|
126
|
function previous() {
|
127
|
currentTime = (currentTime + 23) % 24;
|
128
|
drawHeatmap(data[currentTime]);
|
129
|
setTimeline();
|
130
|
mymap.closePopup();
|
131
|
updateHeaderControls();
|
132
|
changeUrl();
|
133
|
}
|
134
|
|
135
|
function next() {
|
136
|
currentTime = (currentTime + 1) % 24;
|
137
|
drawHeatmap(data[currentTime]);
|
138
|
setTimeline();
|
139
|
mymap.closePopup();
|
140
|
updateHeaderControls();
|
141
|
changeUrl();
|
142
|
}
|
143
|
|
144
|
function changeUrl() {
|
145
|
window.history.pushState(
|
146
|
"",
|
147
|
document.title,
|
148
|
window.location.origin + window.location.pathname + `?data_set[date]=${$('#date').val()}&data_set[time]=${currentTime}&data_set[type]=${$('#type').children("option:selected").val()}`
|
149
|
);
|
150
|
}
|
151
|
|
152
|
function updateHeaderControls() {
|
153
|
document.getElementById('time').value = currentTime;
|
154
|
}
|
155
|
|
156
|
function setTimeline() {
|
157
|
$('#timeline').text(currentTime + ":00");
|
158
|
$('#timeline').attr('class', 'time hour-' + currentTime);
|
159
|
}
|
160
|
|
161
|
function loadCurrentTimeHeatmap(opendataRoute, positionsRoute) {
|
162
|
|
163
|
dataSourceRoute = opendataRoute;
|
164
|
data = [];
|
165
|
|
166
|
name = $('#type').children("option:selected").val();
|
167
|
date = $('#date').val()
|
168
|
currentTime = parseInt($('#time').children("option:selected").val());
|
169
|
setTimeline();
|
170
|
|
171
|
$.ajax({
|
172
|
type: "POST",
|
173
|
url: dataSourceRoute + '/' + name + '/' + date + '/' + currentTime,
|
174
|
success: function(result) {
|
175
|
data[currentTime] = result;
|
176
|
drawHeatmap(data[currentTime]);
|
177
|
}
|
178
|
});
|
179
|
|
180
|
$.ajax({
|
181
|
type: 'POST',
|
182
|
url: positionsRoute + '/' + name,
|
183
|
success: function(result) {
|
184
|
drawDataSourceMarks(result)
|
185
|
}
|
186
|
});
|
187
|
|
188
|
preload(currentTime, 1);
|
189
|
preload(currentTime, -1);
|
190
|
|
191
|
}
|
192
|
|
193
|
function drawDataSourceMarks(data) {
|
194
|
|
195
|
if (marksLayer != null) {
|
196
|
L.removeLayer(marksLayer);
|
197
|
}
|
198
|
|
199
|
marksLayer = L.layerGroup();
|
200
|
for (var key in data) {
|
201
|
marksLayer.addLayer(L.circle([data[key]['x'], data[key]['y']], {radius: 1, color: 'black'}));
|
202
|
}
|
203
|
|
204
|
marksLayer.addTo(mymap);
|
205
|
|
206
|
}
|
207
|
|
208
|
function preload(time, change) {
|
209
|
|
210
|
var ntime = time + change;
|
211
|
if (0 <= ntime && ntime <= 23) {
|
212
|
$.ajax({
|
213
|
type: "POST",
|
214
|
url: dataSourceRoute + '/' + name + '/' + date + '/' + ntime,
|
215
|
success: function(result) {
|
216
|
data[ntime] = result;
|
217
|
preload(ntime, change);
|
218
|
}
|
219
|
});
|
220
|
}
|
221
|
|
222
|
}
|
223
|
|
224
|
|
225
|
function drawHeatmap(data) {
|
226
|
|
227
|
// Todo still switched
|
228
|
if (data['items'] != null) {
|
229
|
points = data['items'].map(function (p) { return [p['x'], p['y'], p['number']]; });
|
230
|
if (heatmapLayer != null) {
|
231
|
mymap.removeLayer(heatmapLayer);
|
232
|
}
|
233
|
heatmapLayer = L.heatLayer(points, {'max' : data['max'], 'minOpacity' : 0.5, 'radius' : 35, 'blur' : 30}).addTo(mymap);
|
234
|
}
|
235
|
else {
|
236
|
if (heatmapLayer != null) {
|
237
|
mymap.removeLayer(heatmapLayer);
|
238
|
}
|
239
|
}
|
240
|
|
241
|
// var heat_01 = ...
|
242
|
// on background map.addLayer(heat_01) -> map.removeLayer(heat_01);
|
243
|
// $(.leaflet-heatmap-layer).css('opacity', 'value');
|
244
|
}
|
245
|
|
246
|
function checkDataSetsAvailability(route) {
|
247
|
|
248
|
$.ajax({
|
249
|
type: "POST",
|
250
|
// Todo it might be good idea to change db collections format
|
251
|
url: route + '/' + $('#date').val(),
|
252
|
success: function(result) {
|
253
|
updateAvailableDataSets(result);
|
254
|
}
|
255
|
});
|
256
|
}
|
257
|
|
258
|
var allOptionsDisabled = false;
|
259
|
|
260
|
function updateAvailableDataSets(available) {
|
261
|
|
262
|
var isOptionEnabled = true;
|
263
|
$("#type > option").each(function() {
|
264
|
if((this.value in available) == false) {
|
265
|
$(this).prop('disabled', true);
|
266
|
$(this).prop('selected', false);
|
267
|
}
|
268
|
else {
|
269
|
$(this).prop('disabled', false)
|
270
|
if (allOptionsDisabled) {
|
271
|
$(this).prop('selected', true);
|
272
|
allOptionsDisabled = false;
|
273
|
}
|
274
|
isOptionEnabled = false;
|
275
|
}
|
276
|
});
|
277
|
allOptionsDisabled = isOptionEnabled;
|
278
|
|
279
|
$('#submit-btn').prop('disabled', isOptionEnabled);
|
280
|
|
281
|
}
|
282
|
|
283
|
|
284
|
function formatDate(date) {
|
285
|
var day = String(date.getDate());
|
286
|
var month = String(date.getMonth() + 1);
|
287
|
|
288
|
if (day.length === 1) {
|
289
|
day = '0' + day;
|
290
|
}
|
291
|
|
292
|
if (month.length === 1) {
|
293
|
month = '0' + month;
|
294
|
}
|
295
|
|
296
|
return date.getFullYear() + '-' + month + '-' + day;
|
297
|
}
|
298
|
|
299
|
function initDatepicker(availableDatesSource) {
|
300
|
var availableDates = '';
|
301
|
|
302
|
$.ajax({
|
303
|
type: 'GET',
|
304
|
url: availableDatesSource,
|
305
|
success: function(result) {
|
306
|
availableDates = String(result).split(',');
|
307
|
}
|
308
|
});
|
309
|
|
310
|
$('#date').datepicker({
|
311
|
format: 'yyyy-mm-dd',
|
312
|
language: 'cs',
|
313
|
beforeShowDay: function(date) {
|
314
|
if (availableDates.indexOf(formatDate(date)) < 0) {
|
315
|
return {enabled: false, tooltip: 'Žádná data'}
|
316
|
}
|
317
|
else {
|
318
|
return {enabled: true}
|
319
|
}
|
320
|
},
|
321
|
autoclose: true
|
322
|
});
|
323
|
}
|