Create /map/ route for wiki pages

app/assets/javascripts/application.js

@@ -57,4 +57,5 @@
 //= require keybindings.js
 //= require jquery-validation/dist/jquery.validate.js
 //= require validation.js
-//= require submit_form_ajax.js
+//= require submit_form_ajax.js
+//= require urlMapHash.js

app/assets/javascripts/urlMapHash.js

@@ -0,0 +1,53 @@
+function urlMapHash() {
+  // This is based off of jywarren's urlhash, made specific to our map hash needs
+
+  const paramArray = ["zoom", "lat", "lon"];
+
+  function getUrlHashParameter(param) {
+
+    var params = getUrlHashParameters();
+    return params[param];
+
+  }
+
+  function getUrlHashParameters() {
+
+    var sPageURL = window.location.hash;
+    if (sPageURL) sPageURL = sPageURL.split('#')[1];
+    var items = sPageURL.split('/');
+    var object = {};
+    items.forEach(function(item, i) {
+      if ((item !== '') && (paramArray[i])) object[paramArray[i]] = item;
+    });
+    return object;
+  }
+
+  // accepts an object like { paramName: value, paramName1: value }
+  // and transforms to: url.com#zoom/lat/lon
+  function setUrlHashParameters(params) {
+
+    var values = [];
+    paramArray.forEach(function(key, i) {
+      values.push(params[key]);
+    });
+    var hash = values.join('/');
+    window.location.hash = hash;
+
+  }
+
+  function setUrlHashParameter(param, value) {
+
+    var params = getUrlHashParameters();
+    params[param] = value;
+    setUrlHashParameters(params);
+
+  }
+
+  return {
+    getUrlHashParameter:   getUrlHashParameter,
+    getUrlHashParameters:  getUrlHashParameters,
+    setUrlHashParameter:   setUrlHashParameter,
+    setUrlHashParameters:  setUrlHashParameters
+  }
+
+}

app/assets/stylesheets/location.css

@@ -13,4 +13,20 @@
 }
 #map_content .form-group .btn {
   margin-top: .4rem;
+}
+
+a:not([href]):not([tabindex]).btn-location,
+.btn-location {
+  position: inline;
+  color:#666;
+}
+a:not([href]):not([tabindex]).btn-outline-secondary.btn-location .fa,
+a.btn-outline-secondary.btn-location .fa {
+  color: #c40;
+}
+a:not([href]):not([tabindex]).btn-outline-secondary.btn-location:hover,
+a:not([href]):not([tabindex]).btn-outline-secondary.btn-location:hover i,
+.btn-outline-secondary.btn-location:hover,
+.btn-outline-secondary.btn-location:hover i {
+  color: white;
 }

app/controllers/map_controller.rb

@@ -21,12 +21,31 @@ def index
   end
 
   def map
-    @layersname = params[:layersname]
+    @lat = 0
+    @lon = 0
+    @zoom = 3
 
-    return if current_user&.has_power_tag("lat").blank? || current_user&.has_power_tag("lon").blank?
+    if current_user&.has_power_tag("lat") && current_user&.has_power_tag("lon")
+      @lat = current_user.get_value_of_power_tag("lat").to_f
+      @lon = current_user.get_value_of_power_tag("lon").to_f
+    end
+    @zoom = current_user.get_value_of_power_tag("zoom").to_f if current_user&.has_power_tag("zoom")
+  end
+
+  def wiki
+    @node = Node.find_wiki(params[:id])
+
+    if @node.blank? || @node.has_power_tag("lat").blank? || @node.has_power_tag("lon").blank?
+      flash[:warning] = @node.blank? ? "Wiki page not found." : "No location found for wiki page."
+      redirect_to controller: 'map', action: 'map'
+      return
+    end
+
+    @lat = @node.power_tag("lat").to_f
+    @lon = @node.power_tag("lon").to_f
+    @zoom = @node.has_power_tag("zoom") ? @node.power_tag("zoom").to_f : 6
 
-    @user_lat = current_user.get_value_of_power_tag("lat").to_f
-    @user_lon = current_user.get_value_of_power_tag("lon").to_f
+    render :map
   end
 
   def show

