446 lines
22 KiB
HTML
446 lines
22 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Begin of Shared Head -->
|
|
<title>2D Aircraft OpenLayers Map</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
|
<meta http-equiv="cache-control" content="no-cache">
|
|
<meta http-equiv="pragma" content="no-cache">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="favicon-jetvision.ico">
|
|
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
|
|
<link href="css/bootstrap-toggle.css" rel="stylesheet">
|
|
<!--<link href="css/bootstrap-customized.css" rel="stylesheet">-->
|
|
<!--<link href="css/radarcape-jetvision.css" rel="stylesheet"> -->
|
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
|
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<!-- End of Shared Head -->
|
|
<!-- CSS -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" rel="stylesheet" type="text/css">
|
|
<link href="css/ionicons.min.css" rel="stylesheet">
|
|
<link href="css/font-awesome.min.css" rel="stylesheet">
|
|
<link href="css/font-Roboto.css" rel="stylesheet">
|
|
<link href="css/ol-ext.min.css" rel="stylesheet">
|
|
<link href="css/ol3-layerswitcher.css" rel="stylesheet">
|
|
<!--<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">-->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="stylesheet" />
|
|
<link href="css/openlayersmap.css" rel="stylesheet">
|
|
<!-- JS -->
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,Promise.prototype.finally,fetch,String.prototype.includes,Object.assign,es5,es6,requestAnimationFrame,Element.prototype.classList"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js" type="text/javascript"></script>
|
|
<script type="text/javascript" src="js/toast.min.js"></script>
|
|
|
|
<script type="text/javascript" src="js/ol-ext.min.js"></script>
|
|
<script type="text/javascript" src="js/ol3-layerswitcher.js"></script>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/raphael@2.2.7/raphael.min.js"></script>
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@2.6.1/dist/olms.min.js"></script>
|
|
<script type="text/javascript" src="js/lib/papaparse.min.js"></script>
|
|
<!--<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> -->
|
|
<script type="text/javascript" src="js/lib/moment.min.js"></script> <!--daterangepicker-->
|
|
<script type="text/javascript" src="js/lib/daterangepicker_patched.js"></script> <!--daterangepicker-->
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script> <!-- bootstrap slider -->
|
|
<script type="text/javascript" src="js/lib/lz-string.min.js"></script>
|
|
|
|
<!-- Common Javascript -->
|
|
<script type="text/javascript" src="js/globals.js"></script>
|
|
<script type="text/javascript" src="js/navbar.js"></script>
|
|
<!-- Internal JS -->
|
|
<script type="text/javascript" src="js/radarcape2dmap_ac_symbols.js"></script>
|
|
<script type="text/javascript" src="js/tileservers.js"></script>
|
|
<script type="text/javascript" src="js/ol-iconpatch.js"></script>
|
|
<script type="text/javascript" src="js/ol-util.js"></script>
|
|
<script type="text/javascript" src="js/ol-display_styles.js"></script>
|
|
<script type="text/javascript" src="js/ol-model_updaters.js"></script>
|
|
<script type="text/javascript" src="js/airports.js"></script>
|
|
<script type="text/javascript" src="js/ol-sidebar.js"></script>
|
|
<script type="text/javascript" src="js/ol-historycontrols.js"></script>
|
|
<script type="text/javascript" src="js/openlayersmap.js"></script>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!-- Prevent scaling the page on mobile devices-->
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!--CONTENT-->
|
|
<div id="nav"></div>
|
|
<div class="container-fluid container-fluid-map">
|
|
|
|
<!-- --------- -->
|
|
|
|
<div id="map-container" class="mapcontainer">
|
|
<div id="olmap_box" class="olmap_embedded"></div>
|
|
</div>
|
|
|
|
<div id="map_info_box" class="mapinfobox mapinfo_embedded">
|
|
|
|
<div id="hide_info_btn_box" class="info_full_width text-right">
|
|
<button id="btn_hide_info_box" class="btn-xs btn-default map_info_close" type="button"><span id="hide_info_btn" class="glyphicon glyphicon-plus"></span></button>
|
|
</div>
|
|
<div id="hide_info" class="scroll-y">
|
|
<div id="general_info_box">
|
|
<table class="info_box_table scroll-y">
|
|
<thead>
|
|
<tr class="info_header scroll-y">
|
|
<td colspan="2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span> General Information</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="info_label live-info">
|
|
<td>UTC Time</td>
|
|
<td>Local Time</td>
|
|
</tr>
|
|
<tr class="info_value live-info">
|
|
<td id="utc-time"></td>
|
|
<td id="local-time"></td>
|
|
</tr>
|
|
<tr class="info_label live-info">
|
|
<td colspan="2">Number of aircraft</td>
|
|
</tr>
|
|
<tr class="info_value live-info">
|
|
<td colspan="2">
|
|
<ul class="list-unstyled">
|
|
<li>
|
|
<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
|
|
<b> total receivable: </b><span id="num-aircrafts-receivable"></span>
|
|
</li>
|
|
<li>
|
|
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
|
|
<b> recently seen: </b><span id="num-aircrafts-valid"></span>
|
|
</li>
|
|
<li>
|
|
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
|
|
<b> located: </b><span id="num-aircrafts-located"></span>
|
|
</li>
|
|
<li>
|
|
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
|
|
<b> in current map view: </b><span id="num-aircrafts-inView"></span>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr class="info_label live-info">
|
|
<td colspan="2">Number of aircraft by sources:</td>
|
|
</tr>
|
|
<tr class="info_value live-info">
|
|
<td colspan="2">
|
|
<span> ADS-B: </span><span id="acCountBySource-A"></span>
|
|
<span> MLAT: </span><span id="acCountBySource-M"></span>
|
|
<span> FLARM: </span><span id="acCountBySource-L"></span>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="flight_info_box">
|
|
|
|
<table class="info_box_table scroll-y" id="selected-plane-infos" style="display: none;">
|
|
<tbody>
|
|
<tr class="info_header">
|
|
<td colspan="2"><span class="glyphicon glyphicon-plane" aria-hidden="true"></span> Aircraft Details</td>
|
|
</tr>
|
|
<tr class="info_label">
|
|
<td width="50%">Registration</td>
|
|
<td width="50%">Mode-S</td>
|
|
</tr>
|
|
<tr class="info_value">
|
|
<td id="reg-id"></td>
|
|
<td id="mode-s"></td>
|
|
</tr>
|
|
<tr class="info_label">
|
|
<td>Type</td>
|
|
<td>Category</td>
|
|
</tr>
|
|
<tr class="info_value">
|
|
<td id="ac-type"></td>
|
|
<td id="ac-category"></td>
|
|
</tr>
|
|
<tr class="info_header">
|
|
<td colspan="2" id="flight-no"><span class="glyphicon glyphicon-plane" aria-hidden="true"></span> Flight Details</td>
|
|
</tr>
|
|
<tr class="info_label">
|
|
<td>Flight</td>
|
|
<td>Squawk</td>
|
|
</tr>
|
|
<tr class="info_value">
|
|
<td id="flight-id"></td>
|
|
<td id="squawk"></td>
|
|
</tr>
|
|
<tr class="info_label">
|
|
<td>Origin</td>
|
|
<td>Destination</td>
|
|
</tr>
|
|
<tr class="info_value">
|
|
<td>
|
|
<div>
|
|
<span class="airport-country-flag" id="orig-airport-flag"></span> <span id="orig-airport"></span>
|
|
</div>
|
|
<span class="airport-label" id="orig-airport-label"></span>
|
|
</td>
|
|
<td>
|
|
<div>
|
|
<span class="airport-country-flag" id="dest-airport-flag"></span> <span id="dest-airport"></span>
|
|
</div>
|
|
<span class="airport-label" id="dest-airport-label"></span>
|
|
</td>
|
|
</tr>
|
|
<tr class="info_label">
|
|
<td>Track</td>
|
|
<td>Speed</td>
|
|
</tr>
|
|
<tr class="info_value">
|
|
<td id="heading"></td>
|
|
<td id="speed"></td>
|
|
</tr>
|
|
<tr class="info_label">
|
|
<td>Altitude</td>
|
|
<td>Vertical Rate</td>
|
|
</tr>
|
|
<tr class="info_value">
|
|
<td id="altitude"></td>
|
|
<td id="v-rate"></td>
|
|
</tr>
|
|
<tr class="info_header">
|
|
<td colspan="2"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Aircraft Tracking</td>
|
|
</tr>
|
|
<tr class="info_label">
|
|
<td>Latitude</td>
|
|
<td>Longitude</td>
|
|
</tr>
|
|
<tr class="info_value">
|
|
<td id="ac-lat"></td>
|
|
<td id="ac-lon"></td>
|
|
</tr>
|
|
<tr class="info_label">
|
|
<td>Distance</td>
|
|
<td>Source</td>
|
|
</tr>
|
|
<tr class="info_value">
|
|
<td id="distance"></td>
|
|
<td id="datasource"></td>
|
|
</tr>
|
|
<tr class="info_label live-info">
|
|
<td>Last Signal</td>
|
|
<td> </td>
|
|
</tr>
|
|
<tr class="info_value live-info">
|
|
<td id="last-signal"></td>
|
|
<td> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="filter-settings" class="instatic-notavail">
|
|
|
|
<div class="filter-form-controls">
|
|
<i title="Clear" class="icon filter-clear ion-trash-a"></i>
|
|
<i class="filter-close icon ion-close" title="Close"></i>
|
|
</div>
|
|
<table id="physical-filters">
|
|
<tr class="inhist-notavail">
|
|
<td><input id="filter-prio-enabled" type="checkbox"/></td>
|
|
<td class="desc" style="line-height: 0.9em;">Prio+Highlight<br/><span style="font-size:11px;">ICAO, Registration</span></td>
|
|
<td colspan="2"><input id="filter-prio" type="text" placeholder="ABCFFF,3C*,D-*..."></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input id="filter-alt-enabled" type="checkbox"/></td>
|
|
<td class="desc nowrap">Altitude (ft)</td>
|
|
<td>
|
|
<table class="splittable">
|
|
<tr>
|
|
<td><input id="filter-alt-min" type="number" min="0" class="positive-numeric-only" placeholder="from" /></td>
|
|
<td><input id="filter-alt-max" type="number" min="0" class="positive-numeric-only" placeholder="to" /></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input id="filter-spd-enabled" type="checkbox"/></td>
|
|
<td class="desc nowrap" >Speed (kt)</td>
|
|
<td>
|
|
<table class="splittable">
|
|
<tr>
|
|
<td><input id="filter-spd-min" type="number" min="0" class="positive-numeric-only" placeholder="from" /></td>
|
|
<td><input id="filter-spd-max" type="number" min="0" class="positive-numeric-only" placeholder="to" /></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr class="inhist-notavail">
|
|
<td><input id="filter-dis-enabled" type="checkbox"/></td>
|
|
<td class="desc nowrap">Distance <span id="filterdiag-distanceUnit"></span></td>
|
|
<td>
|
|
<table class="splittable">
|
|
<tr>
|
|
<td><input id="filter-dis-min" type="number" min="0" class="positive-numeric-only" placeholder="from" /></td>
|
|
<td><input id="filter-dis-max" type="number" min="0" class="positive-numeric-only" placeholder="to" /></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input id="filter-gnd-enabled" type="checkbox"/></td>
|
|
<td colspan="2" class="desc">Ground Traffic </td>
|
|
</tr>
|
|
<tr><td> </td></tr>
|
|
</table>
|
|
<table id="logical-filters">
|
|
<tr>
|
|
<td><input id="filter-fli-enabled" type="checkbox"></td>
|
|
<td class="desc">Flight</td>
|
|
<td colspan="2"><input id="filter-fli" placeholder="e.g. DLH1330 or DLH*"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><input id="filter-squ-enabled" type="checkbox"/></td>
|
|
<td class="desc" style="line-height: 0.9em;">Squawk<br/><span style="font-size:11px;">List, octal</span></td>
|
|
<td colspan="2"><input id="filter-squ" placeholder="1000,7700,..." /></td>
|
|
</tr>
|
|
|
|
<tr title="Airport codes are accepted in ICAO or IATA format (EDDF vs. FRA) depending on your setting for Basestation.sqb">
|
|
<td><input id="filter-org-enabled" type="checkbox"></td>
|
|
<td class="desc" style="line-height: 0.9em;">Origin<br/><span style="font-size:11px;">List of Airports</span></td>
|
|
<td colspan="2"><input id="filter-org" placeholder="EDDF or ED*"></td>
|
|
</tr>
|
|
|
|
<tr title="Airport codes are accepted in ICAO or IATA format (EDDF vs. FRA) depending on your setting for Basestation.sqb">
|
|
<td><input id="filter-dst-enabled" type="checkbox"></td>
|
|
<td class="desc" style="line-height: 0.9em;">Destination<br/><span style="font-size:11px;">List of Airports</span></td>
|
|
<td colspan="2"><input id="filter-dst" placeholder="e.g. LIRA or LIR*"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><input type="checkbox" id="filter-typ-enabled"></td>
|
|
<td class="desc">Aircraft Type</td>
|
|
<td colspan="2"><input id="filter-typ" placeholder="e.g. A320 or A32*"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><input id="filter-fleet-enabled" type="checkbox"/></td>
|
|
<td class="desc" style="line-height: 0.9em;">Fleetwatch<br/><span style="font-size:11px;">ICAO, Reg.</span></td>
|
|
<td colspan="2"><input id="filter-fleet" placeholder="ABCDEF,D-*,DEF123,..." /></td>
|
|
</tr>
|
|
|
|
|
|
<tr class="inhist-notavail">
|
|
<td></td>
|
|
<td class="desc">Track Length (s)</td>
|
|
<td colspan="2"><input id="filter-tracklength" type="number" min="0" class="positive-numeric-only" placeholder="auto"></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan=4>
|
|
<form id="filter-sources">
|
|
<table><tr class="nowrap">
|
|
<td><input class="filtersource" type="checkbox" name="fsrcA" value="A" checked/> ADS-B </td>
|
|
<td><input class="filtersource" type="checkbox" name="fsrcM" value="M" checked/> MLAT </td>
|
|
<td><input class="filtersource" type="checkbox" name="fsrcF" value="F" checked/> FlAwa </td>
|
|
<td><input class="filtersource" type="checkbox" name="fsrcO" value="O"/> OGN </td>
|
|
<td><input class="filtersource" type="checkbox" name="fsrcL" value="L" checked/> FLARM </td>
|
|
</tr></table>
|
|
</form>
|
|
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="inhist-notavail">
|
|
<td></td>
|
|
<td class="desc nowrap">Preferred Source</td>
|
|
<td colspan=2>
|
|
<select id="preferred-source">
|
|
<option value="" selected>Auto</option>
|
|
<option value="A">ADS-B</option>
|
|
<option value="M">Jetvision MLAT</option>
|
|
<option value="F">FlightAware</option>
|
|
<option value="O">Open Glider Net Server</option>
|
|
<option value="L">OGN Local Receiver</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="refresh-interval-cell">
|
|
<td></td>
|
|
<td class="desc nowrap">Refresh Interval</td>
|
|
<td colspan=2>
|
|
<select id="refresh-interval">
|
|
<option value="1000">1s</option>
|
|
<option value="2000" selected>2s</option>
|
|
<option value="4000">3s</option>
|
|
<option value="5000">5s</option>
|
|
<option value="10000">10s</option>
|
|
<option value="15000">15s</option>
|
|
<option value="30000">30s</option>
|
|
<option value="60000">1m</option>
|
|
<option value="900000">15m</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
<button id="filter-apply">Apply & Close</button>
|
|
</div>
|
|
|
|
|
|
<!-- ------------ -->
|
|
<script>
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<div id="timeslider-container" class="historycontrol">
|
|
<span id="playback-controls">
|
|
<!-- make timeslider component unselectable, preventing from double-firing spacebar events for play/pause -->
|
|
<button type="button" class="playback-btnframe btn unselectable btn-primary" id="control-play" tabIndex="-1"><i class="controlicon icon ion-play"></i></button>
|
|
<button type="button" class="playback-btnframe btn unselectable btn-primary" id="control-pause" tabIndex="-1"><i class="controlicon icon ion-pause"></i></button>
|
|
<button type="button" class="playback-btnframe btn-primary" id="control-timerange" name="timerangeselector" value=""><i class="controlicon icon ion-android-calendar"></i></button>
|
|
<span class="playback-btnframe dropup">
|
|
<button id="playbackspeed-button" class="btn btn-default dropdown-toggle playback-btnframe" type="button" data-toggle="dropdown">1x
|
|
<span class="caret"></span>
|
|
</button>
|
|
<ul id="playbackspeed-dropdown" class="dropdown-menu">
|
|
<li class="dropdown-header">Play 30 minutes in ...</li>
|
|
<li class="dropdown-option" data-value="1"><a>30 minutes <b>[1x]</b> (realtime)</a></li>
|
|
<li class="dropdown-option" data-value="2"><a>15 minutes <b>[2x]</b> </a></li>
|
|
<li class="dropdown-option" data-value="6"><a>5 minutes <b>[6x]</b></a></li>
|
|
<li class="dropdown-option" data-value="15"><a>2 minutes <b>[15x]</b></a></li>
|
|
<li class="dropdown-option" data-value="30"><a>1 minute <b>[30x]</b></a></li>
|
|
<li class="dropdown-option" data-value="60"><a>30 seconds <b>[60x]</b> (1 min/s)</a></li>
|
|
<li class="dropdown-option" data-value="120"><a>15 seconds <b>[120x]</b> (2 min/s)</a></li>
|
|
</ul>
|
|
|
|
</span>
|
|
<span id="progress-indicators">
|
|
<i class="glyphicon glyphicon-refresh glyphicon-spin unselectable controllabel data-loading" id="data-loading"></i>
|
|
<i class="glyphicon glyphicon-warning-sign unselectable controllabel data-loading" id="data-loading-error"></i>
|
|
</span>
|
|
</span>
|
|
|
|
<span id="sliderContainer">
|
|
<input id="sliderHull" data-slider-id="slider" type="text" data-slider-value="0"/>
|
|
</span>
|
|
<span id="history-right-options">
|
|
<button title="Persist Flightpaths" type="button" class="playback-btnframe btn unselectable control-history-right-opt btn-info" id="control-persist" tabIndex="-1"><i class="icon ion-ios-snowy"></i></button>
|
|
<button title="Static Download" type="button" class="playback-btnframe btn unselectable control-history-right-opt control-staticdownload" id="control-staticdownload" tabIndex="-1"><i class="glyphicon glyphicon-new-window"></i></button>
|
|
<button title="Download Raw Data" type="button" class="playback-btnframe btn unselectable control-history-right-opt control-staticdownload" id="control-staticdownload-raw" tabIndex="-1"><i class="fa fa-database"></i></button>
|
|
</span>
|
|
</div>
|
|
|
|
<br>
|
|
</body>
|
|
</html>
|