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 index b105a74c4..e2345f985 100644 --- 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 © OpenStreetMap contributors, " + + "rendering " + + "GIScience Research Group @ Heidelberg University", + 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 © OpenStreetMap contributors, " + - "rendering " + - "GIScience Research Group @ Heidelberg University", + "CC-BY-SA, " + + "Imagery © Mapbox", 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 © OpenStreetMap contributors, " + - "CC-BY-SA, " + - "Imagery © Mapbox", - 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 index 645e86a31..caa13128c 100644 --- 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(){