aswi2020sebela-gitlab/website/public/js/zcu-heatmap.js @ d6d75a03

var mymap;
var heatmapLayer = null;

var startX = 49.7248;
var startY = 13.3521;
var startZoom = 17;

var dataSourceRoute;
var currentTime;
var name;
var date;

var timer;
var isAnimationRunning = false;
var data = [];



function initMap() {
  mymap = L.map('heatmap').setView([startX, startY], startZoom);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    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({
      autoPan: false
                  })
                  .setLatLng([lat / i, lng / i])
                  .setContent('<strong>Zařízení a počet:</strong><div id=\'place-info\'>' + info[currenInfo].place + '</div>' +
                              '<div id=\'number-info\'>' + info[currenInfo].number + '</div>' +
                              '<div class=\'popup-controls\'>' +
                                '<button id=\'previous-info-btn\' class=\'circle-button\' onclick=\'previousInfo()\'></button>' +
                                '<div id=\'count-info\'>' + (currenInfo + 1) + '/' + info.length + '</div>' +
                                '<button id=\'next-info-btn\' onclick=\'nextInfo()\' class=\'circle-button next\'></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(info[currenInfo].place)
  $('#number-info').html(info[currenInfo].number)
  $('#count-info').html(currenInfo + 1 + '/' + info.length);
}

function setMapView(latitude = startX, longitude = startY, zoom = startZoom) {
  mymap.setView([latitude, longitude], zoom);
}

function changeAnimationState() {

  isAnimationRunning = !isAnimationRunning
  if (isAnimationRunning) {
    $('#play-pause').attr('class', 'pause');
    timer = setInterval(
      function() {
        mymap.closePopup();
        next();
      },
      800
    );
  }
  else {
    clearTimeout(timer);
    $('#play-pause').attr('class', 'play');
  }


}

function previous() {
  currentTime = (currentTime + 23) % 24;
  drawHeatmap(data[currentTime]);
  setTimeline();
  mymap.closePopup();
  updateHeaderControls();
}

function next() {
  currentTime = (currentTime + 1) % 24;
  drawHeatmap(data[currentTime]);
  setTimeline();
  mymap.closePopup();
  updateHeaderControls();
}

function updateHeaderControls() {
  document.getElementById('time').value = currentTime;
}

function setTimeline() {
  $('#timeline').text(currentTime + ":00");
  $('#timeline').attr('class', 'time hour-' + currentTime);
}

function loadCurrentTimeHeatmap(route) {

  dataSourceRoute = route;
  data = []

  name = $('#type').children("option:selected").text();
  var parts = $('#date').val().split('-');
  date = parts[2] + parts[1] + parts[0];
  currentTime = parseInt($('#time').children("option:selected").val());
  setTimeline();

  $.ajax({
    type: "POST",
    url: dataSourceRoute + '/' +  name + '/' + date + '/' + currentTime,
    success: function(result) {
      data[currentTime] = result;
      drawHeatmap(data[currentTime]);
    }
  });

  preload(currentTime, 1);
  preload(currentTime, -1);

}

function preload(time, change) {

  var ntime = time + change; 
  if (0 <=  ntime && ntime <= 23) {
      $.ajax({
        type: "POST",
        url: dataSourceRoute + '/' +  name + '/' + date + '/' + ntime,
        success: function(result) {
          data[ntime] = result;
          preload(ntime, change);
        }
      });
  }

}


function drawHeatmap(data) {

  // Todo still switched
  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, {'max' : data['max'], 'minOpacity' : 0.5, 'radius' : 35, 'blur' : 30}).addTo(mymap);
  }
  else {
    if (heatmapLayer != null) {
      mymap.removeLayer(heatmapLayer);
    }
  }

  // var heat_01 = ...
  // on background map.addLayer(heat_01) -> map.removeLayer(heat_01);
  // $(.leaflet-heatmap-layer).css('opacity', 'value');
}

function checkDataSetsAvailability(route) {

  var parts = $('#date').val().split('-');
  
  $.ajax({
    type: "POST",
    // Todo it might be good idea to change db collections format
    url: route + '/' + parts[2] + parts[1] + parts[0],
    success: function(result) {
      updateAvailableDataSets(result);
    }
  });
}

function updateAvailableDataSets(available) {
  
  var options = '';

  Object.entries(available).forEach(([key, value]) => {
    options += '<option value="' + value + '">' + key + '</option>\n'; 
  });

  if (options === '') {
    $('#submit-btn').prop('disabled', true);
  }
  else {
    $('#submit-btn').prop('disabled', false);
  }

  $('#type').empty().append(options);
  
}