Phi: better aircraft icon on map widget

webgui/widgets/map.html

@@ -0,0 +1,31 @@
+<style>
+.aircraft-marker-icon {
+	background-color: rgba(255, 255, 255, 0);
+}
+
+.aircraft-marker-icon path {
+	fill: #00ff00;
+}
+
+.aircraft-marker-popup .leaflet-popup-tip {
+	display: none;
+}
+
+.aircraft-marker-popup .leaflet-popup-content-wrapper {
+	background-color: rgba(255, 255, 255, 0.50);
+}
+
+.aircraft-marker-popup .leaflet-popup-content {
+	margin: 5px 5px;
+}
+
+.aircraft-marker {
+	float: left;
+	color: #00ff00;
+	text-shadow: 1px 1px #404040;
+}
+
+.aircraft-marker span {
+	padding-left: 0.5em;
+}
+</style>

webgui/widgets/map.js

@@ -1,12 +1,27 @@
-define([
+define(
-        'knockout', 'jquery', 'leaflet'
+        [
-], function(ko, jquery, leaflet) {
+                'knockout', 'jquery', 'leaflet', 'text!./map.html'
+        ],
+        function(ko, jquery, leaflet, htmlString) {
 
             function ViewModel(params, componentInfo) {
                 var self = this;
 
                 self.element = componentInfo.element;
                 self.followAircraft = ko.observable(true);
+
+                self.altitude = ko.observable(0).extend({
+                    fgprop : 'altitude'
+                });
+
+                self.tas = ko.observable(0).extend({
+                    fgprop : 'airspeed'
+                });
+
+                self.heading = ko.observable(0).extend({
+                    fgprop : 'heading'
+                });
+
                 $(self.element).height($(self.element).width());
 
                 self.map = leaflet.map(self.element).setView([
@@ -30,31 +45,71 @@ define([
                     }
                 });
 
-        var aircraftMarker = new L.RotatedMarker(self.map.getCenter(), {
+                L.AircraftMarker = L.RotatedMarker
-            angle : 45,
+                        .extend({
-            icon : L.icon({
+                            options : {
+                                angle : 0,
+                                clickable : false,
+                                keyboard : false,
+                                icon : L
+                                        .divIcon({
                                             iconSize : [
                                                     60, 60
                                             ],
                                             iconAnchor : [
                                                     30, 30
                                             ],
-                popupAncor : [
+                                            className : 'aircraft-marker-icon',
-                        0, -32
+                                            html : '<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"><path d="M250.2,59.002c11.001,0,20.176,9.165,20.176,20.777v122.24l171.12,95.954v42.779l-171.12-49.501v89.227l40.337,29.946v35.446l-60.52-20.18-60.502,20.166v-35.45l40.341-29.946v-89.227l-171.14,49.51v-42.779l171.14-95.954v-122.24c0-11.612,9.15-20.777,20.16-20.777z" fill="#808080" stroke="black" stroke-width="5"/></svg>',
-                ],
-                iconUrl : "images/aircraft.svg",
                                         }),
                                 zIndexOffset : 10000,
+                                updateInterval : 100,
+                            },
+
+                            initialize : function(latlng, options) {
+                                L.RotatedMarker.prototype.initialize(latlng, options);
+                                L.Util.setOptions(this, options);
+                            },
+
+                            onAdd : function(map) {
+                                L.RotatedMarker.prototype.onAdd.call(this, map);
+                                this.popup = L.popup({
+                                    autoPan : false,
+                                    keepInView : false,
+                                    closeButton : false,
+                                    className : 'aircraft-marker-popup',
+                                    closeOnClick : false,
+                                    maxWidth : 200,
+                                    minWidth : 100,
+                                    offset : [
+                                            30, 30
+                                    ],
+                                }, this);
+                                this.popup
+                                        .setContent('<div class="aircraft-marker aircraft-marker-altitude"><span data-bind="text: altitude().toFixed(0)"></span>ft</div>'
+                                                + '<div class="aircraft-marker aircraft-marker-heading"><span data-bind="text: heading().toFixed(0)"></span>&deg</div>'
+                                                + '<div class="aircraft-marker aircraft-marker-tas"><span data-bind="text: tas().toFixed(0)"></span>kt</div><div style="clear: both"/>');
+                                this.bindPopup(this.popup);
+                                this.addTo(this._map);
+                                this.openPopup();
+                            },
+
+                            onRemove : function(map) {
+                                if (this.timeoutid != null)
+                                    clearTimeout(this.timeoutid);
+                                L.RotatedMarker.prototype.onRemove.call(this, map);
+                            },
+
                         });
 
+                L.aircraftMarker = function(latlng, options) {
+                    return new L.AircraftMarker(latlng, options);
+                }
+
+                var aircraftMarker = L.aircraftMarker(self.map.getCenter());
+
                 aircraftMarker.addTo(self.map);
-        /*
+
-         * aircraftMarker.setState = function(s) { var latlng = new
-         * L.LatLng(s.lat, s.lon); aircraftMarker.options.angle = s.heading;
-         * aircraftMarker.setLatLng(latlng); var label = "<p id='aircraft-label'>
-         * heading:" + s.heading + "&deg; GS: " + s.speed + "kt</p>";
-         * aircraftMarker.bindPopup(label); info.update(s); };
-         */
                 self.latitude = ko.observable(0).extend({
                     fgprop : 'latitude'
                 });
@@ -101,6 +156,6 @@ define([
                         return new ViewModel(params, componentInfo);
                     },
                 },
-        template : "&nbsp;", // no html required
+                template : htmlString,
             };
-});
+        });