mirror of https://github.com/MISP/misp-dashboard
288 lines
9.2 KiB
JavaScript
288 lines
9.2 KiB
JavaScript
const OSMURL='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
|
const OSMATTRIB='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
|
|
var ZOOMLEVEL = default_zoom_level;
|
|
var updateFrequency = 1000*60*default_updateFrequency //min
|
|
|
|
var regionhitsMax = 10;
|
|
var regionhits = {};
|
|
var allOpenStreetMap = {};
|
|
var savedMarker = {};
|
|
var savedMarkerRadius = [];
|
|
var datePickerWidget;
|
|
var datePickersRadiusWidget;
|
|
var radiusOpenStreetMap;
|
|
var circleRadius;
|
|
|
|
/* CONFIG */
|
|
var vectorMapConfig = {
|
|
map: 'world_mill',
|
|
markers: [],
|
|
series: {
|
|
regions: [{
|
|
values: [],
|
|
min: 0,
|
|
max: 10,
|
|
scale: ['#003FBF','#0063BF','#0087BF','#00ACBF','#00BFAD','#00BF89','#00BF64','#00BF40','#00BF1C','#08BF00','#2CBF00','#51BF00','#75BF00','#99BF00','#BEBF00','#BF9B00','#BF7700','#BF5200','#BF2E00','#BF0900'],
|
|
normalizeFunction: 'linear',
|
|
legend: {
|
|
horizontal: true
|
|
}
|
|
}]
|
|
},
|
|
onRegionTipShow: function(e, el, code){
|
|
el.html(el.html()+' ('+regionhits[code]+')');
|
|
}
|
|
}
|
|
var datePickerOptions = {
|
|
showOn: "button",
|
|
minDate: -31,
|
|
maxDate: 0,
|
|
buttonImage: urlIconCalendar,
|
|
buttonImageOnly: true,
|
|
buttonText: "Select date",
|
|
showAnim: "slideDown",
|
|
onSelect: updateAll
|
|
};
|
|
var datePickerRadiusOptions = {
|
|
showOn: "button",
|
|
minDate: -31,
|
|
maxDate: 0,
|
|
buttonImage: urlIconCalendar,
|
|
buttonImageOnly: true,
|
|
buttonText: "Select date",
|
|
showAnim: "slideDown",
|
|
};
|
|
var circleRadiusOptions = {
|
|
color: 'red',
|
|
weight: 1,
|
|
fillColor: '#f03',
|
|
fillOpacity: 0.4,
|
|
}
|
|
|
|
|
|
|
|
/* START SCRIPTS */
|
|
$(document).ready(function () {
|
|
// Page header
|
|
$( "#zoom_selector" ).attr("selected", "selected");
|
|
$( "#zoom_selector" ).change(function() {
|
|
var sel = parseInt($( this ).val());
|
|
ZOOMLEVEL = sel;
|
|
updateAll();
|
|
});
|
|
datePickerWidget = $( "#datepicker" )
|
|
datePickerWidget.datepicker(datePickerOptions);
|
|
datePickerWidget.datepicker("setDate", new Date());
|
|
|
|
/* Top location */
|
|
for(var i=1; i<7; i++) {
|
|
allOpenStreetMap[i] = L.map('topMap'+i).setView([0, 0], 0);
|
|
new L.TileLayer(OSMURL, {minZoom: 0, maxZoom: 18}).addTo(allOpenStreetMap[i]);
|
|
}
|
|
|
|
// World map
|
|
$('#worldMap').vectorMap(vectorMapConfig);
|
|
worldMapObj = $("#worldMap").vectorMap('get','mapObject');
|
|
|
|
// Radius
|
|
radiusOpenStreetMap = L.map('radiusMap').setView([30, 0], 2);
|
|
new L.TileLayer(OSMURL, {minZoom: 0, maxZoom: 18}).addTo(radiusOpenStreetMap);
|
|
datePickersRadiusWidgetFrom = $( "#datepickerRadiusFrom" )
|
|
datePickersRadiusWidgetFrom.datepicker(datePickerRadiusOptions);
|
|
datePickersRadiusWidgetFrom.datepicker("setDate", new Date());
|
|
datePickersRadiusWidgetTo = $( "#datepickerRadiusTo" )
|
|
datePickersRadiusWidgetTo.datepicker(datePickerRadiusOptions);
|
|
datePickersRadiusWidgetTo.datepicker("setDate", new Date());
|
|
|
|
circleRadiusOptions['radius'] = getScale(radiusOpenStreetMap.getZoom());
|
|
circleRadius = L.circle(radiusOpenStreetMap.getCenter(), circleRadiusOptions).addTo(radiusOpenStreetMap);
|
|
radiusOpenStreetMap.on('move', updateRadius);
|
|
|
|
// Start
|
|
updateAll();
|
|
setInterval(function(){
|
|
updateAll();
|
|
$("#alertUpdate").fadeIn(2200).fadeOut(2200);
|
|
}, updateFrequency);
|
|
|
|
});
|
|
|
|
|
|
/* TOP LOCATION */
|
|
|
|
function updateTopMaps(date) {
|
|
$.getJSON(urlTopCoord+"?date="+date.getTime()/1000, function(list){
|
|
if (list.length==0 && savedMarker[1]!=undefined) { //No data and new markers
|
|
console.log(savedMarker.length);
|
|
for(var i=0; i<6; i++) { // clear maps
|
|
allOpenStreetMap[i+1].setView([0, 0], 1);
|
|
savedMarker[i+1].remove(); // remove marker
|
|
}
|
|
savedMarker = {};
|
|
}
|
|
for(var i=0; i<6 && i<list.length; i++) {
|
|
// create marker + flyToIt
|
|
dataJson = JSON.parse(list[i][0]);
|
|
categ = dataJson.categ === undefined ? "" : dataJson.categ;
|
|
value = dataJson.value === undefined ? "" : dataJson.value;
|
|
allOpenStreetMap[i+1].flyTo([dataJson.lat, dataJson.lon], ZOOMLEVEL);
|
|
|
|
// update marker
|
|
var markerToUpdate = savedMarker[i+1];
|
|
if (markerToUpdate != undefined) {
|
|
markerToUpdate.setLatLng({lat: dataJson.lat, lng: dataJson.lon});
|
|
markerToUpdate._popup.setContent(categ+' - '+value+' (<strong>'+list[i][1]+'</strong>)');
|
|
markerToUpdate.update();
|
|
} else { // create new marker
|
|
var marker = L.marker([dataJson.lat, dataJson.lon]).addTo(allOpenStreetMap[i+1]);
|
|
savedMarker[i+1] = marker;
|
|
marker.bindPopup(categ+' - '+value+' (<strong>'+list[i][1]+'</strong>)').openPopup();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
/* WORLD MAP */
|
|
|
|
function updateWorldMap(date) {
|
|
$.getJSON(urlHitMap+"?date="+date.getTime()/1000, function(list){
|
|
regionhits = {};
|
|
worldMapObj.series.regions[0].clear();
|
|
for(var i=0; i<list.length; i++) {
|
|
var rCode = list[i][0];
|
|
var rNum = list[i][1];
|
|
update_region(rCode, rNum);
|
|
}
|
|
});
|
|
}
|
|
|
|
function update_region(regionCode, num) {
|
|
regionhits[regionCode] = num;
|
|
// Force recomputation of min and max for correct color scaling
|
|
worldMapObj.series.regions[0].params.max = undefined;
|
|
worldMapObj.series.regions[0].legend.render();
|
|
// Update data
|
|
worldMapObj.series.regions[0].setValues(regionhits);
|
|
}
|
|
|
|
|
|
/* RADIUS MAP */
|
|
|
|
function updateRadius(e) {
|
|
var curObj = e.target;
|
|
var curCoord = curObj.getCenter();
|
|
var zoom = curObj.zoom;
|
|
var scale = getScale(radiusOpenStreetMap.getZoom());
|
|
circleRadius.setRadius(scale);
|
|
circleRadius.setLatLng(curCoord);
|
|
}
|
|
|
|
function getScale(zoom) {
|
|
return 64 * Math.pow(2, (18-zoom));
|
|
}
|
|
|
|
function queryAndAddMarkers() {
|
|
var radius_km = circleRadius.getRadius() / 1000;
|
|
var coord = circleRadius._latlng;
|
|
var dateStart = datePickersRadiusWidgetFrom.datepicker("getDate").getTime() / 1000;
|
|
var dateEnd = datePickersRadiusWidgetTo.datepicker("getDate").getTime() / 1000;
|
|
var geo_param = {
|
|
dateStart: dateStart,
|
|
dateEnd: dateEnd,
|
|
centerLat: coord.lat,
|
|
centerLon: coord.lng,
|
|
radius: radius_km
|
|
};
|
|
|
|
$.ajax({
|
|
data: geo_param,
|
|
cache: false,
|
|
beforeSend: function(XMLHttpRequest) {
|
|
//$('.loading').show();
|
|
set_loading_status($('#geo_info_qry_btn'), true, 'Querying and fetching', 1);
|
|
},
|
|
success: function(data, textStatus) {
|
|
var allList = data;
|
|
set_loading_status($('#geo_info_qry_btn'), true, 'Drawing '+allList.length + ' results', 2);
|
|
// remove old markers
|
|
for (var i in savedMarkerRadius) {
|
|
savedMarkerRadius[i].remove(); // remove marker
|
|
}
|
|
|
|
for (var listIndex in allList) {
|
|
var curMarker = allList[listIndex];
|
|
var dataText = "";
|
|
var coordJson = curMarker[1];
|
|
for (var dataI in curMarker[0]) {
|
|
var jsonData = JSON.parse(curMarker[0][dataI])
|
|
dataText += '<strong>'+jsonData.categ+': </strong> '+jsonData.value + "<br>"
|
|
}
|
|
var marker = L.marker([coordJson[1], coordJson[0]]).addTo(radiusOpenStreetMap);
|
|
savedMarkerRadius.push(marker);
|
|
marker.bindPopup(dataText, {autoClose:false}).openPopup();
|
|
}
|
|
set_loading_status($('#geo_info_qry_btn'), false, allList.length + ' results');
|
|
},
|
|
error: function( jqXhr, textStatus, errorThrown ){
|
|
set_loading_status($('#geo_info_qry_btn'), false, 'Error: '+ errorThrown);
|
|
},
|
|
type: 'get',
|
|
url: urlCoordsByRadius
|
|
});
|
|
}
|
|
|
|
|
|
/* UTIL */
|
|
|
|
function set_loading_status(jhtml, is_loading, text, loading_state) {
|
|
text = text === undefined || text === null ? '' : text;
|
|
if (is_loading) {
|
|
if (jhtml.data('default-text') === undefined) {
|
|
jhtml.data('default-text', jhtml.text());
|
|
}
|
|
var loading_icon = ''
|
|
switch(loading_state) {
|
|
case 1:
|
|
loading_icon = 'fa-spinner';
|
|
break;
|
|
|
|
case 2:
|
|
loading_icon = 'fa-circle-o-notch';
|
|
break;
|
|
|
|
case 3:
|
|
loading_icon = 'fa-refresh';
|
|
break;
|
|
|
|
default:
|
|
loading_icon = 'fa-circle-o-notch';
|
|
break;
|
|
}
|
|
var loadingIcon = $('<i class="fa fa-spin '+loading_icon+'"></i>');
|
|
jhtml.text(' '+text);
|
|
jhtml.prepend(loadingIcon);
|
|
} else {
|
|
jhtml.empty();
|
|
jhtml.text(text);
|
|
setTimeout(function() {
|
|
let old_text = jhtml.data('default-text');
|
|
jhtml.text(old_text);
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
function days_between(date1, date2) {
|
|
var ONEDAY = 60*60*24*1000;
|
|
var diff_ms = Math.abs(date1.getTime() - date2.getTime());
|
|
return Math.round(diff_ms/ONEDAY);
|
|
}
|
|
|
|
function updateAll() {
|
|
var currentDate = datePickerWidget.datepicker( "getDate" );
|
|
var now = new Date();
|
|
var numDay = days_between(now, currentDate);
|
|
updateTopMaps(currentDate);
|
|
updateWorldMap(currentDate);
|
|
}
|