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 {

52
Phi/widgets/map.js
View file

@ -3,13 +3,12 @@ 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 : {
clickable : false, draggable : true,
clickable : true,
keyboard : false, keyboard : false,
zIndexOffset : 10000, zIndexOffset : 10000,
}, },
@ -24,12 +23,34 @@ define(
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;
});
}, },
}); });
@ -39,7 +60,6 @@ define(
} }
} }
function ViewModel(params, componentInfo) { function ViewModel(params, componentInfo) {
var self = this; var self = this;
@ -95,7 +115,9 @@ define(
} }
var baseLayers = { var baseLayers = {
"OpenStreetMaps" : new leaflet.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { "OpenStreetMaps" : new leaflet.TileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom : 18, maxZoom : 18,
attribution : 'Map data &copy; <a target="_blank" href="http://openstreetmap.org">OpenStreetMap</a> contributors' attribution : 'Map data &copy; <a target="_blank" href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}) })
@ -131,7 +153,9 @@ define(
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,12 +182,12 @@ define(
}); });
self.position.subscribe(function(newValue) { self.position.subscribe(function(newValue) {
if (!aircraftMarker.isDragging)
aircraftMarker.setLatLng(newValue); 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());