2013-06-21 14:05:41 +08:00
|
|
|
#!/usr/bin/env python
|
|
|
|
|
#HTML template for Mode S map display
|
|
|
|
|
#Nick Foster, 2013
|
|
|
|
|
|
|
|
|
|
def html_template(my_position, json_file):
|
|
|
|
|
if my_position is None:
|
|
|
|
|
my_position = [37, -122]
|
2013-07-19 00:45:09 +08:00
|
|
|
|
2013-06-21 14:05:41 +08:00
|
|
|
return """
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>ADS-B Aircraft Map</title>
|
|
|
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
2013-06-22 07:28:56 +08:00
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
.labels {
|
2013-07-23 12:54:37 +08:00
|
|
|
color: blue;
|
2013-06-22 07:28:56 +08:00
|
|
|
background-color: white;
|
|
|
|
|
font-family: "Lucida Grande", "Arial", sans-serif;
|
2013-07-23 12:54:37 +08:00
|
|
|
font-size: 13px;
|
2013-06-22 07:28:56 +08:00
|
|
|
font-weight: bold;
|
|
|
|
|
text-align: center;
|
2013-07-23 12:54:37 +08:00
|
|
|
width: 70px;
|
|
|
|
|
border: none;
|
2013-06-22 07:28:56 +08:00
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2013-06-21 14:05:41 +08:00
|
|
|
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
|
|
|
|
|
</script>
|
2013-07-23 12:19:40 +08:00
|
|
|
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js">
|
|
|
|
|
</script>
|
2013-06-21 14:05:41 +08:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
var map;
|
|
|
|
|
var markers = [];
|
|
|
|
|
var defaultLocation = new google.maps.LatLng(%f, %f);
|
|
|
|
|
var defaultZoomLevel = 9;
|
|
|
|
|
|
|
|
|
|
function requestJSONP() {
|
|
|
|
|
var script = document.createElement("script");
|
|
|
|
|
script.src = "%s?" + Math.random();
|
|
|
|
|
script.params = Math.random();
|
|
|
|
|
document.getElementsByTagName('head')[0].appendChild(script);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var planeMarker;
|
|
|
|
|
var planes = [];
|
|
|
|
|
|
|
|
|
|
function clearMarkers() {
|
|
|
|
|
for (var i = 0; i < planes.length; i++) {
|
|
|
|
|
planes[i].setMap(null);
|
|
|
|
|
}
|
|
|
|
|
planes = [];
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function jsonp_callback(results) { // from JSONP
|
|
|
|
|
clearMarkers();
|
|
|
|
|
airplanes = {};
|
|
|
|
|
for (var i = 0; i < results.length; i++) {
|
|
|
|
|
airplanes[results[i].icao] = {
|
|
|
|
|
center: new google.maps.LatLng(results[i].lat, results[i].lon),
|
|
|
|
|
heading: results[i].hdg,
|
2013-06-22 07:28:56 +08:00
|
|
|
altitude: results[i].alt,
|
|
|
|
|
type: results[i].type,
|
|
|
|
|
ident: results[i].ident,
|
|
|
|
|
speed: results[i].speed,
|
2013-07-19 00:45:09 +08:00
|
|
|
vertical: results[i].vertical,
|
|
|
|
|
highlight: results[i].highlight
|
2013-06-21 14:05:41 +08:00
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
refreshIcons();
|
|
|
|
|
}
|
2013-07-19 00:45:09 +08:00
|
|
|
|
2013-06-21 14:05:41 +08:00
|
|
|
function refreshIcons() {
|
|
|
|
|
for (var airplane in airplanes) {
|
2013-07-19 00:45:09 +08:00
|
|
|
if (airplanes[airplane].highlight != 0) {
|
|
|
|
|
icon_file = "http://www.nerdnetworks.org/~bistromath/airplane_sprite_highlight.png";
|
|
|
|
|
} else {
|
|
|
|
|
icon_file = "http://www.nerdnetworks.org/~bistromath/airplane_sprite.png";
|
|
|
|
|
};
|
2013-06-21 14:05:41 +08:00
|
|
|
var plane_icon = {
|
2013-07-19 00:45:09 +08:00
|
|
|
url: icon_file,
|
2013-06-21 14:05:41 +08:00
|
|
|
size: new google.maps.Size(128,128),
|
|
|
|
|
origin: new google.maps.Point(parseInt(airplanes[airplane].heading/10)*128,0),
|
|
|
|
|
anchor: new google.maps.Point(64,64),
|
|
|
|
|
//scaledSize: new google.maps.Size(4608,126)
|
|
|
|
|
};
|
2013-07-19 00:45:09 +08:00
|
|
|
|
2013-07-23 13:11:13 +08:00
|
|
|
if (airplanes[airplane].ident.length != 8) {
|
|
|
|
|
identstr = airplane;
|
|
|
|
|
} else {
|
|
|
|
|
identstr = airplanes[airplane].ident;
|
2013-06-22 07:28:56 +08:00
|
|
|
};
|
2013-07-19 00:45:09 +08:00
|
|
|
|
2013-06-21 14:05:41 +08:00
|
|
|
var planeOptions = {
|
|
|
|
|
map: map,
|
|
|
|
|
position: airplanes[airplane].center,
|
2013-06-22 07:28:56 +08:00
|
|
|
icon: plane_icon,
|
|
|
|
|
labelContent: identstr,
|
2013-07-23 12:54:37 +08:00
|
|
|
labelAnchor: new google.maps.Point(35, -32),
|
2013-06-22 07:28:56 +08:00
|
|
|
labelClass: "labels",
|
|
|
|
|
labelStyle: {opacity: 0.75}
|
2013-06-21 14:05:41 +08:00
|
|
|
};
|
2013-07-23 12:19:40 +08:00
|
|
|
planeMarker = new MarkerWithLabel(planeOptions);
|
2013-06-21 14:05:41 +08:00
|
|
|
planes.push(planeMarker);
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function initialize()
|
|
|
|
|
{
|
2013-07-19 00:45:09 +08:00
|
|
|
var myOptions =
|
|
|
|
|
{
|
|
|
|
|
zoom: defaultZoomLevel,
|
|
|
|
|
center: defaultLocation,
|
|
|
|
|
disableDefaultUI: true,
|
|
|
|
|
mapTypeId: google.maps.MapTypeId.TERRAIN
|
|
|
|
|
};
|
2013-06-21 14:05:41 +08:00
|
|
|
|
|
|
|
|
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
|
|
|
|
|
|
|
|
|
|
requestJSONP();
|
|
|
|
|
setInterval("requestJSONP()", 1000);
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body onload="initialize()">
|
|
|
|
|
<div id="map_canvas" style="width:100%%; height:100%%">
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>""" % (my_position[0], my_position[1], json_file)
|
