diff --git a/public_html/gmap.html b/public_html/gmap.html index 4f086d9..9d41c9f 100644 --- a/public_html/gmap.html +++ b/public_html/gmap.html @@ -10,15 +10,14 @@ -
+
-

Dump1090 - 00:00:00 UTC

+

Dump1090 - 00:00:00 UTC Reset Map

Click on a plane for info.

-
diff --git a/public_html/script.js b/public_html/script.js index 4fdb03e..42db4b8 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -29,7 +29,8 @@ function getIconForPlane(plane) { }; } -function selectPlane() { +function selectPlane(selectedPlane) { + if (selectedPlane.length) this.planehex = selectedPlane; if (!Planes[this.planehex]) return; var old = Selected; Selected = this.planehex; @@ -38,7 +39,9 @@ function selectPlane() { Planes[old].marker.setIcon(getIconForPlane(Planes[old])); } Planes[Selected].marker.setIcon(getIconForPlane(Planes[Selected])); + refreshSelectedInfo(); + refreshTableInfo(); } function refreshGeneralInfo() { @@ -51,17 +54,30 @@ function refreshGeneralInfo() { function refreshSelectedInfo() { var i = document.getElementById('selinfo'); var p = Planes[Selected]; - - if (!p) return; - var html = 'ICAO: '+p.hex+'
'; - if (p.flight.length) { - html += ''+p.flight+'
'; + + if (!p) { + p = {}; + p.flight = ""; + p.hex = ""; + p.squawk = ""; + p.altitude = "0"; + p.speed = "0"; + p.lat = "lat"; + p.lon = "lon"; + p.messages = "0"; + p.seen = "0"; } - html += 'Altitude: '+p.altitude+' feet
'; - html += 'Speed: '+p.speed+' knots
'; - html += 'Coordinates: '+p.lat+', '+p.lon+'
'; - html += 'Messages: '+p.messages+'
'; - html += 'Seen: '+p.seen+' sec
'; + + var html = ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += '
'+p.flight+' 
ICAO:'+p.hex+'
Squawk:'+p.squawk+'
Altitude:'+p.altitude+' feet
Speed:'+p.speed+' knots
Coordinates:'+p.lat+', '+p.lon+'
Messages:'+p.messages+'
Seen:'+p.seen+' sec
'; i.innerHTML = html; } @@ -69,21 +85,23 @@ function refreshTableInfo() { var i = document.getElementById('tabinfo'); var html = ''; - html += ''; + html += ''; + html += ''; + html += ''; + html += ''; for (var p in Planes) { if (p == Selected) { - html += ''; + html += ''; } else { - html += ''; + html += ''; } html += ''; + html += ''; html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; + html += ''; + html += ''; + html += ''; + html += ''; html += ''; } html += '
FlightAltitudeSpeedTrackLatLongSeenMsgs
FlightSquawkAltitudeSpeedTrackSeenMsgs
' + Planes[p].flight + '' + Planes[p].squawk + '' + Planes[p].altitude + '' + Planes[p].speed + '' + Planes[p].track + '' + Planes[p].lat + '' + Planes[p].lon + '' + Planes[p].seen + '' + Planes[p].messages + '' + Planes[p].speed + '' + Planes[p].track + '' + Planes[p].seen + '' + Planes[p].messages + '
'; @@ -120,6 +138,7 @@ function fetchData() { myplane.track = plane.track; myplane.flight = plane.flight; myplane.seen = plane.seen; + myplane.squawk = plane.squawk; myplane.messages = plane.messages; if (myplane.hex == Selected) refreshSelectedInfo(); @@ -155,9 +174,8 @@ function fetchData() { delete Planes[p]; } } - + refreshTableInfo() ; - }); } @@ -180,19 +198,6 @@ function printTime() { } } -function placeFooter() { - var windHeight = $(window).height(); - var footerHeight = $('#info_footer').height(); - var offset = parseInt(windHeight) - parseInt(footerHeight); - - var footerWidth = parseInt($('#info_footer').width()); - var infoWidth = parseInt($('#info').width()); - var marginLeft = parseInt((infoWidth / 2) - (footerWidth / 2)); - - $('#info_footer').css('top', offset); - $('#info_footer').css('margin-left', marginLeft); -} - function resetMap() { localStorage['CenterLat'] = 45.0; localStorage['CenterLon'] = 9.0; @@ -203,6 +208,13 @@ function resetMap() { document.getElementById('selinfo').innerHTML = ''; } +function resizeMap() { + var windWidth = parseInt($(window).width()); + var infoWidth = parseInt($('#info').width()); + var mapWidth = windWidth - infoWidth; + $('#map_canvas').css('width', mapWidth); +} + function initialize() { var mapTypeIds = []; for(var type in google.maps.MapTypeId) { @@ -230,14 +242,8 @@ function initialize() { maxZoom: 18 })); - // show footer at info-area - $(function(){ - $(window).resize(function(e){ - placeFooter(); - }); - placeFooter(); - // hide it before it's positioned - $('#info_footer').css('display','inline'); + $(window).resize(function(e){ + resizeMap(); }); // Listener for newly created Map @@ -249,6 +255,13 @@ function initialize() { google.maps.event.addListener(Map, 'zoom_changed', function() { localStorage['ZoomLvl'] = Map.getZoom(); }); + + google.maps.event.addListener(Map, 'click', function() { + selectPlane("xyzxyz"); // Select not valid ICAO24 address to clear selection. + Selected = null; + refreshSelectedInfo(); + refreshTableInfo(); + }); // Setup our timer to poll from the server. window.setInterval(function() { @@ -260,4 +273,8 @@ function initialize() { window.setInterval(function() { printTime(); }, 250); + + refreshGeneralInfo(); + refreshSelectedInfo(); + resizeMap(); } diff --git a/public_html/style.css b/public_html/style.css index 86c8576..1226b04 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -1,39 +1,44 @@ -html { height: 100% } -body { height: 100%; margin: 0; padding: 0 } -#map_canvas { height: 100% } -#info { -position: absolute; -width:20%; -height:100%; -bottom:0px; -right:0px; -top:0px; -background-color: white; -border-left:1px #666 solid; -font-family:Helvetica; -} -#info div { -padding:0px; -padding-left:10px; -margin:0px; -} -#info div h1 { -margin-top:10px; -font-size:16px; -} -#info div p { -font-size:14px; -color:#333; -} -#info_footer { -position: absolute; -display: none; -text-align: center; -padding:0px; -margin:0px; -} -#tableinfo { -font-size: x-small; -font-family: monospace; +html { height: 100%; } +body { height: 100%; margin: 0; padding: 0; } + +#map_canvas { + height: 100%; +} + +#info { + position: absolute; + width: 300px; + height: 100%; + bottom: 0px; + right: 0px; + top: 0px; + background-color: white; + border-left: 1px #666 solid; + font-family: Helvetica; +} + +#info div { + padding: 0px; + padding-left: 10px; + margin:0px; +} + +#info div h1 { + margin-top: 10px; + font-size: 16px; +} + +#info div p { + font-size: 14px; + color: #333; +} + +#tableinfo { + font-size: x-small; + font-family: monospace; +} + +#tabinfo { + cursor: pointer; }