outsource map credentials

and allow podmin to enable and disable the feature
(#5813)

app/assets/javascripts/app/views/location_stream.js

@@ -7,35 +7,37 @@ app.views.LocationStream = app.views.Content.extend({
   templateName: "status-message-location",
 
   toggleMap: function () {
-    var mapContainer = this.$el.find(".mapContainer");
+    if (gon.appConfig.map.enabled){
+      var mapContainer = this.$el.find(".mapContainer");
 
-    if (mapContainer.hasClass("empty")) {
+      if (mapContainer.hasClass("empty")) {
-      var location = this.model.get("location");
+        var location = this.model.get("location");
-      mapContainer.css("height", "150px");
+        mapContainer.css("height", "150px");
 
-      if (location.lat) {
+        if (location.lat) {
-        var tileLayerSource = "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}";
+          var tileLayerSource = "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}";
-        var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 16);
+          var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 16);
-        var attribution = "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
+          var attribution = "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
-                          "<a href='http://creativecommons.org/licenses/by-sa/2.0/''>CC-BY-SA</a>, " +
+                            "<a href='http://creativecommons.org/licenses/by-sa/2.0/''>CC-BY-SA</a>, " +
-                          "Imagery © <a href='http://mapbox.com'>Mapbox</a>";
+                            "Imagery © <a href='http://mapbox.com'>Mapbox</a>";
 
-        L.tileLayer(tileLayerSource, {
+          L.tileLayer(tileLayerSource, {
-          attribution:  attribution,
+            attribution:  attribution,
-          maxZoom: 18,
+            maxZoom: 18,
-          id: "zaziemo.mpn66kn8",
+            id: gon.appConfig.map.mapbox.id,
-          accessToken: "pk.eyJ1IjoiemF6aWVtbyIsImEiOiI3ODVjMzVjNmM2ZTU3YWM3YTE5YWYwMTRhODljM2M1MSJ9.-nVgyS4PLnV4m9YkvMB5wA"
+            accessToken: gon.appConfig.map.mapbox.accessToken
-        }).addTo(map);
+          }).addTo(map);
 
-        var markerOnMap = L.marker(location).addTo(map);
+          var markerOnMap = L.marker(location).addTo(map);
-        mapContainer.removeClass("empty");
+          mapContainer.removeClass("empty");
-        return map;
+          return map;
-      }
+        }
-    } else {
+      } else {
-        if (mapContainer.css("display") === "none") {
+          if (mapContainer.css("display") === "none") {
-        mapContainer.css("display", "block");
+          mapContainer.css("display", "block");
-        } else {
+          } else {
-          mapContainer.css("display", "none");
+            mapContainer.css("display", "none");
+          }
         }
       }
     }

app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js

@@ -27,7 +27,7 @@ app.views.SinglePostContent = app.views.Base.extend({
   },
 
   map : function(){
-    if (this.$el.find(".mapContainer")){
+    if (this.$el.find(".mapContainer")&&gon.appConfig.map.enabled){
 
       // find and set height of mapContainer to max size of the container
       // which is necessary to have all necessary tiles prerendered
@@ -45,8 +45,8 @@ app.views.SinglePostContent = app.views.Base.extend({
       L.tileLayer(tileLayerSource, {
         attribution:  attribution,
         maxZoom: 18,
-        id: "zaziemo.mpn66kn8",
+        id: gon.appConfig.map.mapbox.id,
-        accessToken: "pk.eyJ1IjoiemF6aWVtbyIsImEiOiI3ODVjMzVjNmM2ZTU3YWM3YTE5YWYwMTRhODljM2M1MSJ9.-nVgyS4PLnV4m9YkvMB5wA"
+        accessToken: gon.appConfig.map.mapbox.accessToken
       }).addTo(map);
 
       // set mapContainer size to a smaller preview size
@@ -56,16 +56,18 @@ app.views.SinglePostContent = app.views.Base.extend({
       // put marker on map
       var markerOnMap = L.marker(location).addTo(map);
       return map;
-    };
+      };
   },
 
   toggleMap: function () {
-    if (this.$el.find(".mapContainer").css("height") === "75px") {
+    if (gon.appConfig.map.enabled){
-      this.$el.find(".mapContainer").css("height", "200px");
+      if (this.$el.find(".mapContainer").css("height") === "75px") {
-      this.$el.find(".leaflet-control-zoom").css("display", "block");
+        this.$el.find(".mapContainer").css("height", "200px");
-    } else {
+        this.$el.find(".leaflet-control-zoom").css("display", "block");
-        this.$el.find(".mapContainer").css("height", "75px");
+      } else {
-        this.$el.find(".leaflet-control-zoom").css("display", "none");
+          this.$el.find(".mapContainer").css("height", "75px");
+          this.$el.find(".leaflet-control-zoom").css("display", "none");
+      }
     }
   },
 

app/controllers/application_controller.rb

@@ -145,7 +145,8 @@ class ApplicationController < ActionController::Base
   def gon_set_appconfig
     gon.push(appConfig: {
                chat:     {enabled: AppConfig.chat.enabled?},
-               settings: {podname: AppConfig.settings.pod_name}
+               settings: {podname: AppConfig.settings.pod_name},
+               map:      {enabled: AppConfig.map.enabled?, mapbox: AppConfig.map.mapbox}
              })
   end
 

config/defaults.yml

@@ -75,6 +75,11 @@ defaults:
       log:
         file: 'log/vines.log'
         level: 'info'
+  map:
+    enabled: true
+    mapbox:
+      id: 'zaziemo.mpn66kn8'
+      accessToken: 'pk.eyJ1IjoiemF6aWVtbyIsImEiOiI3ODVjMzVjNmM2ZTU3YWM3YTE5YWYwMTRhODljM2M1MSJ9.-nVgyS4PLnV4m9YkvMB5wA'
   privacy:
     jquery_cdn: false
     google_analytics_key:

config/diaspora.yml.example

@@ -324,6 +324,17 @@ configuration: ## Section
         ## The debug level logs all XML sent and received by the server.
         #level: 'info'
 
+  ## Displaying location of posts in a map. We are using the map tiles of
+  ## https://www.mapbox.com. There you have to create a account to get and ID
+  ## and an access token. If you want to use this feature you can write an email
+  ## to team@diasporafoundation.org and you'll get an unlimited and free account.
+  map: ##Section
+
+  # enable: true
+  # mapbox:
+    # id: 'your.id'
+    # accessToken: 'youraccesstoken'
+
   ## Settings potentially affecting the privacy of your users.
   privacy: ## Section