Config option for tile layers.

See: https://github.com/freifunkhamburg/ffffng/issues/23

Gruntfile.js

@@ -342,6 +342,12 @@ module.exports = function (grunt) {
                             'fonts/*'
                         ]
                     },
+                    {
+                        expand: true,
+                        cwd: '<%= yeoman.app %>/bower_components/leaflet-dist/images',
+                        dest: '<%= yeoman.dist %>/client/styles/images',
+                        src: ['*.png']
+                    },
                     {
                         expand: true,
                         cwd: '.tmp/images',

app/scripts/directives/nodeForm.js

@@ -29,20 +29,9 @@ angular.module('ffffng')
                 zoom: config.coordsSelector.defaultZoom
             },
             markers: {},
+            hasMultipleLayers: _.size(config.coordsSelector.layers) > 1,
             layers: {
-                baselayers: {
+                baselayers: config.coordsSelector.layers
-                    osm: {
-                        name: 'MapQuest (OSM)',
-                        url: 'https://otile{s}-s.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg',
-                        type: 'xyz',
-                        layerOptions: {
-                            subdomains: '1234',
-                            attribution:
-                                'Tiles &copy; <a href=\"https://www.mapquest.com/\" target=\"_blank\">MapQuest</a>, ' +
-                                'Data CC-BY-SA OpenStreetMap'
-                        }
-                    }
-                }
             }
         };
 

app/styles/views/directives/_nodeForm.scss

@@ -123,9 +123,25 @@ f-node-form {
         margin-top: 5px;
         margin-bottom: 20px;
 
-        .leaflet-control-layers.leaflet-control {
+        &.map-hide-layers-control .leaflet-control-layers.leaflet-control {
             display: none;
         }
+
+        // reset styling from bootstrap as it breaks the layer control
+        .leaflet-control-layers {
+            input {
+                display: initial;
+                border: initial;
+                box-shadow: initial;
+                width: initial;
+                height: initial;
+            }
+
+            input, label {
+                margin: initial;
+                padding: initial;
+            }
+        }
     }
 
     .buttons {

app/views/directives/nodeForm.html

@@ -59,7 +59,7 @@
                 </div>
                 <div class="col-md-8">
                     <leaflet
-                        class="map"
+                        class="map" ng-class="{'map-hide-layers-control' : !map.hasMultipleLayers }"
                         center="map.center"
                         layers="map.layers"
                         markers="map.markers"

config.json.example

@@ -51,7 +51,8 @@
         "coordsSelector": {
             "lat": 53.565278,
             "lng": 10.001389,
-            "defaultZoom": 10
+            "defaultZoom": 10,
+            "layers": {}
         },
         "otherCommunityInfo": {
             "showInfo": true,

server/config.js

@@ -109,7 +109,8 @@ var defaultConfig = {
             localCommunityPolygon: [],
             lat: 53.565278,
             lng: 10.001389,
-            defaultZoom: 10
+            defaultZoom: 10,
+            layers: {}
         }
     }
 };