diff --git a/Phi/images/dragAircraft.svg b/Phi/images/dragAircraft.svg new file mode 100644 index 000000000..a6778053e --- /dev/null +++ b/Phi/images/dragAircraft.svg @@ -0,0 +1,39 @@ + + + + + + + + + diff --git a/Phi/topics/Map.html b/Phi/topics/Map.html index c92c0a621..cf18e0af1 100644 --- a/Phi/topics/Map.html +++ b/Phi/topics/Map.html @@ -18,5 +18,6 @@ overlays: overlays, selectedOverlays: selectedOverlays, hasFollowAircraft: true, + hasToggleOwnAircraftDrag: true, scale: { metric: false } }}"> diff --git a/Phi/widgets/map.html b/Phi/widgets/map.html index 9fc397b9a..6a5e29c54 100644 --- a/Phi/widgets/map.html +++ b/Phi/widgets/map.html @@ -62,7 +62,7 @@ padding-left: 0.5em; } -.followAircraft { +.mapOption { background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); border-radius: 5px; diff --git a/Phi/widgets/map.js b/Phi/widgets/map.js index 9839f238e..2637c1e95 100644 --- a/Phi/widgets/map.js +++ b/Phi/widgets/map.js @@ -149,13 +149,24 @@ define( var followAircraftControl = L.control(); followAircraftControl.onAdd = function(map) { - this._div = L.DomUtil.create('div', 'followAircraft'); + this._div = L.DomUtil.create('div', 'mapOption'); this._div.innerHTML = ''; return this._div; } followAircraftControl.addTo(self.map); } + if (params && params.hasToggleOwnAircraftDrag) { + var ownAircraftDragControl = L.control(); + + ownAircraftDragControl.onAdd = function(map) { + this._div = L.DomUtil.create('div', 'mapOption'); + this._div.innerHTML = ''; + return this._div; + } + ownAircraftDragControl.addTo(self.map); + } + if (params && params.overlays) { L.control.layers(baseLayers, params.overlays).addTo(self.map); } @@ -173,11 +184,11 @@ define( L.control.scale(params.scale).addTo(self.map); } - var aircraftMarker = L.aircraftMarker(self.map.getCenter(), { + self.aircraftMarker = L.aircraftMarker(self.map.getCenter(), { className : 'you-aircraft-marker-icon' }); - aircraftMarker.addTo(self.map); + self.aircraftMarker.addTo(self.map); var aircraftTrack = L.polyline([], { color : 'red' @@ -202,8 +213,8 @@ define( }); self.position.subscribe(function(newValue) { - if (!aircraftMarker.isDragging) - aircraftMarker.setLatLng(newValue); + if (!self.aircraftMarker.isDragging) + self.aircraftMarker.setLatLng(newValue); }); self.labelLines = [ @@ -237,7 +248,16 @@ define( var center = leaflet.latLng(self.latitude(), self.longitude()); self.map.setView(center); - aircraftMarker.setLatLng(center); + self.aircraftMarker.setLatLng(center); + + // Enable/disable own aircraft dragging + self.dragOwnAircraft = ko.observable(true); + + self.toggleDragOwnAircraft = function(a) { + self.dragOwnAircraft(!self.dragOwnAircraft()); + self.dragOwnAircraft() ? self.aircraftMarker.dragging.enable() : self.aircraftMarker.dragging.disable(); + } + } ViewModel.prototype.dispose = function() {