Remove layer control, cleanup map scope and fix updating issue.

app/scripts/directives/nodeForm.js

@@ -18,7 +18,7 @@ angular.module('ffffng')
         var monitoringConfirmed = $scope.node.monitoringConfirmed;
 
         $scope.config = config;
-        angular.extend($scope, {
+        $scope.map = {
             center: {
                 lat: config.coordsSelector.lat,
                 lng: config.coordsSelector.lng,
@@ -41,10 +41,10 @@ angular.module('ffffng')
                     }
                 }
             }
-        });
+        };
 
         if (config.otherCommunityInfo.showBorderForDebugging) {
-            $scope.paths = {
+            $scope.map.paths = {
                 border: {
                     color: '#ff0000',
                         weight: 3,
@@ -67,7 +67,7 @@ angular.module('ffffng')
         };
 
         var updateNodePosition = function (lat, lng) {
-            $scope.markers.node = {
+            $scope.map.markers.node = {
                 lat: lat,
                 lng: lng,
                 focus: true,
@@ -104,7 +104,7 @@ angular.module('ffffng')
         }
 
         $scope.updateMap = function (optCoords) {
-            var coords = optCoords || $scope.coords;
+            var coords = optCoords || $scope.node.coords;
             withValidCoords(coords, function (lat, lng) {
                 updateNodePosition(lat, lng);
             });
@@ -112,7 +112,7 @@ angular.module('ffffng')
 
         $scope.resetCoords = function () {
             $scope.node.coords = '';
-            $scope.markers = {};
+            $scope.map.markers = {};
         };
 
         $scope.constraints = Constraints.node;

app/styles/views/directives/_nodeForm.scss

@@ -122,6 +122,10 @@ f-node-form {
         padding-bottom: 66%;
         margin-top: 5px;
         margin-bottom: 20px;
+
+        .leaflet-control-layers.leaflet-control {
+            display: none;
+        }
     }
 
     .buttons {

app/views/directives/nodeForm.html

@@ -42,14 +42,28 @@
                         an die Stelle, wo Dein Knoten erscheinen soll. Durch erneutes Klicken kannst Du die Position jederzeit
                         anpassen.
                     </p>
-                    <input type="text" id="coords" name="coords" class="{{node.coords ? 'has-coords' : ''}}" placeholder="z. B. {{config.coordsSelector.lat}} {{config.coordsSelector.lng}}" ng-model="node.coords" ng-pattern="constraints.coords.regex" ng-required="!constraints.coords.optional" ng-blur="updateMap" />
+                    <input
+                        type="text"
+                        id="coords"
+                        name="coords"
+                        class="{{node.coords ? 'has-coords' : ''}}"
+                        placeholder="z. B. {{config.coordsSelector.lat}} {{config.coordsSelector.lng}}"
+                        ng-model="node.coords"
+                        ng-pattern="constraints.coords.regex"
+                        ng-required="!constraints.coords.optional"
+                        ng-change="updateMap()" />
                     <i class="reset-coords" ng-if="node.coords" ng-click="resetCoords()"></i>
                     <span class="feedback" ng-if="hasError('coords')">
                         Bitte gib die Koordinaten wie folgt an, Beispiel: {{config.coordsSelector.lat}} {{config.coordsSelector.lng}}
                     </span>
                 </div>
                 <div class="col-md-8">
-                    <leaflet class="map" center="center" layers="layers" markers="markers" paths="paths"></leaflet>
+                    <leaflet
+                        class="map"
+                        center="map.center"
+                        layers="map.layers"
+                        markers="map.markers"
+                        paths="map.paths"></leaflet>
                 </div>
             </div>
         </div>