nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

set maptile default to OpenMapSurfer

Browse source 
- refactor code for toggle map function
- adjust jasmine tests for maps and add tests for SPV
- change name of access token in defaults.yml according to naming conventions
- add explanation of map use for podmins
- add location to post_presenter
- fix opening multiple maps inside the stream when clicking on a reshare location
(#5813)
This commit is contained in:
realtin 2015-08-24 12:15:45 +02:00
parent e5cc8dff0e
commit 57b7c05c4f
10 changed files with 127 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/javascripts/app/views/location_stream.js
View file

@ -15,17 +15,23 @@ app.views.LocationStream = app.views.Content.extend({
mapContainer.css("height", "150px");
if (location.lat) {
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);
// If the mapbox option is enabled in the defaults the mapbox tiles with the podmin's credentials are used.
// If mapbox is not enabled the OpenMapSurfer tiles 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='https://www.mapbox.com'>Mapbox</a>"
: "<a href='http://korona.geog.uni-heidelberg.de/contact.html'>OpenMapSurfer</a>";
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>, " +
"Imagery © <a href='http://mapbox.com'>Mapbox</a>";
"Imagery © "+ tileAttribution;
var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 14);
L.tileLayer(tileLayerSource, {
id: mapsource.id,
accessToken: mapsource.access_token,
attribution: attribution,
maxZoom: 18,
id: gon.appConfig.map.mapbox.id,
accessToken: gon.appConfig.map.mapbox.accessToken
}).addTo(map);
var markerOnMap = L.marker(location).addTo(map);
@ -33,11 +39,7 @@ app.views.LocationStream = app.views.Content.extend({
return map;
}
} else {
if (mapContainer.css("display") === "none") {
mapContainer.css("display", "block");
} else {
mapContainer.css("display", "none");
}
mapContainer.toggle();
}
}
}

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

@ -36,17 +36,24 @@ app.views.SinglePostContent = app.views.Base.extend({
// get location data and render map
var location = this.model.get("location");
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], 14);
// If the mapbox option is enabled in the defaults the mapbox tiles with the podmin's credentials are used.
// If mapbox is not enabled the OpenMapSurfer tiles 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='https://www.mapbox.com'>Mapbox</a>"
: "<a href='http://korona.geog.uni-heidelberg.de/contact.html'>OpenMapSurfer</a>";
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>, " +
"Imagery © <a href='http://mapbox.com'>Mapbox</a>";
"Imagery © "+ tileAttribution;
var map = L.map(mapContainer[0]).setView([location.lat, location.lng], 14);
L.tileLayer(tileLayerSource, {
id: mapsource.id,
accessToken: mapsource.access_token,
attribution: attribution,
maxZoom: 18,
id: gon.appConfig.map.mapbox.id,
accessToken: gon.appConfig.map.mapbox.accessToken
}).addTo(map);
// set mapContainer size to a smaller preview size
@ -56,18 +63,14 @@ app.views.SinglePostContent = app.views.Base.extend({
// put marker on map
var markerOnMap = L.marker(location).addTo(map);
return map;
};
}
},
toggleMap: function () {
if (gon.appConfig.map.enabled){
if (this.$el.find(".mapContainer").css("height") === "75px") {
this.$el.find(".mapContainer").css("height", "200px");
this.$el.find(".leaflet-control-zoom").css("display", "block");
} else {
this.$el.find(".mapContainer").css("height", "75px");
this.$el.find(".leaflet-control-zoom").css("display", "none");
}
$(".mapContainer").height($(".small-map")[0] ? 200 : 50);
$(".leaflet-control-zoom").css("display", $(".small-map")[0] ? "block" : "none");
$(".mapContainer").toggleClass("small-map");
}
},

4
app/assets/stylesheets/single-post-view.scss
View file

