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.
This commit is contained in:
zaziemo 2015-09-09 17:03:46 +02:00
parent 0f3eff8f88
commit 263dc6f119
7 changed files with 67 additions and 63 deletions

View file

@ -7,7 +7,6 @@ app.views.LocationStream = app.views.Content.extend({
templateName: "status-message-location", templateName: "status-message-location",
toggleMap: function () { toggleMap: function () {
if (gon.appConfig.map.enabled){
var mapContainer = this.$el.find(".mapContainer"); var mapContainer = this.$el.find(".mapContainer");
if (mapContainer.hasClass("empty")) { if (mapContainer.hasClass("empty")) {
@ -15,26 +14,31 @@ app.views.LocationStream = app.views.Content.extend({
mapContainer.css("height", "150px"); 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 ? "<a href='http://creativecommons.org/licenses/by-sa/2.0/''>CC-BY-SA</a>, " +
"Imagery © <a href='https://www.mapbox.com'>Mapbox</a>"
: "rendering <a href='http://giscience.uni-hd.de/'>" +
"GIScience Research Group @ Heidelberg University</a>";
var attribution = "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> 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, var tiles = L.tileLayer("http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}", {
accessToken: mapsource.access_token, attribution: "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
attribution: attribution, "rendering <a href='http://giscience.uni-hd.de/'>" +
"GIScience Research Group @ Heidelberg University</a>",
maxZoom: 18, 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 &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);
var markerOnMap = L.marker(location).addTo(map); var markerOnMap = L.marker(location).addTo(map);
mapContainer.removeClass("empty"); mapContainer.removeClass("empty");
@ -44,6 +48,5 @@ app.views.LocationStream = app.views.Content.extend({
mapContainer.toggle(); mapContainer.toggle();
} }
} }
}
}); });
// @license-end // @license-end

View file

@ -27,7 +27,7 @@ app.views.SinglePostContent = app.views.Base.extend({
}, },
map : function(){ 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 // find and set height of mapContainer to max size of the container
// which is necessary to have all necessary tiles prerendered // 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 // get location data and render map
var location = this.model.get("location"); 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 map function is enabled the maptiles from the Heidelberg University are used by default.
// 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 ? "<a href='http://creativecommons.org/licenses/by-sa/2.0/''>CC-BY-SA</a>, " +
"Imagery © <a href='https://www.mapbox.com'>Mapbox</a>"
: "rendering <a href='http://giscience.uni-hd.de/'>" +
"GIScience Research Group @ Heidelberg University</a>";
var attribution = "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> 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, var tiles = L.tileLayer("http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}", {
accessToken: mapsource.access_token, attribution: "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
attribution: attribution, "rendering <a href='http://giscience.uni-hd.de/'>" +
"GIScience Research Group @ Heidelberg University</a>",
maxZoom: 18, 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 &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 // set mapContainer size to a smaller preview size
mapContainer.css("height", "75px"); mapContainer.css("height", "75px");
@ -68,11 +74,9 @@ app.views.SinglePostContent = app.views.Base.extend({
}, },
toggleMap: function () { toggleMap: function () {
if (gon.appConfig.map.enabled){
$(".mapContainer").height($(".small-map")[0] ? 200 : 50); $(".mapContainer").height($(".small-map")[0] ? 200 : 50);
$(".leaflet-control-zoom").css("display", $(".small-map")[0] ? "block" : "none"); $(".leaflet-control-zoom").css("display", $(".small-map")[0] ? "block" : "none");
$(".mapContainer").toggleClass("small-map"); $(".mapContainer").toggleClass("small-map");
}
}, },
presenter : function() { presenter : function() {

View file

@ -146,7 +146,7 @@ class ApplicationController < ActionController::Base
gon.push(appConfig: { gon.push(appConfig: {
chat: {enabled: AppConfig.chat.enabled?}, 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} map: {mapbox: AppConfig.map.mapbox}
}) })
end end

View file

@ -76,7 +76,6 @@ defaults:
file: 'log/vines.log' file: 'log/vines.log'
level: 'info' level: 'info'
map: map:
enabled: true
mapbox: mapbox:
enabled: false enabled: false
id: id:

View file

@ -325,17 +325,15 @@ configuration: ## Section
#level: 'info' #level: 'info'
## Displays the location of a post in a map. Per default we are using the map ## 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/). ## tiles of the Heidelberg University (http://giscience.uni-hd.de).
## If you want to use them you only have to enable the map. You also have the ## You also have the possibility to use the map tiles of https://www.mapbox.com
## possibility to use the map tiles of https://www.mapbox.com which is probably ## which is probably more reliable. There you have to create an account to get
## more reliable. There you have to create a account to get an ID and an access token which is limited. If ## an ID and an access token which is limited. If you want to get an unlimited
## you want to get an unlimited account you can write an email ## account you can write an email to team@diasporafoundation.org.
## to team@diasporafoundation.org. Please enable mapbox and fill out your id ## Please enable mapbox and fill out your id and access_token.
## and access_token.
map: ##Section map: ##Section
# enabled: true mapbox:
# mapbox:
# enabled: false # enabled: false
# id: 'your.id' # id: 'your.id'
# access_token: 'youraccesstoken' # access_token: 'youraccesstoken'

View file

@ -2,7 +2,7 @@ describe("app.views.LocationStream", function() {
beforeEach(function(){ beforeEach(function(){
this.post = factory.post(); this.post = factory.post();
this.view = new app.views.LocationStream({model : this.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() { describe("toggleMap", function() {

View file

@ -2,7 +2,7 @@ describe("app.views.SinglePostContent", function() {
beforeEach(function(){ beforeEach(function(){
this.post = factory.post(); this.post = factory.post();
this.view = new app.views.SinglePostContent({model : this.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() { describe("toggleMap", function() {