add a different map representation to the SPV

so a small map is rendered in the SPV and a location is provided
via toggling the map gets bigger

(#5813)

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

@@ -1,7 +1,11 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
 
 app.views.SinglePostContent = app.views.Base.extend({
-  templateName: "single-post-viewer/single-post-content",
+  events: {
+    "click .near-from": "toggleMap"
+  },
+
+  templateName: 'single-post-viewer/single-post-content',
   tooltipSelector: "time, .post_scope",
 
   subviews : {
@@ -10,7 +14,6 @@ app.views.SinglePostContent = app.views.Base.extend({
     "#real-post-content" : "postContentView",
     ".oembed" : "oEmbedView",
     ".opengraph" : "openGraphView",
-    ".status-message-location" : "postLocationStreamView",
     '.poll': 'pollView',
   },
 
@@ -23,8 +26,47 @@ app.views.SinglePostContent = app.views.Base.extend({
     this.pollView = new app.views.Poll({ model: this.model });
   },
 
-  postLocationStreamView : function(){
-    return new app.views.LocationStream({ model : this.model});
+  map : function(){
+    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
+      var mapContainer = this.$el.find(".mapContainer");
+      mapContainer.css("height", "200px");
+
+      // 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);
+      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>";
+
+      L.tileLayer(tileLayerSource, {
+        attribution:  attribution,
+        maxZoom: 18,
+        id: "zaziemo.mpn66kn8",
+        accessToken: "pk.eyJ1IjoiemF6aWVtbyIsImEiOiI3ODVjMzVjNmM2ZTU3YWM3YTE5YWYwMTRhODljM2M1MSJ9.-nVgyS4PLnV4m9YkvMB5wA"
+      }).addTo(map);
+
+      // set mapContainer size to a smaller preview size
+      mapContainer.css("height", "75px");
+      map.invalidateSize();
+
+      // put marker on map
+      var markerOnMap = L.marker(location).addTo(map);
+      return map;
+    };
+  },
+
+  toggleMap: function () {
+    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");
+    }
   },
 
   presenter : function() {
@@ -37,6 +79,10 @@ app.views.SinglePostContent = app.views.Base.extend({
 
   showPost : function() {
     return (app.currentUser.get("showNsfw")) || !this.model.get("nsfw");
+  },
+
+  postRenderTemplate : function(){
+    _.defer(_.bind(this.map, this));
   }
 });
 // @license-end

app/assets/stylesheets/map.scss

@@ -1,4 +1,4 @@
-.map {
+.mapContainer {
   position: relative;
   overflow: hidden;
 }
@@ -8,6 +8,10 @@
   text-decoration: underline;
 }
 
+.leaflet-control-zoom {
+  display: none;
+}
+
 .leaflet-bottom .leaflet-control {
   margin-bottom: 0;
 }

app/assets/stylesheets/single-post-view.scss

@@ -23,11 +23,12 @@
         padding-left: 10px;
       }
     }
-    .status-message-location {
+    .near-from {
       color: $text-grey;
       font-size: 12px;
       margin: 10px 20px 0px 15px;
     }
+
     .row.reshare {
       border-top: 1px solid lighten($border-grey,5%);
       padding-top: 10px;

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

@@ -67,9 +67,14 @@
         <div id="single-post-actions" class="col-md-4" />
       {{/unless}}
     </div>
+    {{#if location.lat}}
     <div class="row">
-      <div class="status-message-location" />
+      <div class='near-from'>
+        {{t "publisher.near_from" location=location.address}}
+        <div class="mapContainer"></div>
+      </div>
     </div>
+    {{/if}}
     {{#if root}}
       <div class="row reshare">
         <div class="col-md-8" id="reshare-info">