Phi: better aircraft icon on map widget
This commit is contained in:
Torsten Dreyer
parent
2cf3ed4c0c
commit
d96b7097f5
2 changed files with 183 additions and 97 deletions
31
webgui/widgets/map.html
Normal file
31
webgui/widgets/map.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -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 © <a href="http://openstreetmap.org">OpenStreetMap</a> 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 © <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>°</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(), {
|
||||
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 = "<p id='aircraft-label'>
|
||||
* heading:" + s.heading + "° 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 : " ", // no html required
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue