misp-dashboard/static/js/geo.js

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);
}