Phi: Add map option to disable repositioning own aircraft by dragging

Phi/images/dragAircraft.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="100%"
+   height="100%"
+   viewBox="0 0 602.7666 602.76654"
+   preserveAspectRatio="xMinYMin"
+   version="1.1"
+   id="svg549"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs545" />
+  <path
+     d="m 301.38847,133.46865 c 9.5105,0 17.44243,7.92326 17.44243,17.96199 v 105.67803 l 147.93541,82.95344 v 36.983 L 318.8309,334.25087 v 77.13787 l 34.87184,25.8887 v 30.64352 L 301.38242,450.4751 249.07768,467.90885 V 437.26187 L 283.953,411.37319 V 334.2353 L 136.00027,377.03733 V 340.05434 L 283.953,257.10089 V 151.42285 c 0,-10.03872 7.91028,-17.96198 17.42856,-17.96198 z"
+     fill="black"
+     stroke="#000000"
+     stroke-width="7.14836"
+     id="path547" />
+  <path
+     style="fill:#000000"
+     id="path920"
+     d="m -267.15117,202.05013 -53.15947,0 -53.15947,-1e-5 26.57974,-46.03745 26.57973,-46.03745 26.57974,46.03745 z"
+     transform="translate(621.69393,-109.97522)" />
+  <path
+     style="fill:#000000"
+     id="path920-6"
+     d="m -267.15117,202.05013 -53.15947,0 -53.15947,-1e-5 26.57974,-46.03745 26.57973,-46.03745 26.57974,46.03745 z"
+     transform="rotate(-90,-64.451163,45.524057)" />
+  <path
+     style="fill:#000000"
+     id="path920-6-7"
+     d="m -267.15117,202.05013 -53.15947,0 -53.15947,-1e-5 26.57974,-46.03745 26.57973,-46.03745 26.57974,46.03745 z"
+     transform="rotate(90,45.523838,667.21797)" />
+  <path
+     style="fill:#000000"
+     id="path920-3"
+     d="m -267.15117,202.05013 -53.15947,0 -53.15947,-1e-5 26.57974,-46.03745 26.57973,-46.03745 26.57974,46.03745 z"
+     transform="rotate(180,-9.4636728,356.37089)" />
+</svg>

Phi/topics/Map.html

@@ -18,5 +18,6 @@
     overlays: overlays,
     selectedOverlays: selectedOverlays,
     hasFollowAircraft: true,
+    hasToggleOwnAircraftDrag: true,
     scale: { metric: false }
   }}"></div>

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;

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 = '<img src="images/followAircraft.svg" title="Center Map on Aircraft Position" data-bind="css: { mapOptionEnabled: followAircraft() }, click: toggleFollowAircraft"/>';
                         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 = '<img src="images/dragAircraft.svg" title="Allow dragging own aircraft" data-bind="css: { mapOptionEnabled: dragOwnAircraft() }, click: toggleDragOwnAircraft"/>';
+                        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)
+                    if (!self.aircraftMarker.isDragging)
-                        aircraftMarker.setLatLng(newValue);
+                        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() {