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,106 +1,161 @@
-define([
+define(
-        'knockout', 'jquery', 'leaflet'
+        [
-], function(ko, jquery, leaflet) {
+                'knockout', 'jquery', 'leaflet', 'text!./map.html'
+        ],
+        function(ko, jquery, leaflet, htmlString) {
 
-    function ViewModel(params, componentInfo) {
+            function ViewModel(params, componentInfo) {
-        var self = this;
+                var self = this;
 
-        self.element = componentInfo.element;
+                self.element = componentInfo.element;
-        self.followAircraft = ko.observable(true);
+                self.followAircraft = ko.observable(true);
-        $(self.element).height($(self.element).width());
 
-        self.map = leaflet.map(self.element).setView([
+                self.altitude = ko.observable(0).extend({
-                53.5, 10.0
+                    fgprop : 'altitude'
-        ], 13);
+                });
 
-        var osmLayer = new leaflet.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                self.tas = ko.observable(0).extend({
-            maxZoom : 18,
+                    fgprop : 'airspeed'
-            attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
+                });
-        });
-        self.map.addLayer(osmLayer);
 
-        L.RotatedMarker = L.Marker.extend({
+                self.heading = ko.observable(0).extend({
-            options : {
+                    fgprop : 'heading'
-                angle : 0
+                });
-            },
 
-            _setPos : function(pos) {
+                $(self.element).height($(self.element).width());
-                L.Marker.prototype._setPos.call(this, pos);
+
-                this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
+                self.map = leaflet.map(self.element).setView([
+                        53.5, 10.0
+                ], 13);
+
+                var osmLayer = new leaflet.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                    maxZoom : 18,
+                    attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
+                });
+                self.map.addLayer(osmLayer);
+
+                L.RotatedMarker = L.Marker.extend({
+                    options : {
+                        angle : 0
+                    },
+
+                    _setPos : function(pos) {
+                        L.Marker.prototype._setPos.call(this, pos);
+                        this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)';
+                    }
+                });
+
+                L.AircraftMarker = L.RotatedMarker
+                        .extend({
+                            options : {
+                                angle : 0,
+                                clickable : false,
+                                keyboard : false,
+                                icon : L
+                                        .divIcon({
+                                            iconSize : [
+                                                    60, 60
+                                            ],
+                                            iconAnchor : [
+                                                    30, 30
+                                            ],
+                                            className : 'aircraft-marker-icon',
+                                            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>',
+                                        }),
+                                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);
+
+                self.latitude = ko.observable(0).extend({
+                    fgprop : 'latitude'
+                });
+
+                self.longitude = ko.observable(0).extend({
+                    fgprop : 'longitude'
+                });
+
+                self.heading = ko.observable(0).extend({
+                    fgprop : 'heading'
+                });
+
+                self.position = ko.computed(function() {
+                    return leaflet.latLng(self.latitude(), self.longitude());
+                }).extend({
+                    rateLimit : 200
+                });
+
+                self.position.subscribe(function(newValue) {
+                    aircraftMarker.setLatLng(newValue);
+                });
+
+                self.heading.subscribe(function(newValue) {
+                    aircraftMarker.options.angle = newValue;
+                });
+
+                self.mapCenter = ko.computed(function() {
+                    return leaflet.latLng(self.latitude(), self.longitude());
+                }).extend({
+                    rateLimit : 2000
+                });
+
+                self.mapCenter.subscribe(function(newValue) {
+                    if (self.followAircraft()) {
+                        self.map.setView(newValue);
+                    }
+                });
             }
-        });
 
-        var aircraftMarker = new L.RotatedMarker(self.map.getCenter(), {
+            // Return component definition
-            angle : 45,
+            return {
-            icon : L.icon({
+                viewModel : {
-                iconSize : [
+                    createViewModel : function(params, componentInfo) {
-                        60, 60
+                        return new ViewModel(params, componentInfo);
-                ],
+                    },
-                iconAnchor : [
+                },
-                        30, 30
+                template : htmlString,
-                ],
+            };
-                popupAncor : [
-                        0, -32
-                ],
-                iconUrl : "images/aircraft.svg",
-            }),
-            zIndexOffset : 10000,
         });
-
-        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'
-        });
-
-        self.longitude = ko.observable(0).extend({
-            fgprop : 'longitude'
-        });
-
-        self.heading = ko.observable(0).extend({
-            fgprop : 'heading'
-        });
-
-        self.position = ko.computed(function() {
-            return leaflet.latLng(self.latitude(), self.longitude());
-        }).extend({
-            rateLimit : 200
-        });
-
-        self.position.subscribe(function(newValue) {
-            aircraftMarker.setLatLng(newValue);
-        });
-
-        self.heading.subscribe(function(newValue) {
-            aircraftMarker.options.angle = newValue;
-        });
-
-        self.mapCenter = ko.computed(function() {
-            return leaflet.latLng(self.latitude(), self.longitude());
-        }).extend({
-            rateLimit : 2000
-        });
-
-        self.mapCenter.subscribe(function(newValue) {
-            if (self.followAircraft()) {
-                self.map.setView(newValue);
-            }
-        });
-    }
-
-    // Return component definition
-    return {
-        viewModel : {
-            createViewModel : function(params, componentInfo) {
-                return new ViewModel(params, componentInfo);
-            },
-        },
-        template : "&nbsp;", // no html required
-    };
-});