fly/fgdata
1
0
Fork 0
Code Activity

Phi: Enable reposition by dragging aircraft symbol

Browse source 
porting over existing functionality from the old map
This commit is contained in:
Torsten Dreyer 2015-09-27 20:39:47 +02:00
parent eea0f43b80
commit 14079c5b7d
2 changed files with 78 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Phi/widgets/map.html
View file

@ -8,6 +8,7 @@
height: 60px; height: 60px;
margin-left: -30px; margin-left: -30px;
margin-top: -30px; margin-top: -30px;
cursor: move;
} }
.you-aircraft-marker-icon path { .you-aircraft-marker-icon path {

130
Phi/widgets/map.js
View file

@ -2,43 +2,63 @@ define(
[ [
'knockout', 'jquery', 'leaflet', 'text!./map.html' 'knockout', 'jquery', 'leaflet', 'text!./map.html'
], ],
function(ko, jquery, leaflet, htmlString ) { function(ko, jquery, leaflet, htmlString) {
//TODO: Don't extend Marker but Icon
if( !L.AircraftMarker ) { if (!L.AircraftMarker) {
L.AircraftMarker = L.Marker L.AircraftMarker = L.Marker.extend({
.extend({ options : {
options : { draggable : true,
clickable : false, clickable : true,
keyboard : false, keyboard : false,
zIndexOffset : 10000, zIndexOffset : 10000,
}, },
initialize : function(latlng, options) { initialize : function(latlng, options) {
var extraIconClass = ''; var extraIconClass = '';
if( options && options.className ) { if (options && options.className) {
extraIconClass = ' ' + options.className; extraIconClass = ' ' + options.className;
} }
L.Marker.prototype.initialize(latlng, options); L.Marker.prototype.initialize(latlng, options);
L.Util.setOptions(this, options); L.Util.setOptions(this, options);
this.setIcon( L.divIcon({ this.setIcon(L.divIcon({
iconSize: null, iconSize : null,
className : 'aircraft-marker-icon' + extraIconClass, className : 'aircraft-marker-icon' + extraIconClass,
html : html : '<div data-bind="component: { ' + 'name: \'AircraftMarker\', '
'<div data-bind="component: { ' + + 'params: { rotate: heading, label: labelLines } ' + '}"></div>',
'name: \'AircraftMarker\', ' + }));
'params: { rotate: heading, label: labelLines } ' +
'}"></div>',
}));
},
this.isDragging = false;
this.on('dragstart', function(evt) {
evt.target.isDragging = true;
}); });
this.on('dragend', function(evt) {
var pos = evt.target.getLatLng();
var props = {
name : "position",
children : [
{
name : "latitude-deg",
value : pos.lat,
}, {
name : "longitude-deg",
value : pos.lng,
},
],
};
$.post("/json/", JSON.stringify(props));
evt.target.isDragging = false;
});
},
});
L.aircraftMarker = function(latlng, options) { L.aircraftMarker = function(latlng, options) {
return new L.AircraftMarker(latlng, options); return new L.AircraftMarker(latlng, options);
} }
} }
function ViewModel(params, componentInfo) { function ViewModel(params, componentInfo) {
var self = this; var self = this;
@ -48,11 +68,11 @@ define(
self.toggleFollowAircraft = function(a) { self.toggleFollowAircraft = function(a) {
self.followAircraft(!self.followAircraft()); self.followAircraft(!self.followAircraft());
if( self.followAircraft() ) { if (self.followAircraft()) {
self.map.setView(self.mapCenter()); self.map.setView(self.mapCenter());
} }
} }
self.altitude = ko.observable(0).extend({ self.altitude = ko.observable(0).extend({
fgprop : 'altitude' fgprop : 'altitude'
}); });
@ -72,7 +92,7 @@ define(
var MapOptions = { var MapOptions = {
attributionControl : false, attributionControl : false,
dragging: false, dragging : false,
}; };
if (params && params.map) { if (params && params.map) {
@ -86,23 +106,25 @@ define(
53.5, 10.0 53.5, 10.0
], MapOptions.zoom || 13); ], MapOptions.zoom || 13);
if( params && params.on ) { if (params && params.on) {
for ( var p in params.on ) { for ( var p in params.on) {
var h = params.on[p]; var h = params.on[p];
if( typeof(h) === 'function' ) if (typeof (h) === 'function')
self.map.on(p,h); self.map.on(p, h);
} }
} }
var baseLayers = { var baseLayers = {
"OpenStreetMaps" : new leaflet.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { "OpenStreetMaps" : new leaflet.TileLayer(
maxZoom : 18, 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution : 'Map data &copy; <a target="_blank" href="http://openstreetmap.org">OpenStreetMap</a> contributors' {
}) maxZoom : 18,
attribution : 'Map data &copy; <a target="_blank" href="http://openstreetmap.org">OpenStreetMap</a> contributors'
})
} }
self.map.addLayer(baseLayers["OpenStreetMaps"]); self.map.addLayer(baseLayers["OpenStreetMaps"]);
if (params && params.hasFollowAircraft ) { if (params && params.hasFollowAircraft) {
self.map.on('dragstart', function(e) { self.map.on('dragstart', function(e) {
self.followAircraft(false); self.followAircraft(false);
}); });
@ -121,17 +143,19 @@ define(
L.control.layers(baseLayers, params.overlays).addTo(self.map); L.control.layers(baseLayers, params.overlays).addTo(self.map);
} }
if( params && params.selectedOverlays && params.overlays ) { if (params && params.selectedOverlays && params.overlays) {
params.selectedOverlays.forEach(function(ovl) { params.selectedOverlays.forEach(function(ovl) {
params.overlays[ovl].addTo(self.map); params.overlays[ovl].addTo(self.map);
}); });
} }
if (params && params.scale) { if (params && params.scale) {
L.control.scale(params.scale).addTo(self.map); L.control.scale(params.scale).addTo(self.map);
} }
var aircraftMarker = L.aircraftMarker(self.map.getCenter(), { className: 'you-aircraft-marker-icon' }); var aircraftMarker = L.aircraftMarker(self.map.getCenter(), {
className : 'you-aircraft-marker-icon'
});
aircraftMarker.addTo(self.map); aircraftMarker.addTo(self.map);
@ -158,17 +182,17 @@ define(
}); });
self.position.subscribe(function(newValue) { self.position.subscribe(function(newValue) {
aircraftMarker.setLatLng(newValue); if (!aircraftMarker.isDragging)
aircraftMarker.setLatLng(newValue);
}); });
self.labelLines = [ self.labelLines = [
'You', 'You', ko.pureComputed(function() {
ko.pureComputed(function() { var h = Math.round(self.heading());
var h = Math.round(self.heading()); var t = Math.round(self.tas());
var t = Math.round(self.tas()); var a = Math.round(self.altitude());
var a = Math.round(self.altitude()); return '' + h + "T " + t + "KTAS " + a + "ft";
return '' + h + "T " + t + "KTAS " + a + "ft"; }),
}),
]; ];
self.mapCenter = ko.pureComputed(function() { self.mapCenter = ko.pureComputed(function() {
@ -192,7 +216,7 @@ define(
}); });
var center = leaflet.latLng(self.latitude(), self.longitude()); var center = leaflet.latLng(self.latitude(), self.longitude());
self.map.setView( center ); self.map.setView(center);
aircraftMarker.setLatLng(center); aircraftMarker.setLatLng(center);
} }