@ -28,7 +28,9 @@
font-size: 12px;
margin: 10px 20px 0px 15px;
}
.mapContainer {
margin: 10px 20px 0px 15px;
}
.row.reshare {
border-top: 1px solid lighten($border-grey,5%);
padding-top: 10px;

2
app/assets/templates/single-post-viewer/single-post-content_tpl.jst.hbs
View file

@ -71,8 +71,8 @@
<div class="row">
<div class='near-from'>
{{t "publisher.near_from" location=location.address}}
<div class="mapContainer"></div>
</div>
<div class="mapContainer small-map"></div>
</div>
{{/if}}
{{#if root}}

3
app/presenters/post_presenter.rb
View file

@ -31,8 +31,7 @@ class PostPresenter < BasePresenter
photos: build_photos_json,
root: root,
title: title,
address: @post.address,
coordinates: @post.coordinates,
location: @post.post_location,
poll: @post.poll,
already_participated_in_poll: already_participated_in_poll,
participation: participate?,

5
config/defaults.yml
View file

@ -78,8 +78,9 @@ defaults:
map:
enabled: true
mapbox:
id: 'zaziemo.mpn66kn8'
accessToken: 'pk.eyJ1IjoiemF6aWVtbyIsImEiOiI3ODVjMzVjNmM2ZTU3YWM3YTE5YWYwMTRhODljM2M1MSJ9.-nVgyS4PLnV4m9YkvMB5wA'
enabled: false
id: "zaziemo.mpn66kn8"
access_token: "pk.eyJ1IjoiemF6aWVtbyIsImEiOiI3ODVjMzVjNmM2ZTU3YWM3YTE5YWYwMTRhODljM2M1MSJ9.-nVgyS4PLnV4m9YkvMB5wA"
privacy:
jquery_cdn: false
google_analytics_key:

17
config/diaspora.yml.example
View file

@ -324,16 +324,21 @@ 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.
## 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.
map: ##Section
# enable: true
# enable: false
# mapbox:
# enable: false
# id: 'your.id'
# accessToken: 'youraccesstoken'
# access_token: 'youraccesstoken'
## Settings potentially affecting the privacy of your users.
privacy: ## Section

28
spec/javascripts/app/views/location_stream_spec.js
View file

@ -1,38 +1,42 @@
describe("app.views.LocationMap", function() {
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" }} };
});
describe("toggleMap", function() {
context("with location provided", function() {
beforeEach(function(){
this.post.set({location : factory.location()}); // set location
this.view.render();
console.log(this.view.$el.find(".mapContainer")[0]);
spec.content().html(this.view.render().el); // loads html element to the page
});
it("should contain a map container", function() {
expect(this.view.$el[0]).toContainElement(".mapContainer");
expect(spec.content()).toContainElement(".mapContainer");
});
it("should initialize map", function() {
expect(this.view.$el.find(".mapContainer")[0]).toHaveClass("empty");
expect($(".mapContainer")).toHaveClass("empty");
this.view.toggleMap();
expect(this.view.$el.find(".mapContainer")[0]).not.toHaveClass("empty");
expect($(".mapContainer")).not.toHaveClass("empty");
});
/*
* does not work .. not sure why
it("should change display status on every click", function() {
expect(this.view.$el.find(".mapContainer")[0]).toHaveCss({display: "block"});
this.view.toggleMap();
expect(this.view.$el.find(".mapContainer")[0]).toHaveCss({display: "none"});
expect($(".mapContainer")).toHaveCss({display: "block"});
this.view.toggleMap();
expect($(".mapContainer")).toHaveCss({display: "none"});
});
*/
}),
context("without location provided", function() {
beforeEach(function(){
spec.content().html(this.view.render().el);
});
it("should not initialize the map", function() {
expect(this.view.$el[0]).not.toContainElement(".mapContainer");
expect(spec.content()).not.toContainElement(".mapContainer");
});
});
});

50
spec/javascripts/app/views/single_post_content_view_spec.js Normal file
View file

@ -0,0 +1,50 @@
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" }} };
});
describe("toggleMap", function() {
context("with location provided", function() {
beforeEach(function(){
this.post.set({location : factory.location()}); // set location
spec.content().html(this.view.render().el); // loads html element to the page
});
it("should contain a map container", function() {
expect(spec.content()).toContainElement(".mapContainer");
});
it("should provide a small map", function() {
expect($(".mapContainer")).toHaveClass("small-map");
expect($(".mapContainer").height() < 100).toBeTruthy();
expect($(".mapContainer")).toBeVisible();
});
it("should toggle class small-map on every click", function(){
this.view.toggleMap();
expect($(".mapContainer")).not.toHaveClass("small-map");
this.view.toggleMap();
expect($(".mapContainer")).toHaveClass("small-map");
});
it("should change height on every click", function() {
this.view.toggleMap();
expect($(".mapContainer").height() > 100).toBeTruthy();
this.view.toggleMap();
expect($(".mapContainer").height() < 100).toBeTruthy();
});
}),
context("without location provided", function() {
beforeEach(function(){
spec.content().html(this.view.render().el);
});
it("should not initialize the map", function() {
expect(spec.content()).not.toContainElement(".mapContainer");
});
});
});
});

28
spec/models/reshare_spec.rb
View file

@ -292,24 +292,24 @@ describe Reshare, type: :model do
end
describe "#post_location" do
let(:status_message) { build(:status_message, text: "This is a status_message", author: bob.person, public: true) }
let(:reshare) { create(:reshare, root: status_message) }
let(:status_message) { build(:status_message, text: "This is a status_message", author: bob.person, public: true) }
let(:reshare) { create(:reshare, root: status_message) }
context "with location" do
let(:location) { build(:location) }
context "with location" do
let(:location) { build(:location) }
it "should deliver address and coordinates" do
status_message.location = location
expect(reshare.post_location).to include(address: location.address, lat: location.lat, lng: location.lng)
it "should deliver address and coordinates" do
status_message.location = location
expect(reshare.post_location).to include(address: location.address, lat: location.lat, lng: location.lng)
end
end
end
context "without location" do
it "should deliver empty address and coordinates" do
expect(reshare.post_location[:address]).to be_nil
expect(reshare.post_location[:lat]).to be_nil
expect(reshare.post_location[:lng]).to be_nil
context "without location" do
it "should deliver empty address and coordinates" do
expect(reshare.post_location[:address]).to be_nil
expect(reshare.post_location[:lat]).to be_nil
expect(reshare.post_location[:lng]).to be_nil
end
end
end
end
end