Phi: add AI traffic to the map

webgui/topics/Map.js

@@ -1,5 +1,5 @@
 define([
-        'knockout', 'text!./Map.html', './Map/NavdbLayer'
+        'knockout', 'text!./Map.html', './Map/NavdbLayer', './Map/AILayer'
 ], function(ko, htmlString, NavdbLayer ) {
 
     function ViewModel(params) {
@@ -78,6 +78,7 @@ define([
             "Track" : trackLayer,
 
             "NavDB": L.navdbLayer(),
+            "AI": L.aiLayer(),
 
             "VFRMap.com Sectionals (US)" : new L.TileLayer('http://vfrmap.com/20140918/tiles/vfrc/{z}/{y}/{x}.jpg', {
                 maxZoom : 12,

webgui/topics/Map/AILayer.js

@@ -0,0 +1,186 @@
+(function(factory) {
+    if (typeof define === "function" && define.amd) {
+        // AMD. Register as an anonymous module.
+        define([
+                'leaflet', './MapIcons'
+        ], factory);
+    } else {
+        // Browser globals
+        factory();
+    }
+}(function(leaflet, MAP_ICON) {
+
+    var SGPropertyNode = function(json) {
+        this.json = json;
+    };
+
+    SGPropertyNode.prototype.getValue = function() {
+        return this.json.value;
+    }
+
+    SGPropertyNode.prototype.getName = function() {
+        return this.json.name;
+    }
+
+    SGPropertyNode.prototype.getPath = function() {
+        return this.json.path;
+    }
+
+    SGPropertyNode.prototype.getIndex = function() {
+        return this.json.index;
+    }
+
+    SGPropertyNode.prototype.getChildren = function(name) {
+        var reply = [];
+        this.json.children.forEach(function(child) {
+            if (name && child.name == name)
+                reply.push(new SGPropertyNode(child));
+        });
+        return reply;
+    }
+
+    SGPropertyNode.prototype.getNode = function(name, index) {
+        if (!index)
+            index = 0;
+        for (var i = 0; i < this.json.children.length; i++) {
+            var child = this.json.children[i];
+            if (child.name == name && child.index == index)
+                return new SGPropertyNode(child);
+        }
+    }
+
+    leaflet.AILayer = leaflet.GeoJSON.extend({
+        options : {
+            pointToLayer : function(feature, latlng) {
+                var options = {
+                    title : feature.properties.callsign,
+                    alt : feature.properties.callsign,
+                    riseOnHover : true,
+                };
+
+                if (feature.properties.type == "aircraft" || feature.properties.type == "multiplayer") {
+                    options.angle = feature.properties.heading;
+                    options.icon = MAP_ICON["aircraft"];
+                }
+                return new leaflet.RotatedMarker(latlng, options);
+            },
+
+            onEachFeature : function(feature, layer) {
+                if (feature.properties) {
+                    var popupString = '<div class="popup">';
+                    for ( var k in feature.properties) {
+                        var v = feature.properties[k];
+                        popupString += k + ': ' + v + '<br />';
+                    }
+                    popupString += '</div>';
+                    layer.bindPopup(popupString, {
+                        maxHeight : 200
+                    });
+                }
+            },
+
+        },
+        onAdd : function(map) {
+            leaflet.GeoJSON.prototype.onAdd.call(this, map);
+            this.update(++this.updateId);
+        },
+
+        onRemove : function(map) {
+            this.updateId++;
+            leaflet.GeoJSON.prototype.onRemove.call(this, map);
+        },
+
+        updateId : 0,
+        update : function(id) {
+            var self = this;
+
+            if (self.updateId != id)
+                return;
+
+            var url = "/json/ai/models?d=99";
+            var jqxhr = $.get(url).done(function(data) {
+                self.clearLayers();
+                self.addData(self.aiPropsToGeoJson(data, [
+                        "aircraft", "multiplayer", "carrier"
+                ]));
+            }).fail(function(a, b) {
+                self.updateId++;
+                console.log(a, b);
+                alert('failed to load AI data');
+            }).always(function() {
+            });
+
+            if (self.updateId == id) {
+                setTimeout(function() {
+                    self.update(id)
+                }, 10000);
+            }
+        },
+
+        aiPropsToGeoJson : function(props, types) {
+            var geoJSON = {
+                type : "FeatureCollection",
+                features : [],
+            };
+
+            var root = new SGPropertyNode(props);
+            types.forEach(function(type) {
+                root.getChildren(type).forEach(function(child) {
+
+                    if (!child.getNode("valid").getValue())
+                        return;
+
+                    var position = child.getNode("position");
+                    var orientation = child.getNode("orientation");
+                    var velocities = child.getNode("velocities");
+                    var lon = position.getNode("longitude-deg").getValue();
+                    var lat = position.getNode("latitude-deg").getValue();
+                    var alt = position.getNode("altitude-ft") * 0.3048;
+                    var heading = orientation.getNode("true-heading-deg").getValue();
+                    var id = child.getNode("id").getValue();
+                    var callsign = "";
+                    var name = "";
+                    var speed = 0;
+                    if (type == "multiplayer") {
+                        name = child.getNode("sim").getNode("model").getNode("path").getValue();
+                    }
+                    if (type == "carrier") {
+                        callsign = child.getNode("sign").getValue();
+                        name = child.getNode("name").getValue();
+                        speed = velocities.getNode("speed-kts").getValue();
+                    } else {
+                        callsign = child.getNode("callsign").getValue();
+                        speed = velocities.getNode("true-airspeed-kt").getValue();
+                    }
+
+                    geoJSON.features.push({
+                        "type" : "Feature",
+                        "geometry" : {
+                            "type" : "Point",
+                            "coordinates" : [
+                                    lon, lat, alt.toFixed(0)
+                            ],
+                        },
+                        "id" : id,
+                        "properties" : {
+                            "type" : type,
+                            "heading" : heading.toFixed(0),
+                            "speed" : speed.toFixed(0),
+                            "callsign" : callsign,
+                            "name" : name,
+                        },
+                    });
+
+                });
+            });
+
+            return geoJSON;
+        },
+
+    });
+
+    leaflet.aiLayer = function(options) {
+        return new leaflet.AILayer(null, options);
+    }
+
+}));

webgui/topics/Map/MapIcons.js

@@ -0,0 +1,40 @@
+(function(factory) {
+    if (typeof define === "function" && define.amd) {
+        // AMD. Register as an anonymous module.
+        define([
+            'leaflet'
+        ], factory);
+    } else {
+        // Browser globals
+        factory(L);
+    }
+}(function(leaflet) {
+
+    function SquareIcon(w, url) {
+        return leaflet.icon({
+            iconSize : [
+                    w, w
+            ],
+            iconAnchor : [
+                    w / 2, w / 2
+            ],
+            popupAnchor : [
+                    0, w / 2 - 2
+            ],
+            iconUrl : url,
+        })
+    }
+
+    var MAP_ICON = {};
+    MAP_ICON["VOR"] = SquareIcon(30, 'images/vor.svg');
+    MAP_ICON["NDB"] = SquareIcon(30, 'images/ndb.svg');
+    MAP_ICON["dme"] = SquareIcon(30, 'images/dme.svg');
+    MAP_ICON["airport-paved"] = SquareIcon(30, 'images/airport-paved.svg');
+    MAP_ICON["airport-unpaved"] = SquareIcon(30, 'images/airport-unpaved.svg');
+    MAP_ICON["airport-unknown"] = SquareIcon(30, 'images/airport-unknown.svg');
+    MAP_ICON["arp"] = SquareIcon(30, 'images/arp.svg');
+    MAP_ICON["aircraft"] = SquareIcon(20, 'images/aircraft.svg');
+
+    return MAP_ICON;
+}));
+

webgui/topics/Map/NavdbLayer.js

@@ -2,40 +2,15 @@
     if (typeof define === "function" && define.amd) {
         // AMD. Register as an anonymous module.
         define([
-            'leaflet'
+            'leaflet','./MapIcons'
         ], factory);
     } else {
         // Browser globals
         factory();
     }
-}(function() {
+}(function(leaflet,MAP_ICON) {
 
-    function SquareIcon(w, url) {
+    leaflet.NavdbLayer = leaflet.GeoJSON.extend({
-        return L.icon({
-            iconSize : [
-                    w, w
-            ],
-            iconAnchor : [
-                    w / 2, w / 2
-            ],
-            popupAnchor : [
-                    0, w / 2 - 2
-            ],
-            iconUrl : url,
-        })
-    }
-
-    var MAP_ICON = {};
-    MAP_ICON["VOR"] = SquareIcon(30, 'images/vor.svg');
-    MAP_ICON["NDB"] = SquareIcon(30, 'images/ndb.svg');
-    MAP_ICON["dme"] = SquareIcon(30, 'images/dme.svg');
-    MAP_ICON["airport-paved"] = SquareIcon(30, 'images/airport-paved.svg');
-    MAP_ICON["airport-unpaved"] = SquareIcon(30, 'images/airport-unpaved.svg');
-    MAP_ICON["airport-unknown"] = SquareIcon(30, 'images/airport-unknown.svg');
-    MAP_ICON["arp"] = SquareIcon(30, 'images/arp.svg');
-    MAP_ICON["aircraft"] = SquareIcon(20, 'images/aircraft.svg');
-
-    L.NavdbLayer = L.GeoJSON.extend({
         options : {
             pointToLayer : function(feature, latlng) {
                 var options = {
@@ -68,7 +43,7 @@
                     }
                 }
 
-                return new L.RotatedMarker(latlng, options);
+                return new leaflet.RotatedMarker(latlng, options);
             },
 
             onEachFeature : function(feature, layer) {
@@ -82,6 +57,8 @@
                     layer.bindPopup(popupString, {
                         maxHeight : 200
                     });
+                    if( feature.properties.metar ) {
+                    }
                 }
             },
 
@@ -125,14 +102,14 @@
         },
 
         onAdd : function(map) {
-            L.GeoJSON.prototype.onAdd.call(this, map);
+            leaflet.GeoJSON.prototype.onAdd.call(this, map);
             this.dirty = true;
             this.update(++this.updateId);
         },
 
         onRemove : function(map) {
             this.updateId++;
-            L.GeoJSON.prototype.onRemove.call(this, map);
+            leaflet.GeoJSON.prototype.onRemove.call(this, map);
         },
 
         invalidate : function() {
@@ -190,7 +167,7 @@
 
     });
 
-    L.navdbLayer = function(options) {
+    leaflet.navdbLayer = function(options) {
-        return new L.NavdbLayer(null, options);
+        return new leaflet.NavdbLayer(null, options);
     }
 }));

webgui/widgets/map.js

@@ -51,6 +51,14 @@ define(
                         53.5, 10.0
                 ], MapOptions.zoom || 13);
 
+                if( params && params.on ) {
+                    for ( var p in params.on ) {
+                        var h = params.on[p];
+                        if( typeof(h) === 'function' )
+                            self.map.on(p,h);
+                    }
+                }
+
                 var baseLayers = {
                     "OpenStreetMaps" : new leaflet.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                         maxZoom : 18,