Fix console error for map in SPV

diaspora · Oct 5, 2015 · e4a850f · e4a850f
1 parent b805ef4
commit e4a850f
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 37 deletions.
diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js
@@ -27,52 +27,51 @@ app.views.SinglePostContent = app.views.Base.extend({
   },
 
   map : function(){
-    if (this.$el.find(".mapContainer")){
+    if (this.$(".mapContainer").length < 1){ return; }
 
-      // find and set height of mapContainer to max size of the container
-      // which is necessary to have all necessary tiles prerendered
-      var mapContainer = this.$el.find(".mapContainer");
-      mapContainer.css("height", "200px");
+    // find and set height of mapContainer to max size of the container
+    // which is necessary to have all necessary tiles prerendered
+    var mapContainer = this.$(".mapContainer");
+    mapContainer.css("height", "200px");
 
-      // get location data and render map
-      var location = this.model.get("location");
+    // get location data and render map
+    var location = this.model.get("location");
 
-      // If map function is enabled the maptiles from the Heidelberg University are used by default.
+    // If map function is enabled the maptiles from the Heidelberg University are used by default.
 
-      var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 14);
+    var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 14);
 
-      var tiles = L.tileLayer("http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}", {
+    var tiles = L.tileLayer("http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}", {
+      attribution: "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
+                    "rendering <a href='http://giscience.uni-hd.de/'>" +
+                    "GIScience Research Group @ Heidelberg University</a>",
+      maxZoom: 18,
+    });
+
+    // If the mapbox option is enabled in the diaspora.yml, the mapbox tiles with the podmin's credentials are used.
+    if (gon.appConfig.map.mapbox.enabled) {
+
+      tiles = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
+        id: gon.appConfig.map.mapbox.id,
+        /* jshint camelcase: false */
+        accessToken: gon.appConfig.map.mapbox.access_token,
+        /* jshint camelcase: true */
         attribution: "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
-                      "rendering <a href='http://giscience.uni-hd.de/'>" +
-                      "GIScience Research Group @ Heidelberg University</a>",
+                     "<a href='http://creativecommons.org/licenses/by-sa/2.0/''>CC-BY-SA</a>, " +
+                     "Imagery © <a href='https://www.mapbox.com'>Mapbox</a>",
         maxZoom: 18,
       });
-
-      // If the mapbox option is enabled in the diaspora.yml, the mapbox tiles with the podmin's credentials are used.
-      if (gon.appConfig.map.mapbox.enabled) {
-
-        tiles = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
-          id: gon.appConfig.map.mapbox.id,
-          /* jshint camelcase: false */
-          accessToken: gon.appConfig.map.mapbox.access_token,
-          /* jshint camelcase: true */
-          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>, " +
-                       "Imagery © <a href='https://www.mapbox.com'>Mapbox</a>",
-          maxZoom: 18,
-        });
-      }
-
-      tiles.addTo(map);
-
-      // set mapContainer size to a smaller preview size
-      mapContainer.css("height", "75px");
-      map.invalidateSize();
-
-      // put marker on map
-      L.marker(location).addTo(map);
-      return map;
     }
+
+    tiles.addTo(map);
+
+    // set mapContainer size to a smaller preview size
+    mapContainer.css("height", "75px");
+    map.invalidateSize();
+
+    // put marker on map
+    L.marker(location).addTo(map);
+    return map;
   },
 
   toggleMap: function () {

diff --git a/spec/javascripts/app/views/single_post_content_view_spec.js b/spec/javascripts/app/views/single_post_content_view_spec.js
@@ -5,6 +5,34 @@ describe("app.views.SinglePostContent", function() {
     gon.appConfig = { map: {mapbox: {enabled: true, id: "yourID", accessToken: "yourAccessToken" }}};
   });
 
+  describe("map", function() {
+    context("with location provided", function() {
+      beforeEach(function(){
+        this.post.set({location : factory.location()});
+        spec.content().html(this.view.render().el);
+        gon.appConfig = { map: {mapbox: {enabled: false }}};
+      });
+
+      it("initializes the leaflet map", function() {
+        spyOn(L, "map").and.callThrough();
+        this.view.map();
+        expect(L.map).toHaveBeenCalled();
+      });
+    });
+
+    context("without location provided", function() {
+      beforeEach(function(){
+        spec.content().html(this.view.render().el);
+      });
+
+      it("doesn't initialize the leaflet map", function() {
+        spyOn(L, "map");
+        this.view.map();
+        expect(L.map).not.toHaveBeenCalled();
+      });
+    });
+  });
+
   describe("toggleMap", function() {
     context("with location provided", function() {
       beforeEach(function(){