Phi: Enable reposition by dragging aircraft symbol
porting over existing functionality from the old map
This commit is contained in:
parent
eea0f43b80
commit
14079c5b7d
2 changed files with 78 additions and 53 deletions
|
@ -8,6 +8,7 @@
|
|||
height: 60px;
|
||||
margin-left: -30px;
|
||||
margin-top: -30px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.you-aircraft-marker-icon path {
|
||||
|
|
|
@ -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 © <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());
|
||||
|
|
Loading…
Reference in a new issue