Revize 3ae59f75

+ popups
+ heatmap maximální intenzita

website/public/js/zcu-heatmap.js

@@ -23 +23 @@
     attribution: '',
     maxZoom: 19
   }).addTo(mymap);
+
+  mymap.on('click', showInfo);
+
 }
 
+var info = [];
+var currenInfo = 0;
+var infoLength = 0;
+
+function showInfo(e) {
+
+  info = []
+  currenInfo = 0;
+
+  // https://wiki.openstreetmap.org/wiki/Zoom_levels
+  // Todo change to variable - it is used in heatmap init
+  var stile =  40075016.686 * Math.cos(startX) / Math.pow(2, mymap.getZoom()) ;
+  var radius = 25 * stile / 256;
+
+  var i = 0;
+  var lat = 0;
+  var lng = 0;
+
+  data[currentTime]['items'].forEach(element => {
+    if (e.latlng.distanceTo(new L.LatLng(element.x, element.y)) < radius) {
+      lat += element.x
+      lng += element.y;
+      info[i] = {'place' : element.place, 'number' : element.number};
+      i++;
+    }
+  });
+
+  
+  if (info.length > 0) {
+    var popup = L.popup()
+                  .setLatLng([lat / i, lng / i])
+                  .setContent('<div id=\'place-info\'>Umístění: ' + info[currenInfo].place + '</div>' +
+                              '<div id=\'number-info\'>Počet: ' + info[currenInfo].number + '</div>' +
+                              '<div class=\'popup-controls\'>' +
+                                '<button id=\'previous-info-btn\' onclick=\'previousInfo()\'>&lt</button>' +
+                                '<div id=\'count-info\'>' + (currenInfo + 1) + '/' + info.length + '</div>' +
+                                '<button id=\'next-info-btn\' onclick=\'nextInfo()\'>&gt</button>' +
+                              '</div>'
+                              )
+                  .openOn(mymap);
+    
+    if (info.length == 1) {
+      $('#previous-info-btn').prop('disabled', true);
+      $('#next-info-btn').prop('disabled', true);
+      $('.popup-controls').hide();
+    }
+  }
+
+}
+
+function previousInfo() {
+  currenInfo = (currenInfo + info.length - 1) % info.length;
+  displayInfoText();
+}
+
+function nextInfo() {
+  currenInfo = (currenInfo + 1) % info.length
+  displayInfoText();
+}
+
+function displayInfoText() {
+  $('#place-info').html('Umístění: ' + info[currenInfo].place)
+  $('#number-info').html('Počet: ' + info[currenInfo].number)
+  $('#count-info').html(currenInfo + 1 + '/' + info.length);
+}
 
 function setMapView(latitude = startX, longitude = startY, zoom = startZoom) {
   mymap.setView([latitude, longitude], zoom);
@@ -37 +105 @@
     $('#play-pause').attr('class', 'pause');
     timer = setInterval(
       function() {
+        mymap.closePopup();
         next();
       },
       800
@@ -109 +178 @@
 }
 
 
-function drawHeatmap(points) {
+function drawHeatmap(data) {
 
   // Todo still switched
-  if (points != null) {
-    points = points.map(function (p) { return [p['x'], p['y'], p['number']]; });
+  if (data['items'] != null) {
+    points = data['items'].map(function (p) { return [p['x'], p['y'], p['number']]; });
     if (heatmapLayer != null) {
       mymap.removeLayer(heatmapLayer);
     }
-    heatmapLayer = L.heatLayer(points).addTo(mymap);
+    heatmapLayer = L.heatLayer(points, {'max' : data['max'], 'minOpacity' : 0.5}).addTo(mymap);
   }
   else {
     if (heatmapLayer != null) {