From d96b7097f595db9f5ba03bdddb56b95903e0c397 Mon Sep 17 00:00:00 2001 From: Torsten Dreyer Date: Fri, 13 Feb 2015 16:24:41 +0100 Subject: [PATCH] Phi: better aircraft icon on map widget --- webgui/widgets/map.html | 31 +++++ webgui/widgets/map.js | 249 ++++++++++++++++++++++++---------------- 2 files changed, 183 insertions(+), 97 deletions(-) create mode 100644 webgui/widgets/map.html diff --git a/webgui/widgets/map.html b/webgui/widgets/map.html new file mode 100644 index 000000000..e1b40d080 --- /dev/null +++ b/webgui/widgets/map.html @@ -0,0 +1,31 @@ + \ No newline at end of file diff --git a/webgui/widgets/map.js b/webgui/widgets/map.js index 064e1871f..bf5eeeb07 100644 --- a/webgui/widgets/map.js +++ b/webgui/widgets/map.js @@ -1,106 +1,161 @@ -define([ - 'knockout', 'jquery', 'leaflet' -], function(ko, jquery, leaflet) { +define( + [ + 'knockout', 'jquery', 'leaflet', 'text!./map.html' + ], + function(ko, jquery, leaflet, htmlString) { - function ViewModel(params, componentInfo) { - var self = this; + function ViewModel(params, componentInfo) { + var self = this; - self.element = componentInfo.element; - self.followAircraft = ko.observable(true); - $(self.element).height($(self.element).width()); + self.element = componentInfo.element; + self.followAircraft = ko.observable(true); - self.map = leaflet.map(self.element).setView([ - 53.5, 10.0 - ], 13); + self.altitude = ko.observable(0).extend({ + fgprop : 'altitude' + }); - var osmLayer = new leaflet.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - maxZoom : 18, - attribution : 'Map data © OpenStreetMap contributors' - }); - self.map.addLayer(osmLayer); + self.tas = ko.observable(0).extend({ + fgprop : 'airspeed' + }); - L.RotatedMarker = L.Marker.extend({ - options : { - angle : 0 - }, + self.heading = ko.observable(0).extend({ + fgprop : 'heading' + }); - _setPos : function(pos) { - L.Marker.prototype._setPos.call(this, pos); - this._icon.style[L.DomUtil.TRANSFORM] += ' rotate(' + this.options.angle + 'deg)'; + $(self.element).height($(self.element).width()); + + 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 © OpenStreetMap 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 : '', + }), + 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('
ft
' + + '
°
' + + '
kt
'); + 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(), { - angle : 45, - icon : L.icon({ - iconSize : [ - 60, 60 - ], - iconAnchor : [ - 30, 30 - ], - popupAncor : [ - 0, -32 - ], - iconUrl : "images/aircraft.svg", - }), - zIndexOffset : 10000, + // Return component definition + return { + viewModel : { + createViewModel : function(params, componentInfo) { + return new ViewModel(params, componentInfo); + }, + }, + template : htmlString, + }; }); - - 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 = "

- * heading:" + s.heading + "° GS: " + s.speed + "kt

"; - * 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 : " ", // no html required - }; -});