MISP
/
misp-dashboard
mirror of https://github.com/MISP/misp-dashboard
2
0
Fork 0
Code Issues Releases Wiki Activity

Usage of openStreetMap js library

pull/18/head
Sami Mokaddem 2017-10-20 14:31:10 +02:00
parent b4d8699e6a
commit 801a9111ce
2 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
static/js/index.js
View File

@ -5,6 +5,13 @@ 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 img_to_change = 0;
var img_array = [];
var first_map = true;
@ -146,7 +153,6 @@ var optionsPieChart = {
function ping() {
pnts = mapObj.latLngToPoint(map_lat, map_lon);
console.log(pnts);
if (pnts != false) { //sometimes latLngToPoint return false
$("#feedDiv2").append(
$('<div class="marker_animation"></div>')
@ -161,19 +167,16 @@ function ping() {
var map_lat, map_lon;
function rotate_map() {
var to_switch = img_array[img_to_change];
var pic = to_switch[0];
var txt = to_switch[1];
var coord = to_switch[2];
var to_switch = coord_array[coord_to_change];
var coord = to_switch[0];
map_lat = coord.lat;
map_lon = coord.lon;
console.log(to_switch);
var marker = to_switch[1];
var headerTxt = to_switch[2];
mymap.setView([coord.lat, coord.lon], 17);
$("#img1").fadeOut(400, function(){ $(this).attr('src', pic); }).fadeIn(400);
$("#textMap1").fadeOut(400, function(){ $(this).text(txt); }).fadeIn(400);
img_to_change = img_to_change == img_array.length-1 ? 0 : img_to_change+1;
console.log(img_array);
console.log(img_to_change);
$("#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);
}
@ -207,10 +210,12 @@ $(document).ready(function () {
popupCoord(json.coord);
var img2 = linkForDefaultMap.replace(/\/[^\/]+$/, "/"+json.path);
if (img_array.len >= max_img_rotation) {
img_array.slice(1)
if (coord_array.len >= max_img_rotation) {
coord_array[0][1].remove() // remove marker
coord_array.slice(1)
}
img_array.push([img2, json.path, json.coord]);
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();

16
templates/index.html
View File

@ -15,7 +15,12 @@
<!-- Custom CSS -->
<link href="{{ url_for('static', filename='css/sb-admin-2.css') }}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="text/css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
</head>
@ -78,12 +83,11 @@ small {
<!--<div id="panelbody" class="panel-body" style="height: 37vh; width:100%;">
<div id="feedDiv1A" style="width:50%; height: calc(100% - 30px); position: relative; float: left;"></div>
<div id="feedDiv1B" style="width:50%; height: calc(100% - 30px); position: relative; float: left;"></div>-->
<div id="textMap1" class="panel-heading"> No map
<div id="textMap1" class="panel-heading bg-info"> No map
<i class="fa fa-bar-chart-o fa-fw"></i>
</div>
<div id="panelbody" class="panel-body" style="height: 100%; padding: 5px">
<div id="feedDivMap1" style="width:100%; height: 100%">
<img id="img1" src="{{ url_for('static', filename='maps/default.png') }}" class="center" style="max-height: 93%;">
<div id="panelbody" class="panel-body" style="height: 93%; padding: 5px">
<div id="feedDivMap1" style="width:100%; height: 100%;">
</div>
</div>
<!-- /.panel-body -->
@ -185,7 +189,7 @@ small {
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/jquery-jvectormap-2.0.3.css') }}" type="text/css" media="screen"/>
<script src="{{ url_for('static', filename='js/jquery-jvectormap-2.0.3.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery-jvectormap-world-mill.js') }}"></script>