1
|
var mymap;
|
2
|
var heatmapLayer = null;
|
3
|
|
4
|
var startX = 49.7248;
|
5
|
var startY = 13.3521;
|
6
|
var startZoom = 17;
|
7
|
|
8
|
var dataSourceRoute;
|
9
|
var currentTime;
|
10
|
var name;
|
11
|
var date;
|
12
|
|
13
|
var timer;
|
14
|
var isAnimationRunning = false;
|
15
|
var data = [];
|
16
|
|
17
|
|
18
|
|
19
|
function initMap() {
|
20
|
mymap = L.map('heatmap').setView([startX, startY], startZoom);
|
21
|
|
22
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
23
|
attribution: '',
|
24
|
maxZoom: 19
|
25
|
}).addTo(mymap);
|
26
|
}
|
27
|
|
28
|
|
29
|
function setMapView(latitude = startX, longitude = startY, zoom = startZoom) {
|
30
|
mymap.setView([latitude, longitude], zoom);
|
31
|
}
|
32
|
|
33
|
function changeAnimationState() {
|
34
|
|
35
|
isAnimationRunning = !isAnimationRunning
|
36
|
if (isAnimationRunning) {
|
37
|
$('#play-pause').attr('class', 'pause');
|
38
|
timer = setInterval(
|
39
|
function() {
|
40
|
next();
|
41
|
},
|
42
|
800
|
43
|
);
|
44
|
}
|
45
|
else {
|
46
|
clearTimeout(timer);
|
47
|
$('#play-pause').attr('class', 'play');
|
48
|
}
|
49
|
|
50
|
|
51
|
}
|
52
|
|
53
|
function previous() {
|
54
|
currentTime = (currentTime + 23) % 24;
|
55
|
drawHeatmap(data[currentTime]);
|
56
|
setTimeline();
|
57
|
}
|
58
|
|
59
|
function next() {
|
60
|
currentTime = (currentTime + 1) % 24;
|
61
|
drawHeatmap(data[currentTime]);
|
62
|
setTimeline();
|
63
|
}
|
64
|
|
65
|
function setTimeline() {
|
66
|
$('#timeline').text(currentTime + ":00");
|
67
|
$('#timeline').attr('class', 'time hour-' + currentTime);
|
68
|
}
|
69
|
|
70
|
function loadCurrentTimeHeatmap(route) {
|
71
|
|
72
|
dataSourceRoute = route;
|
73
|
data = []
|
74
|
|
75
|
name = $('#type').children("option:selected").text();
|
76
|
var parts = $('#date').val().split('-');
|
77
|
date = parts[2] + parts[1] + parts[0];
|
78
|
currentTime = parseInt($('#time').children("option:selected").val());
|
79
|
setTimeline();
|
80
|
|
81
|
$.ajax({
|
82
|
type: "POST",
|
83
|
url: dataSourceRoute + '/' + name + '/' + date + '/' + currentTime,
|
84
|
success: function(result) {
|
85
|
data[currentTime] = result;
|
86
|
drawHeatmap(data[currentTime]);
|
87
|
}
|
88
|
});
|
89
|
|
90
|
preload(currentTime, 1);
|
91
|
preload(currentTime, -1);
|
92
|
|
93
|
}
|
94
|
|
95
|
function preload(time, change) {
|
96
|
|
97
|
var ntime = time + change;
|
98
|
if (0 <= ntime && ntime <= 23) {
|
99
|
$.ajax({
|
100
|
type: "POST",
|
101
|
url: dataSourceRoute + '/' + name + '/' + date + '/' + ntime,
|
102
|
success: function(result) {
|
103
|
data[ntime] = result;
|
104
|
preload(ntime, change);
|
105
|
}
|
106
|
});
|
107
|
}
|
108
|
|
109
|
}
|
110
|
|
111
|
|
112
|
function drawHeatmap(points) {
|
113
|
|
114
|
// Todo still switched
|
115
|
if (points != null) {
|
116
|
points = points.map(function (p) { return [p['x'], p['y'], p['number']]; });
|
117
|
if (heatmapLayer != null) {
|
118
|
mymap.removeLayer(heatmapLayer);
|
119
|
}
|
120
|
heatmapLayer = L.heatLayer(points).addTo(mymap);
|
121
|
}
|
122
|
else {
|
123
|
if (heatmapLayer != null) {
|
124
|
mymap.removeLayer(heatmapLayer);
|
125
|
}
|
126
|
}
|
127
|
|
128
|
// var heat_01 = ...
|
129
|
// on background map.addLayer(heat_01) -> map.removeLayer(heat_01);
|
130
|
// $(.leaflet-heatmap-layer).css('opacity', 'value');
|
131
|
}
|
132
|
|
133
|
function checkDataSetsAvailability(route) {
|
134
|
|
135
|
var parts = $('#date').val().split('-');
|
136
|
|
137
|
$.ajax({
|
138
|
type: "POST",
|
139
|
// Todo it might be good idea to change db collections format
|
140
|
url: route + '/' + parts[2] + parts[1] + parts[0],
|
141
|
success: function(result) {
|
142
|
updateAvailableDataSets(result);
|
143
|
}
|
144
|
});
|
145
|
}
|
146
|
|
147
|
function updateAvailableDataSets(available) {
|
148
|
|
149
|
var options = '';
|
150
|
|
151
|
Object.entries(available).forEach(([key, value]) => {
|
152
|
options += '<option value="' + value + '">' + key + '</option>\n';
|
153
|
});
|
154
|
|
155
|
$('#type').empty().append(options);
|
156
|
|
157
|
}
|