app/views/map/map.html.erb

@@ -1,4 +1,3 @@
-<%= javascript_include_tag('/lib/urlhash/urlHash.js') %>
 <%= render :partial => "map/mapDependencies" %>
 
   <style>
@@ -21,53 +20,63 @@
     height: 80vh;
     background:rgba(255,255,255,0.5);
   }
+  .alert {
+    z-index: 600;
+  }
   </style>
 
-  <div id="map"></div>
+<div id="map"></div>
 
    <script>
 
-      var urlHash = urlHash();
+      var urlHash = urlMapHash();
+
+        // if there are location params in URL let them override, otherwise save lat/lon/zoom from controller
+        if (!urlHash.getUrlHashParameter('lat') || !urlHash.getUrlHashParameter('lon')) {
+          <% if @lat && @lon %>
+            urlHash.setUrlHashParameter('lat', <%= @lat %> + "");
+            urlHash.setUrlHashParameter('lon', <%= @lon %> + "");
+            <% if @zoom %>
+              urlHash.setUrlHashParameter('zoom', <%= @zoom %> + "");
+            <% end %>
+          <% end %>
+        }
+
       const params = urlHash.getUrlHashParameters();
 
+      var lat = parseFloat(params.lat);
+      var lon = parseFloat(params.lon);
+      var zoom = parseFloat(params.zoom);
+
       const bounds = new L.LatLngBounds(
         new L.LatLng(84.67351257, -172.96875),
         new L.LatLng(-54.36775852, 178.59375)
       );
 
-      var user_lat = null;
-      var user_lon = null;
-      var profile_zoom = null;
-      <% if @user_lat && @user_lon %>
-        user_lat = "<%= @user_lat %>";
-        user_lon = "<%= @user_lon %>";
-        profile_zoom = 7;
-      <% end %>
-
-      var lat = params.lat || user_lat || 23;
-      var lon = params.lon || user_lon || 77;
-      var zoom = parseFloat(params.zoom) || profile_zoom || 3;
-      // These must be parsed after evaluating above or else 0 will not be displayed
-      lat = parseFloat(lat);
-      lon = parseFloat(lon);
-
       var map = L.map("map", {
         maxBounds: bounds,
         maxBoundsViscosity: 0.75
       }).setView([lat, lon], zoom);
 
+      updateLocationHash();
+      updateZoomHash();
+
       map.options.minZoom = 3;
 
-      map.on('moveend', function() {
+      map.on('moveend', updateLocationHash);
+
+      map.on('zoomend', updateZoomHash);
+
+      function updateLocationHash() {
         const center = map.getCenter();
         urlHash.setUrlHashParameter('lat', center.lat + "");
         urlHash.setUrlHashParameter('lon', center.lng + "");
-      })
+      }
 
-      map.on('zoomend', function() {
+      function updateZoomHash() {
         const zoom = map.getZoom();
         urlHash.setUrlHashParameter('zoom', zoom + "");
-      })
+      }
 
       <% if @layersname.nil? %>
         var layersname = ['odorreport', 'asian', 'clouds', 'eonetFiresLayer', 'Unearthing'];
@@ -90,5 +99,4 @@
         embed: true,
       }).addTo(map);
 
-
     </script>

app/views/sidebar/_related.html.erb

@@ -1,6 +1,6 @@
 <div class="col-lg-3 d-print-none">
   <div class="sidebar-panel">
-  <div id="sidebar">
+  <div id="sidebar" class="mb-3">
 
   <% cache('related_sidebar-feature', skip_digest: true) do %>
     <%= feature('sidebar') %>
@@ -41,17 +41,22 @@
   <% if @node && @node.has_power_tag('response') %>
     <%= render partial: 'sidebar/notes', locals: { notes: @node.responses, title: I18n.t('sidebar._related.responses_to_note'), node: @node } %>
   <% end %>
