1
0
Fork 0

Phi: Enable reposition by dragging aircraft symbol

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

View file

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

View file

@ -3,13 +3,12 @@ define(
'knockout', 'jquery', 'leaflet', 'text!./map.html'
],
function(ko, jquery, leaflet, htmlString) {
//TODO: Don't extend Marker but Icon
if (!L.AircraftMarker) {
L.AircraftMarker = L.Marker
.extend({
L.AircraftMarker = L.Marker.extend({
options : {
clickable : false,
draggable : true,
clickable : true,
keyboard : false,
zIndexOffset : 10000,
},
@ -24,12 +23,34 @@ define(
this.setIcon(L.divIcon({
iconSize : null,
className : 'aircraft-marker-icon' + extraIconClass,
html :
'<div data-bind="component: { ' +
'name: \'AircraftMarker\', ' +
'params: { rotate: heading, label: labelLines } ' +
'}"></div>',
html : '<div data-bind="component: { ' + '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) {
var self = this;
@ -95,7 +115,9 @@ define(
}
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,
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);
}
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);
@ -158,12 +182,12 @@ define(
});
self.position.subscribe(function(newValue) {
if (!aircraftMarker.isDragging)
aircraftMarker.setLatLng(newValue);
});
self.labelLines = [
'You',
ko.pureComputed(function() {
'You', ko.pureComputed(function() {
var h = Math.round(self.heading());
var t = Math.round(self.tas());
var a = Math.round(self.altitude());