From 263dc6f119344b64c690ab4f85ff94a11c756fe5 Mon Sep 17 00:00:00 2001 From: zaziemo Date: Wed, 9 Sep 2015 17:03:46 +0200 Subject: [PATCH] refactor code that choses the tile server based on podmin's choice and remove the possibility to disable the map feature. By default the application uses the itles of Heidelberg University that don't need any credentials. If podmins enable the mapbox option in the diaspora.yml and enter their credentials the mapbox tiles are used for the map rendering. --- .../javascripts/app/views/location_stream.js | 65 ++++++++++--------- .../single_post_content_view.js | 42 ++++++------ app/controllers/application_controller.rb | 2 +- config/defaults.yml | 1 - config/diaspora.yml.example | 16 ++--- .../app/views/location_stream_spec.js | 2 +- .../views/single_post_content_view_spec.js | 2 +- 7 files changed, 67 insertions(+), 63 deletions(-) diff --git a/app/assets/javascripts/app/views/location_stream.js b/app/assets/javascripts/app/views/location_stream.js index 63f7a6560..eb140f054 100644 --- a/app/assets/javascripts/app/views/location_stream.js +++ b/app/assets/javascripts/app/views/location_stream.js @@ -7,43 +7,46 @@ app.views.LocationStream = app.views.Content.extend({ templateName: "status-message-location", toggleMap: function () { - if (gon.appConfig.map.enabled){ - var mapContainer = this.$el.find(".mapContainer"); + var mapContainer = this.$el.find(".mapContainer"); - if (mapContainer.hasClass("empty")) { - var location = this.model.get("location"); - mapContainer.css("height", "150px"); + if (mapContainer.hasClass("empty")) { + var location = this.model.get("location"); + mapContainer.css("height", "150px"); - if (location.lat) { + if (location.lat) { + // If map function is enabled the maptiles from the Heidelberg University are used by default. - // If the mapbox option is enabled in the diaspora.yml, the mapbox tiles with the podmin's credentials are used. - // If mapbox is not enabled the Maptiles from the Heidelberg University are used, which don't need credentials. - var mapsource = gon.appConfig.map.mapbox.enabled ? gon.appConfig.map.mapbox : ""; - var tileLayerSource = mapsource ? "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}" - : "http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}"; - var tileAttribution = mapsource ? "CC-BY-SA, " + - "Imagery © Mapbox" - : "rendering " + - "GIScience Research Group @ Heidelberg University"; - var attribution = "Map data © OpenStreetMap contributors, " + - tileAttribution; + var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 14); - var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 14); - L.tileLayer(tileLayerSource, { - id: mapsource.id, - accessToken: mapsource.access_token, - attribution: attribution, + 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, + accessToken: gon.appConfig.map.mapbox.access_token, + attribution: "Map data © OpenStreetMap contributors, " + + "CC-BY-SA, " + + "Imagery © Mapbox", maxZoom: 18, - }).addTo(map); + }); + } - var markerOnMap = L.marker(location).addTo(map); - mapContainer.removeClass("empty"); - return map; - } - } else { - mapContainer.toggle(); - } + tiles.addTo(map); + + var markerOnMap = L.marker(location).addTo(map); + mapContainer.removeClass("empty"); + return map; } - } + } else { + mapContainer.toggle(); + } + } }); // @license-end 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 a5d1c8679..6cfbb9528 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,7 +27,7 @@ app.views.SinglePostContent = app.views.Base.extend({ }, map : function(){ - if (this.$el.find(".mapContainer")&&gon.appConfig.map.enabled){ + if (this.$el.find(".mapContainer")){ // find and set height of mapContainer to max size of the container // which is necessary to have all necessary tiles prerendered @@ -37,25 +37,31 @@ app.views.SinglePostContent = app.views.Base.extend({ // get location data and render map var location = this.model.get("location"); - // If the mapbox option is enabled in the diaspora.yml, the mapbox tiles with the podmin's credentials are used. - // If mapbox is not enabled the Maptiles from the Heidelberg University are used, which don't need credentials. - var mapsource = gon.appConfig.map.mapbox.enabled ? gon.appConfig.map.mapbox : ""; - var tileLayerSource = mapsource ? "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}" - : "http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}"; - var tileAttribution = mapsource ? "CC-BY-SA, " + - "Imagery © Mapbox" - : "rendering " + - "GIScience Research Group @ Heidelberg University"; - var attribution = "Map data © OpenStreetMap contributors, " + - tileAttribution; + // 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); - L.tileLayer(tileLayerSource, { - id: mapsource.id, - accessToken: mapsource.access_token, - attribution: attribution, + + 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, - }).addTo(map); + }); + + // 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, + accessToken: gon.appConfig.map.mapbox.access_token, + 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"); @@ -68,11 +74,9 @@ app.views.SinglePostContent = app.views.Base.extend({ }, toggleMap: function () { - if (gon.appConfig.map.enabled){ $(".mapContainer").height($(".small-map")[0] ? 200 : 50); $(".leaflet-control-zoom").css("display", $(".small-map")[0] ? "block" : "none"); $(".mapContainer").toggleClass("small-map"); - } }, presenter : function() { diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index e4e081656..19010ca93 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -146,7 +146,7 @@ class ApplicationController < ActionController::Base gon.push(appConfig: { chat: {enabled: AppConfig.chat.enabled?}, settings: {podname: AppConfig.settings.pod_name}, - map: {enabled: AppConfig.map.enabled?, mapbox: AppConfig.map.mapbox} + map: {mapbox: AppConfig.map.mapbox} }) end diff --git a/config/defaults.yml b/config/defaults.yml index c876a2fa1..2f6382e64 100644 --- a/config/defaults.yml +++ b/config/defaults.yml @@ -76,7 +76,6 @@ defaults: file: 'log/vines.log' level: 'info' map: - enabled: true mapbox: enabled: false id: diff --git a/config/diaspora.yml.example b/config/diaspora.yml.example index f72fdf370..3be3478c9 100644 --- a/config/diaspora.yml.example +++ b/config/diaspora.yml.example @@ -325,17 +325,15 @@ configuration: ## Section #level: 'info' ## Displays the location of a post in a map. Per default we are using the map - ## tiles of OpenMapSurfer (http://korona.geog.uni-heidelberg.de/). - ## If you want to use them you only have to enable the map. You also have the - ## possibility to use the map tiles of https://www.mapbox.com which is probably - ## more reliable. There you have to create a account to get an ID and an access token which is limited. If - ## you want to get an unlimited account you can write an email - ## to team@diasporafoundation.org. Please enable mapbox and fill out your id - ## and access_token. + ## tiles of the Heidelberg University (http://giscience.uni-hd.de). + ## You also have the possibility to use the map tiles of https://www.mapbox.com + ## which is probably more reliable. There you have to create an account to get + ## an ID and an access token which is limited. If you want to get an unlimited + ## account you can write an email to team@diasporafoundation.org. + ## Please enable mapbox and fill out your id and access_token. map: ##Section - # enabled: true - # mapbox: + mapbox: # enabled: false # id: 'your.id' # access_token: 'youraccesstoken' diff --git a/spec/javascripts/app/views/location_stream_spec.js b/spec/javascripts/app/views/location_stream_spec.js index fe87ea478..54513b996 100644 --- a/spec/javascripts/app/views/location_stream_spec.js +++ b/spec/javascripts/app/views/location_stream_spec.js @@ -2,7 +2,7 @@ describe("app.views.LocationStream", function() { beforeEach(function(){ this.post = factory.post(); this.view = new app.views.LocationStream({model : this.post}); - gon.appConfig = { map: {enabled: true, mapbox: {enabled: true, id: "yourID", access_token: "yourAccessToken" }} }; + gon.appConfig = {map: { mapbox: {enabled: true, id: "yourID", access_token: "yourAccessToken" }}}; }); describe("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 b38c38b78..688891f96 100644 --- a/spec/javascripts/app/views/single_post_content_view_spec.js +++ b/spec/javascripts/app/views/single_post_content_view_spec.js @@ -2,7 +2,7 @@ describe("app.views.SinglePostContent", function() { beforeEach(function(){ this.post = factory.post(); this.view = new app.views.SinglePostContent({model : this.post}); - gon.appConfig = { map: {enabled: true, mapbox: {enabled: true, id: "yourID", accessToken: "yourAccessToken" }} }; + gon.appConfig = { map: {mapbox: {enabled: true, id: "yourID", accessToken: "yourAccessToken" }}}; }); describe("toggleMap", function() {