-  <% if @node && (@node.has_tag("place") || @node.has_power_tag("place")) && @node.lat && @node.lon %>
-    <%= render_top_map(@node.lat, @node.lon, @node.zoom) %>
-  <% elsif @node && @node.lat && @node.lon %>
-    <%= render_map(@node.lat, @node.lon, @node.zoom) %>
-  <% elsif [email protected] && [email protected] %>
-    <div id="map_template" style="position: relative; display: inline-block;">
-      <img src="https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/0/0/0.png" style="height:69px; width: 263px; position: relative; margin-right: -10px;">
-      <button class="btn btn-outline-secondary btn-lg" id="add_location" style="position: absolute; position: absolute;top: 19% ; left: 24% ;" type="button" name="button"><strong>Add location</strong></button>
-    </div>
-    <center><span>Learn about location <a href="https://publiclab.org/location-privacy">privacy</a></span></center>
-  <% end %>
+    <% if @node && @node.lat && @node.lon %>
+      <% if @node.has_tag("place") %>
+        <%= render_top_map(@node.lat, @node.lon, @node.zoom) %>
+      <% else %>
+        <%= render_map(@node.lat, @node.lon, @node.zoom) %>
+      <% end %>
+      <%# Link to map %>
+      <% zoom = @node.zoom ? @node.zoom : "" %>
+      <% url = "/map#" + zoom.to_s + "/" + @node.lat.to_s + "/" + @node.lon.to_s %>
+      <% if @node.type == "page" %>
+        <% url = "/map/" + @node.slug_from_path %>
+      <% end %>
+      <a href="<%= url %>" class="btn btn-outline-secondary btn-location mt-2"><i class="fa fa-map" aria-hidden="true"></i> View on a map</a>
+    <% elsif [email protected] && [email protected] %>
+      <a class="blurred-location-input btn btn-outline-secondary btn-location my-2"><i class="fa fa-map-marker" aria-hidden="true"></i> Add a location</a> 
+    <% end %>
 
   <br style="clear:both;" />
 
@@ -72,10 +77,4 @@
   <% end %>
   </div>
 </div>
-<%= javascript_include_tag 'sidebar' %>
-
-<script type="text/javascript">
-  $('#add_location').on('click', function() {
-    $('.blurred-location-input').click();
-  })
-</script>
+<%= javascript_include_tag 'sidebar' %>

config/routes.rb

@@ -248,8 +248,8 @@
 
 
   get 'map' => 'map#map'
-  get 'map/:layersname' => 'map#map'
-  get 'maps' => 'map#index'
+  get 'map/:id' => 'map#wiki'
+  get 'maps' => redirect('/map/')
   get 'users/map' => 'users#map'
   get 'maps/:id' => 'map#tag'
   get 'map/edit/:id' => 'map#edit'

test/fixtures/node_tags.yml

@@ -199,3 +199,21 @@ project2:
   tid: 28
   uid: 1
   nid: 7
+
+test4_lat:
+  tid: 29
+  uid: 1
+  nid: 7
+  date: <%= DateTime.now.to_i %>
+
+test4_lon:
+  tid: 30
+  uid: 1
+  nid: 7
+  date: <%= DateTime.now.to_i %>
+
+test4_zoom:
+  tid: 31
+  uid: 1
+  nid: 7
+  date: <%= DateTime.now.to_i %>

test/fixtures/tags.yml

@@ -111,3 +111,15 @@ place:
 project:
   tid: 28
   name: project
+
+test4_lat:
+  tid: 29
+  name: lat:41.87
+
+test4_lon:
+  tid: 30
+  name: lon:-87.64
+
+test4_zoom:
+  tid: 31
+  name: zoom:13

test/fixtures/user_tags.yml

@@ -366,4 +366,29 @@ notification_tag1:
 notification_tag2:
   id: 24
   uid: 14
-  value: notifications:all
+  value: notifications:all
+
+zoom:
+  id: 25
+  uid: 1
+  value: zoom:10
+
+blurred:
+  id: 26
+  uid: 1
+  value: blurred:true
+
+lat2:
+  id: 27
+  uid: 2
+  value: lat:59
+
+lon2:
+  id: 28
+  uid: 2
+  value: lon:15
+
+zoom2:
+  id: 29
+  uid: 2
+  value: zoom:10