logviewer/static/russ_map_panel.html.old

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>live russ map</title>
   5
   6     <script src="js/jquery-3.1.0.min.js"></script>
   7     <script src="js/chart.umd.js"></script>
   8     <script src="js/js.storage.min.js"></script>
   9     <script src="js/kismet.ui.theme.js"></script>
  10
  11     <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  12     <link rel="stylesheet" href="css/leaflet.css" />
  13     <link rel="stylesheet" type="text/css" href="css/jquery.jspanel.min.css" />
  14     <link rel="stylesheet" type="text/css" href="css/Control.Loading.css" />
  15
  16     <script src="js/leaflet.js"></script>
  17     <script src="js/Leaflet.MultiOptionsPolyline.min.js"></script>
  18     <script src="js/Control.Loading.js"></script>
  19     <script src="js/chroma.min.js"></script>
  20
  21     <script src="js/js.storage.min.js"></script>
  22     <script src="js/kismet.utils.js"></script>
  23     <script src="js/kismet.units.js"></script>
  24
  25     <script src="js/datatables.min.js"></script>
  26     <script src="js/dataTables.scrollResize.js"></script>
  27
  28     <style>
  29         :root {
  30             --adsb-sidebar-background: white;
  31             --adsb-sidebar-background-offset: #f9f9f9;
  32         }
  33
  34         [data-theme="dark"] {
  35             --adsb-sidebar-background: #222;
  36             --adsb-sidebar-background-offset: #444;
  37             --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
  38         }
  39
  40         .map-tiles {
  41             filter: var(--map-tiles-filter, none);
  42         }
  43
  44         body {
  45             padding: 0;
  46             margin: 0;
  47         }
  48
  49         html, body, #map {
  50             height: 100%;
  51             font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
  52         }
  53
  54         .marker-center {
  55             margin: 0;
  56             position: absolute;
  57             top: 50%;
  58             left: 50%;
  59             -ms-transform: translate(-50%, -50%);
  60             transform: translate(-50%, -50%);
  61         }
  62
  63         .right-sidebar {
  64             position: absolute;
  65             top: 10px;
  66             bottom: 10px;
  67             right: 10px;
  68             width: 20%;
  69             border: 1px solid black;
  70             background: var(--adsb-sidebar-background);
  71             z-index: 999;
  72             padding: 10px;
  73         }
  74
  75         .warning {
  76             position: absolute;
  77             top: 10%;
  78             bottom: 10%;
  79             right: 25%;
  80             left: 25%;
  81             border: 1px solid black;
  82             background: var(--adsb-sidebar-background);
  83             z-index: 10000;
  84             padding: 10px;
  85         }
  86
  87         #alt_scale {
  88             width: 50%;
  89             position: absolute;
  90             bottom: 10px;
  91             left: 25%;
  92             height: 15px;
  93             z-index: 999;
  94             border: 1px solid black;
  95             padding-left: 10px;
  96             padding-right: 10px;
  97             background: linear-gradient(to right,
  98                 hsl(50,100%,50%),
  99                 hsl(100,100%,50%),
 100                 hsl(150,100%,50%),
 101                 hsl(200,100%,50%),
 102                 hsl(250,100%,50%),
 103                 hsl(300,100%,50%),
 104                 hsl(360,100%,50%));
 105             text-align: center;
 106         }
 107
 108         #alt_min {
 109             position: absolute;
 110             left: 10px;
 111         }
 112
 113         #alt_mini {
 114             position: absolute;
 115             left: 25%;
 116         }
 117
 118         #alt_maxi {
 119             position: absolute;
 120             left: 75%;
 121         }
 122
 123         #alt_max {
 124             position: absolute;
 125             right: 10px;
 126         }
 127
 128         #alt_title {
 129             display: inline-block;
 130         }
 131
 132         .resize_wrapper {
 133             position: relative;
 134             box-sizing: border-box;
 135             height: calc(100% - 125px);
 136             padding: 0.5em 0.5em 1.5em 0.5em;
 137             border-radius: 0.5em;
 138             background: var(--adsb-sidebar-background-offset);
 139             overflow: hidden;
 140         }
 141
 142     </style>
 143 </head>
 144 <body>
 145     <div id="map"></div>
 146     <script src="/js/leaflet-heat.js"></script>
 147     <script src="/js/testdata.js"></script>
 148     <script>
 149         var map = L.map('map').setView([-37.87, 175.475], 12);
 150
 151         var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 152             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
 153         }).addTo(map);
 154
 155         addressPoints = addressPoints.map(function (p) { return [p[0], p[1]]; });
 156
 157         var heat = L.heatLayer(addressPoints).addTo(map);
 158
 159         var window_visible = true;
 160
 161         // Visibility detection from https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
 162         // Set the name of the hidden property and the change event for visibility
 163         var hidden, visibilityChange;
 164         if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
 165             hidden = "hidden";
 166             visibilityChange = "visibilitychange";
 167         } else if (typeof document.msHidden !== "undefined") {
 168             hidden = "msHidden";
 169             visibilityChange = "msvisibilitychange";
 170         } else if (typeof document.webkitHidden !== "undefined") {
 171             hidden = "webkitHidden";
 172             visibilityChange = "webkitvisibilitychange";
 173         }
 174
 175         function handleVisibilityChange() {
 176             if (document[hidden]) {
 177                 window_visible = false;
 178             } else {
 179                 window_visible = true;
 180             }
 181         }
 182
 183         function map_cb(d) {
 184             console.log("and here");
 185             data = kismet.sanitizeObject(d);
 186
 187             // $('#count').html("Active in the last 10 minutes: " + data['kismet.adsb.map.devices'].length);
 188             $('#numplanes').html(data['kismet.adsb.map.devices'].length);
 189
 190             if (!map_configured) {
 191                 var lat1 = data['kismet.russ.map.min_lat'];
 192                 var lon1 = data['kismet.russ.map.min_lon'];
 193                 var lat2 = data['kismet.russ.map.max_lat'];
 194                 var lon2 = data['kismet.russ.map.max_lon'];
 195
 196                 map = L.map('map', {
 197                     loadingControl: true
 198                 });
 199                 map.fitBounds([[lat1, lon1], [lat2, lon2]])
 200                 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 201                     maxZoom: 19,
 202                     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 203                     className: 'map-tiles',
 204                 }).addTo(map);
 205
 206                 map_configured = true;
 207             }
 208             var dt = $('#datapoints').DataTable();
 209             dt.clear();
 210             alert('here');
 211             for (var d = 0; d < data.length; d++) {
 212                     try {
 213                             console.log(d);
 214                             dt.row.add(d);
 215                     } catch (error) {
 216                             console.log("Error");
 217                         ;
 218                     }
 219             }
 220         }
 221
 222         function poll_map() {
 223                 $.get(local_uri_prefix + KISMET_PROXY_PREFIX + "phy/RUSS/map_data.json")
 224                     .done(function(d) {
 225                         console.log("uNF");
 226                         map_cb(d);
 227                     })
 228         }
 229
 230         // Warn if the browser doesn't support addEventListener or the Page Visibility API
 231         if (typeof document.addEventListener === "undefined" || hidden === undefined) {
 232             ; // Do nothing
 233         } else {
 234             // Handle page visibility change
 235             document.addEventListener(visibilityChange, handleVisibilityChange, false);
 236         }
 237
 238         var urlparam = new URL(window.location.href);
 239         var param_url = urlparam.searchParams.get('parent_url') + "/";
 240         var param_prefix = urlparam.searchParams.get('local_uri_prefix', "");
 241         var KISMET_PROXY_PREFIX = urlparam.searchParams.get('KISMET_PROXY_PREFIX', "");
 242
 243         if (param_prefix == 0)
 244             param_prefix=""
 245
 246         var local_uri_prefix = param_url + param_prefix;
 247         if (typeof(KISMET_URI_PREFIX) !== 'undefined')
 248             local_uri_prefix = KISMET_URI_PREFIX;
 249
 250         var map_configured = true; //set back to false once i fix the json parsing
 251
 252         var map = null;
 253         poll_map();
 254     </script>
 255 </body>
 256 </html>