misp-dashboard/static/js/index/index_map.js

125 lines
4.2 KiB
JavaScript

var maxNumCoord = 100;
var max_img_rotation = 10;
var rotation_time = 1000*10; //10s
var mymap = L.map('feedDivMap1').setView([51.505, -0.09], 13);;
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 17, attribution: osmAttrib}).addTo(mymap);
var coord_to_change = 0;
var coord_array = [];
var first_map = true;
var map_lat, map_lon; //current lat and lon shown in openStreetMap pannel
/* MAP */
var mapObj;
var curNumMarker = 0;
var allMarker = [];
function marker_animation(x, y, curNumMarker) {
var markerColor = mapObj.markers[curNumMarker].element.config.style.current.fill;
$("#feedDiv2").append(
$('<div class="marker_animation"></div>')
.css({'left': x-15 + 'px'}) /* HACK to center the effect */
.css({'top': y-15 + 'px'})
.css({ 'background-color': markerColor })
.animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 700, 'linear', function(){$(this).remove(); })
);
}
// Add makers on the map
function popupCoord(coord) {
var coord = [coord['lat'], coord['lon']];
var value = Math.random()*180;
pnts = mapObj.latLngToPoint(coord[0], coord[1])
if (pnts != false) { //sometimes latLngToPoint return false
mapObj.addMarker(curNumMarker, coord, [value]);
allMarker.push(curNumMarker)
marker_animation(pnts.x, pnts.y, curNumMarker);
curNumMarker = curNumMarker>=maxNumCoord ? 0 : curNumMarker+1;
if (allMarker.length >= maxNumCoord) {
to_remove = allMarker[0];
mapObj.removeMarkers([to_remove]);
allMarker = allMarker.slice(1);
}
}
}
// Makes an animation on the marker concerned by the map shown in the openStreetMap pannel
function ping() {
pnts = mapObj.latLngToPoint(map_lat, map_lon);
if (pnts != false) { //sometimes latLngToPoint return false
$("#feedDiv2").append(
$('<div class="marker_animation"></div>')
.css({'left': pnts.x-15 + 'px'}) /* HACK to center the effect */
.css({'top': pnts.y-15 + 'px'})
.css({ 'background-color': 'orange' })
.animate({ opacity: 0, scale: 1, height: '80px', width:'80px', margin: '-25px' }, 400, 'linear', function(){$(this).remove(); })
);
}
setTimeout(function(){ ping(); }, rotation_time/4);
}
// Perform the roration of the map in the openStreetMap pannel
function rotate_map() {
var to_switch = coord_array[coord_to_change];
var coord = to_switch[0];
map_lat = coord.lat;
map_lon = coord.lon;
var marker = to_switch[1];
var headerTxt = to_switch[2];
mymap.setView([coord.lat, coord.lon], 17);
$("#textMap1").fadeOut(400, function(){ $(this).text(headerTxt); }).fadeIn(400);
coord_to_change = coord_to_change == coord_array.length-1 ? 0 : coord_to_change+1;
setTimeout(function(){ rotate_map(); }, rotation_time);
}
$(function(){
$('#feedDiv2').vectorMap({
map: 'world_mill',
markers: [],
series: {
markers: [{
attribute: 'fill',
scale: ['#1A0DAB', '#e50000', '#62ff41'],
values: [],
min: 0,
max: 180
}],
},
});
mapObj = $("#feedDiv2").vectorMap('get','mapObject');
});
// Subscribe to the flask eventStream
var source_map = new EventSource(urlForMaps);
source_map.onmessage = function(event) {
var json = jQuery.parseJSON( event.data );
popupCoord(json.coord);
var img2 = linkForDefaultMap.replace(/\/[^\/]+$/, "/"+json.path);
if (coord_array.len >= max_img_rotation) {
coord_array[0][1].remove() // remove marker
coord_array.slice(1)
}
var marker = L.marker([json.coord.lat, json.coord.lon]).addTo(mymap);
coord_array.push([json.coord, marker, ""+json.coord.lat+", "+json.coord.lon]);
if (first_map) { // remove no_map pic
rotate_map();
ping();
first_map = false;
}
};
source_map.onopen = function(){
console.log('connection is opened. '+source_map.readyState);
};
source_map.onerror = function(){
console.log('error: '+source_map.readyState);
};