New view only map page (#777)

cesswairimu · jywarren · commit a6413bbb9e70 · 2019-09-09T17:06:39.000-04:00
* view map page

* view map routing and styling

* improve map view

* style mappers

* add edit map button

* test  view map action

* Enhance view page

* show nearby maps

* change div to class

* update tests

* move view_map to maps controller

* show images on top of map

* fix filename typo

* fix typo

* Fix mobile view

* include tags in posting to publiclab

* fix styling

* change to new view page and create an edit page

* add show page button in edit

* fix failing tests

* make buttons style consistent

* change button to exit editor

* remove observation section
diff --git a/app/assets/images/balloon1.png b/app/assets/images/balloon1.png
diff --git a/app/assets/images/binoculars.png b/app/assets/images/binoculars.png
diff --git a/app/assets/images/quiz.png b/app/assets/images/quiz.png
diff --git a/app/assets/stylesheets/style.scss b/app/assets/stylesheets/style.scss
@@ -230,7 +230,6 @@ label small {
   letter-spacing: -0.2px;
 }
 
-
 .item-description {
   font-size: 18px;
   font-weight: 300;
@@ -240,21 +239,14 @@ label small {
   color: #a2aaad;
 }
 
-
-#info {
-    .fa-stack {
-        font-size: 0.7em;
-        color: gray
-    }
-    .fa {
-        font-size: 6em;
-        padding-bottom: 20px;
-    }
-}
-#all-maps {
+.all-maps {
     img {
         display: block;
         width: 200px;
         height: 200px;
     }
 }
+
+.light-blue {
+    background-color: #d0e2f2;
+}
diff --git a/app/controllers/maps_controller.rb b/app/controllers/maps_controller.rb
@@ -4,7 +4,7 @@ class MapsController < ApplicationController
   protect_from_forgery except: :export
 
   before_action :require_login, only: %i(edit update destroy)
-  before_action :find_map, only: %i(show annotate embed edit update images destroy archive)
+  before_action :find_map, only: %i(show annotate embed edit update images destroy archive view_map)
 
   layout 'knitter2'
 
@@ -57,10 +57,10 @@ def create
 
   def show
     @map.zoom ||= 12
-
-    # this is used for the resolution slider
-    @resolution = @map.average_cm_per_pixel.round(4)
-    @resolution = 5 if @resolution < 5 # soft-set min res
+    @maps = Map.maps_nearby(lat: @map.lat, lon: @map.lon, dist: 10)
+               .sample(4)
+    @unpaginated = true
+    render layout: 'application'
   end
 
   def archive
@@ -81,15 +81,21 @@ def embed
     @map.zoom ||= 12
     @embed = true
     response.headers.except! 'X-Frame-Options' # allow use of embed in iframes
-    render template: 'maps/show'
+    render template: 'maps/edit'
   end
 
   def annotate
     @map.zoom = 12 # get rid of this; use setBounds or something
     @annotations = true # loads annotations-specific assets
   end
 
-  def edit; end
+  def edit
+    @map.zoom ||= 12
+
+    # this is used for the resolution slider
+    @resolution = @map.average_cm_per_pixel.round(4)
+    @resolution = 5 if @resolution < 5 # soft-set min res
+  end
 
   def update
     @map.update_attributes(map_params)
diff --git a/app/views/front_ui/_featured_mappers.html.erb b/app/views/front_ui/_featured_mappers.html.erb
@@ -1,11 +1,11 @@
 <div class="row map-list mx-auto mt-3">
   <% mappers.each do |user| %>
     <div class="card-deck map col-md-6 col-lg-3 col-xs-12 mb-2 ml-2">
-      <div class="card card-without-border">
+      <div class="bg-transparent card card-without-border">
        <%= image_tag(profile_image(user), class: "img-icon card-img-top mx-auto") %>
         <div class="card-body text-center" style="margin-left: -18px !important;">
           <h5 class="card-title"><a href="/profile/<%= user.login %>">@<%= user.login %></a></h5>
-          <p class="card-text text-muted"> <%= user.maps.count %>
+          <p class="card-text text-muted"> <%= user.maps.count %> maps
             near <%= user.maps.first.location %>
             <br>
           </p>
diff --git a/app/views/front_ui/_maps.html.erb b/app/views/front_ui/_maps.html.erb
@@ -2,7 +2,7 @@
   <% maps.each do |map| %>
       <% warp = map.placed_warpables.first %>
     <div class="card-deck map col-md-6 col-lg-3 col-xs-12 mb-2 ml-2">
-      <div class="card card-without-border">
+        <div class="card bg-transparent card-without-border">
         <a href="/maps/<%= map.slug %>">
             <% if warp.present? %>
             <img class="card-img-top map-img" src="<%= warp.image.url  %>" alt="<%= map.name %>">
diff --git a/app/views/front_ui/gallery.html.erb b/app/views/front_ui/gallery.html.erb
@@ -1,4 +1,4 @@
-<div class="section-header mt-4" id="all-maps" >
+<div class="section-header mt-4 all-maps" >
     <% if params[:q].present? %>
         <h2 class="section-title text-center"> <%= @title %></h2>
          <hr style="max-width: 500px;">
diff --git a/app/views/maps/edit.html.erb b/app/views/maps/edit.html.erb
@@ -0,0 +1,69 @@
+<% content_for :title do %>
+  <div class="sidebar-title mt-3">
+    <h3><%= @map.name %>
+<%= link_to 'Exit editor', @map, class: 'float-right btn btn-sm btn-info'%>
+</h3>
+  </div>
+  <div class="map-author">
+    <% if @map.user %>
+      by <a href="//publiclab.org/profile/<%= @map.user.login %>"><%= @map.user.login %></a>
+    <% else %>
+      anonymous
+    <% end %>
+  </div>
+<% end %>
+
+<% content_for :details do %>
+  <div>
+    <%=raw markdown_to_html(@map.description) unless @map.description.nil? %>
+  </div>
+
+  <p>
+    <span class="map-detail-label">Location</span>
+    <a href="https://www.openstreetmap.org/#map=<%= @map.zoom %>/<%= @map.lat %>/<%= @map.lon %>"><%= @map.location %></a>
+  </p>
+
+  <table>
+    <tr><td><span class="map-detail-label">Latitude </span><%= @map.lat %></td><td><span class="map-detail-label">Longitude </span><%= @map.lon %></td></tr>
+  </table>
+
+  <p>
+    <span class="map-detail-label">License (<a target="_blank" href="http://publiclab.org/licenses">Learn more</a>):</span>
+    <a href="/maps/license/<%= @map.license %>"><%= @map.license %></a> 
+  </p>
+
+  <hr />
+  <p>
+    <% if logged_in? %>
+      <button type="button" class="btn btn-outline-info btn-sm" onClick="$('#map-edit-container').toggle()">Edit details</button>
+    <% end %>
+    <button type="button" class="btn btn-outline-info btn-sm" onClick="$('.share-link').toggle()">Embed code</button>
+    <button type="button" class="btn btn-outline-info btn-sm" title="Preview with NDVI" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',['ndvi','colormap'])">NDVI (beta)</button>
+    <button type="button" class="btn btn-outline-info btn-sm" rel="tooltip" title="Custom image processing" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',prompt('Enter an ImageSequencer code', 'invert,ndvi,colormap').split(','))">Add ImageSequencer code</button> 
+    <div class="share-link" style="display:none;">
+      <%= render :partial => 'maps/share' %>
+    </div>
+    <a href="https://publiclab.org/image-sequencer#NDVI">Learn more about ImageSequencer code</a>
+  </p>
+
+  <div style="display:none;" id="map-edit-container">
+    <%= render :partial => 'maps/edit' %>
+  </div>
+
+  <hr />
+  <div class="tags">
+    <%= render :partial => "tags/index" %>
+  </div>
+
+  <hr />
+
+  <div class="comments">
+    <%= render :partial => "comments/index" %>
+    <hr />
+    <%= render :partial => "comments/new" %>
+  </div>
+<% end %>
+
+<% content_for :images do %>
+  <%= render :partial => "/images/index" %>
+<% end %>
diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb
@@ -1,67 +1,100 @@
-<% content_for :title do %>
-  <div class="sidebar-title mt-3">
-    <h3><%= @map.name %></h3>
-  </div>
-  <div class="map-author">
-    <% if @map.user %>
-      by <a href="//publiclab.org/profile/<%= @map.user.login %>"><%= @map.user.login %></a>
-    <% else %>
-      anonymous
-    <% end %>
-  </div>  
-<% end %>
-
-<% content_for :details do %>
-  <div>
-    <%=raw markdown_to_html(@map.description) unless @map.description.nil? %>
-  </div>
-
-  <p>
-    <span class="map-detail-label">Location</span>
-    <a href="https://www.openstreetmap.org/#map=<%= @map.zoom %>/<%= @map.lat %>/<%= @map.lon %>"><%= @map.location %></a>
-  </p>
-
-  <table>
-    <tr><td><span class="map-detail-label">Latitude </span><%= @map.lat %></td><td><span class="map-detail-label">Longitude </span><%= @map.lon %></td></tr>
-  </table>
+<%= stylesheet_link_tag "/lib/leaflet/dist/leaflet.css" %>
+<%= stylesheet_link_tag "https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css" %>
 
-  <p>
-    <span class="map-detail-label">License (<a target="_blank" href="http://publiclab.org/licenses">Learn more</a>):</span>
-    <a href="/maps/license/<%= @map.license %>"><%= @map.license %></a> 
-  </p>
+<%= javascript_include_tag 'maps' %>
+<%= javascript_include_tag '//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js' %>
+<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=AIzaSyAxlBXzYwdeaOMKZgx_UNBp2qBtdD0L_9g" %>
+<%= javascript_include_tag 'https://unpkg.com/leaflet.gridlayer.googlemutant@0.7.0/Leaflet.GoogleMutant.js' %>
+<%= javascript_include_tag '/lib/image-sequencer/dist/image-sequencer.js' %>
 
-  <hr />
-  <p>
-    <% if logged_in? %>
-      <button type="button" class="btn btn-outline-info btn-sm" onClick="$('#map-edit-container').toggle()">Edit details</button>
-    <% end %>
-    <button type="button" class="btn btn-outline-info btn-sm" onClick="$('.share-link').toggle()">Embed code</button>
-    <button type="button" class="btn btn-outline-info btn-sm" title="Preview with NDVI" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',['ndvi','colormap'])">NDVI (beta)</button>
-    <button type="button" class="btn btn-outline-info btn-sm" rel="tooltip" title="Custom image processing" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',prompt('Enter an ImageSequencer code', 'invert,ndvi,colormap').split(','))">Add ImageSequencer code</button> 
-    <div class="share-link" style="display:none;">
-      <%= render :partial => 'maps/share' %>
+<div class= "row" id="knitter-map-pane" style="height: 450px; width: 100%;  margin-bottom: 1%; z-index: 5; float: none; max-width: none;"> </div>
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-md-6">
+            <button type="button" class="btn btn-outline-info btn-sm" onClick="$('.share-link').toggle()" style="margin-left: 1%;">Embed code</button>
+            <div class="share-link" style="display:none;">
+                <%= render :partial => 'maps/share' %>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <a href="/maps/edit/<%= @map.slug %>">
+                <button class="btn btn-outline-info float-right">
+                    <span class="fas fa-pencil-alt"> </span> Edit this map
+                </button>
+            </a>
+        </div>
     </div>
-    <a href="https://publiclab.org/image-sequencer#NDVI">Learn more about ImageSequencer code</a>
-  </p>
+</div>
 
-  <div style="display:none;" id="map-edit-container">
-    <%= render :partial => 'maps/edit' %>
-  </div>
-
-  <hr />
-  <div class="tags">
-    <%= render :partial => "tags/index" %>
-  </div>
+<div class="container-fluid">
+    <div class="text-center lead-text">
+        <p class="text-muted">A Community Atlas of </p>
+        <h2><%= @map.location %> </h2>
+        <p> by <%= link_to "@#{@map.author}", "/profile/#{@map.author}" unless @map.author == 'anonymous' %> </p>
+    </div>
+    <br>
+</div>
 
-  <hr />
+    <div class="container">
+        <div class="card-deck mb-6  text-center mx-auto">
+            <div class="card mapping-kits">
+                <img class="card-img-top img-draw  mx-auto" src="<%= asset_path('balloon1.png') %>" alt="balloon icon">
+                <div class="card-body">
+                    <h3>Make your own map </h3>
+                    <p class="card-text item-description">
+                    Use a kite, balloon, pole or drone to take an aerial photo and tell your own visual story of the place
+                    </p>
+                    <p>
+                    <a class="btn btn-primary btn-lg" href= 'https://store.publiclab.org/collections/mapping-kits'>
+                        Get a mapping kit<i class="fa fa-angle-double-right fa-fw" style="font-size:18px;color:white;"></i>
+                    </a>
+                    <a class="btn btn-primary btn-lg" href="<%= new_map_url %>">
+                        Add a new map <i class="fa fa-plus fa-fw" style="font-size:12px;color:white;"></i>
+                    </a>
+                    </p>
+                </div>
+            </div>
+            <div class="card mapping-kits">
+                <img class="card-img-top img-draw mx-auto" src="<%= asset_path('quiz.png') %>" alt="questions">
+                <div class="card-body">
+                    <h3>Ask a question</h3>
+                    <p class="card-text item-description">
+                    <a href="https://publiclab.org/questions" target="blank">Search </a>through questions or Ask a question to get help from others and share ideas with the PublicLab Community
+                    <%# hence helping you in your environmental exploration %>
+                    </p>
+                    <p>
+                    <a href="https://publiclab.org/questions/new?tags=lat:<%= @map.lat %>,lon:<%= @map.lon %>&body=Question posted from map at https://mapknitter.org/m/<%= @map.slug %>" target="blank">
+                        <button class="btn btn-lg btn-primary">
+                            Ask a Question
+                        </button>
+                    </a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
 
-  <div class="comments">
-    <%= render :partial => "comments/index" %>
-    <hr />
-    <%= render :partial => "comments/new" %>
+  <div class="all-maps light-blue">
+      <br>
+      <h3 class="text-center"> Nearby Maps </h3>
+      <hr style="max-width: 500px;">
+      <br>
+      <%= render :partial => 'front_ui/maps', :locals => { :maps => @maps } %>
   </div>
-<% end %>
 
-<% content_for :images do %>
-  <%= render :partial => "/images/index" %>
-<% end %>
+ <script>
+    var map
+    (function(){
+      window.mapKnitter = new MapKnitter.Map({
+        latlng:     L.latLng(<%= @map.lat %>, <%= @map.lon %>),
+        zoom:       <%= @map.zoom %>,
+        readOnly:   true,
+        logged_in:   <%= logged_in? == true %>,
+        anonymous:   <%= @map.anonymous? == true %>,
+        warpablesUrl:   "<%= url_for([@map, :warpables])+'.json' unless @map.warpables.empty? %>"
+      });
+      <% if @map.warpables.empty? && params[:action] == "show" %>
+        $('.modal-welcome').modal()
+      <% end %>
+     })();
+  </script>
diff --git a/config/routes.rb b/config/routes.rb
@@ -12,23 +12,25 @@
   get 'gallery', to: 'front_ui#gallery'
   get 'location' => 'front_ui#location'
   post 'save_location', to: 'front_ui#save_location'
-  
+
   get 'legacy', to: 'maps#index' # remove once new front page is stable
-  
+
   get 'external_url_test', to: 'export#external_url_test'
-  
+
+  get 'm/:id' => 'front_ui#view_map'
+
   # since rails 3.2, we use this to log in:
   get 'sessions/create', to: 'sessions#create'
   get 'local/:login', to: 'sessions#local'
   get 'logout', to: 'sessions#logout'
   get 'login', to: 'sessions#new'
-  
-  
+
+
   resources :users, :sessions, :maps, :images, :comments, :tags
-  
+
   # redirect legacy route:
   get 'tag/:id', to: redirect('/tags/%{id}')
-  
+
   # Registered user pages:
   get 'register', to: 'users#create'
   get 'signup', to: 'users#new'
diff --git a/test/controllers/front_ui_controller_test.rb b/test/controllers/front_ui_controller_test.rb
@@ -46,4 +46,12 @@ def teardown
     assert @maps.collect(&:name).include?('Cubbon Park')
   end
 
+  test 'view map page' do
+    map = maps(:saugus)
+    get :view_map, id: map.slug
+
+    assert_response :success
+    assert assigns(:maps)
+    assert_template 'front_ui/view_map'
+  end
 end
diff --git a/test/controllers/maps_controller_test.rb b/test/controllers/maps_controller_test.rb

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="section-header mt-4" id="all-maps" >`
	`1`	`+<div class="section-header mt-4 all-maps" >`
`2`	`2`	`<% if params[:q].present? %>`
`3`	`3`	`<h2 class="section-title text-center"> <%= @title %></h2>`
`4`	`4`	`<hr style="max-width: 500px;">`