1 |
64bc2934
|
vastja
|
var mymap;
|
2 |
03c02899
|
vastja
|
var heatmapLayer = null;
|
3 |
|
|
|
4 |
c236b33a
|
msebela
|
var startX = 49.7248;
|
5 |
|
|
var startY = 13.3521;
|
6 |
|
|
var startZoom = 17;
|
7 |
3fc08f2d
|
vastja
|
|
8 |
a48642fb
|
vastja
|
var dataSourceRoute;
|
9 |
|
|
var currentTime;
|
10 |
|
|
var name;
|
11 |
|
|
var date;
|
12 |
|
|
|
13 |
|
|
var timer;
|
14 |
|
|
var isAnimationRunning = false;
|
15 |
|
|
var data = [];
|
16 |
|
|
|
17 |
351696d5
|
Martin Sebela
|
|
18 |
|
|
|
19 |
c236b33a
|
msebela
|
function initMap() {
|
20 |
64bc2934
|
vastja
|
mymap = L.map('heatmap').setView([startX, startY], startZoom);
|
21 |
3fc08f2d
|
vastja
|
|
22 |
c236b33a
|
msebela
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
23 |
|
|
attribution: '',
|
24 |
|
|
maxZoom: 19
|
25 |
64bc2934
|
vastja
|
}).addTo(mymap);
|
26 |
c236b33a
|
msebela
|
}
|
27 |
3fc08f2d
|
vastja
|
|
28 |
351696d5
|
Martin Sebela
|
|
29 |
c236b33a
|
msebela
|
function setMapView(latitude = startX, longitude = startY, zoom = startZoom) {
|
30 |
64bc2934
|
vastja
|
mymap.setView([latitude, longitude], zoom);
|
31 |
3fc08f2d
|
vastja
|
}
|
32 |
|
|
|
33 |
a48642fb
|
vastja
|
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 |
351696d5
|
Martin Sebela
|
}
|
45 |
a48642fb
|
vastja
|
else {
|
46 |
|
|
clearTimeout(timer);
|
47 |
|
|
$('#play-pause').attr('class', 'play');
|
48 |
351696d5
|
Martin Sebela
|
}
|
49 |
|
|
|
50 |
a48642fb
|
vastja
|
|
51 |
351696d5
|
Martin Sebela
|
}
|
52 |
|
|
|
53 |
a48642fb
|
vastja
|
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 |
351696d5
|
Martin Sebela
|
|
65 |
a48642fb
|
vastja
|
function setTimeline() {
|
66 |
|
|
$('#timeline').text(currentTime + ":00");
|
67 |
|
|
$('#timeline').attr('class', 'time hour-' + currentTime);
|
68 |
351696d5
|
Martin Sebela
|
}
|
69 |
|
|
|
70 |
a48642fb
|
vastja
|
function loadCurrentTimeHeatmap(route) {
|
71 |
64bc2934
|
vastja
|
|
72 |
a48642fb
|
vastja
|
dataSourceRoute = route;
|
73 |
|
|
data = []
|
74 |
|
|
|
75 |
|
|
name = $('#type').children("option:selected").text();
|
76 |
64bc2934
|
vastja
|
var parts = $('#date').val().split('-');
|
77 |
a48642fb
|
vastja
|
date = parts[2] + parts[1] + parts[0];
|
78 |
|
|
currentTime = parseInt($('#time').children("option:selected").val());
|
79 |
|
|
setTimeline();
|
80 |
351696d5
|
Martin Sebela
|
|
81 |
c236b33a
|
msebela
|
$.ajax({
|
82 |
|
|
type: "POST",
|
83 |
a48642fb
|
vastja
|
url: dataSourceRoute + '/' + name + '/' + date + '/' + currentTime,
|
84 |
c236b33a
|
msebela
|
success: function(result) {
|
85 |
a48642fb
|
vastja
|
data[currentTime] = result;
|
86 |
|
|
drawHeatmap(data[currentTime]);
|
87 |
c236b33a
|
msebela
|
}
|
88 |
|
|
});
|
89 |
a48642fb
|
vastja
|
|
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 |
3fc08f2d
|
vastja
|
}
|
110 |
|
|
|
111 |
351696d5
|
Martin Sebela
|
|
112 |
3fc08f2d
|
vastja
|
function drawHeatmap(points) {
|
113 |
03c02899
|
vastja
|
|
114 |
|
|
// Todo still switched
|
115 |
a48642fb
|
vastja
|
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 |
03c02899
|
vastja
|
}
|
122 |
a48642fb
|
vastja
|
else {
|
123 |
|
|
if (heatmapLayer != null) {
|
124 |
|
|
mymap.removeLayer(heatmapLayer);
|
125 |
|
|
}
|
126 |
|
|
}
|
127 |
|
|
|
128 |
03c02899
|
vastja
|
// var heat_01 = ...
|
129 |
|
|
// on background map.addLayer(heat_01) -> map.removeLayer(heat_01);
|
130 |
64bc2934
|
vastja
|
// $(.leaflet-heatmap-layer).css('opacity', 'value');
|
131 |
03c02899
|
vastja
|
}
|
132 |
3fc08f2d
|
vastja
|
|
133 |
03c02899
|
vastja
|
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 |
0919408a
|
vastja
|
var options = '';
|
150 |
|
|
|
151 |
|
|
Object.entries(available).forEach(([key, value]) => {
|
152 |
|
|
options += '<option value="' + value + '">' + key + '</option>\n';
|
153 |
|
|
});
|
154 |
03c02899
|
vastja
|
|
155 |
64bc2934
|
vastja
|
$('#type').empty().append(options);
|
156 |
03c02899
|
vastja
|
|
157 |
|
|
}
|