Full screen button added in inline maps, Multiple maps in Wiki page w…

…orks now. (publiclab#6699) * full screen added * working on wiki page * code refactoring * console logs removed * inline map layers are ON by default now * version bump of LEL to add new Layers * api changed tagslocation init * api taglocations changed * popup content changed
vinitshahdeo · Feb 1, 2020 · e184b8a · e184b8a
1 parent 62da401
commit e184b8a
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 128 deletions.
diff --git a/app/api/srch/search.rb b/app/api/srch/search.rb
@@ -298,7 +298,6 @@ class Search < Grape::API
       end
 
       # Request URL should be /api/srch/taglocations?nwlat=200.0&selat=0.0&nwlng=0.0&selng=200.0[&tag=awesome]
-      # Note: Query(QRY as above) must have latitude and longitude as query=lat,lon
       desc 'Perform a search of documents having nearby latitude and longitude tag values', hidden: false,
                                                                                             is_array: false,
                                                                                             nickname: 'search_tag_locations'
@@ -317,6 +316,8 @@ class Search < Grape::API
               doc_type: 'PLACES',
               doc_url: model.path(:items),
               doc_title: model.title,
+              doc_author: model.user.username,
+              doc_image_url: !model.images.empty? ? model.images.first.path : 0,
               score: model.answers.length,
               latitude: model.lat,
               longitude: model.lon,
@@ -330,7 +331,6 @@ class Search < Grape::API
       end
 
       # Request URL should be /api/srch/nearbyPeople?nwlat=200.0&selat=0.0&nwlng=0.0&selng=200.0[&tag=awesome&sort_by=recent]
-      # Note: Query(QRY as above) must have latitude and longitude as query=lat,lon
       desc 'Perform a search to show people nearby a given location',  hidden: false,
                                                                        is_array: false,
                                                                        nickname: 'search_nearby_people'

diff --git a/app/assets/javascripts/leaflet_helper.js b/app/assets/javascripts/leaflet_helper.js
@@ -8,21 +8,6 @@
     return map ;
   }
 
-
-  function setupFullScreen(map , lat , lon) {
-    map.addControl(new L.Control.Fullscreen()); // to go full-screen
-    map.on('fullscreenchange', function () {
-      if (map.isFullscreen()) {
-        map.options.minZoom = 3 ;
-       } 
-      else {
-        map.options.minZoom = 1 ;
-        map.panTo(new L.LatLng(lat,lon));
-      }
-    });
-  }
-
-
   function PLmarker_default(){
      L.Icon.PLmarker = L.Icon.extend({
       options: {
@@ -65,7 +50,7 @@
        });
    }
 
-   function contentLayerParser(map,markers_hash, map_tagname) {
+   function contentLayerParser(map, markers_hash, map_tagname) {
        var NWlat = map.getBounds().getNorthWest().lat ;
        var NWlng = map.getBounds().getNorthWest().lng ;
        var SElat = map.getBounds().getSouthEast().lat ;
@@ -82,13 +67,19 @@
                for (i = 0; i < data.items.length; i++) {
                    var url = data.items[i].doc_url;
                    var title = data.items[i].doc_title;
+                   var author = data.items[i].doc_author;
+                   var image_url = data.items[i].doc_image_url;
                    var default_url = PLmarker_default();
                    var mid = data.items[i].doc_id ;
                    var m = L.marker([data.items[i].latitude, data.items[i].longitude], {icon: default_url}).bindPopup("<a href=" + url + ">" + title + "</a>") ;
 
                    if(markers_hash.has(mid) === false){
 
-                       m.addTo(map).bindPopup("<a href=" + url + ">" + title + "</a>") ;
+                       if(image_url) {
+                           m.addTo(map).bindPopup("<div><img src=" + image_url+ " height='140px' /><br>" + "<b>Title:</b> " + title  + "<br><b>Author:</b>   <a href=" + 'https://publiclab.org/profile/' + author + ">" + author + "</a><br>" + "<a href=" + url + ">" + "Read more..." + "</a></div>" ) ;
+                       } else {
+                           m.addTo(map).bindPopup("<span><b>Title:</b>     " + title  + "</span><br><span><b>Author:</b>    <a href=" + 'https://publiclab.org/profile/' + author + ">" + author + "</a></span><br>" + "<a href=" + url + ">" + "<br>Read more..." + "</a>" ) ;
+                       }
                        markers_hash.set(mid , m) ;
                    }
                }
@@ -105,8 +96,14 @@
 
        L.tileLayer('https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png').addTo(map) ;
 
+       var oms = omsUtil(map, {
+          keepSpiderfied: true,
+          circleSpiralSwitchover: 0
+       });
+
        L.LayerGroup.EnvironmentalLayers({
            include: layers,
+           embed: true,
        }).addTo(map);
 
        if(typeof mainLayer !== "undefined" && mainLayer !== ""){
@@ -148,6 +145,11 @@
                 attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
       }).addTo(map) ;
 
+      var oms = omsUtil(map, {
+        keepSpiderfied: true,
+        circleSpiralSwitchover: 0
+      });
+
       L.LayerGroup.EnvironmentalLayers({
           hash: !!sethash,
       }).addTo(map);

diff --git a/app/assets/javascripts/wikis.js b/app/assets/javascripts/wikis.js
@@ -26,9 +26,9 @@ function setupWiki(node_id, title, raw, logged_in) {
     });
     $('#content').hide();
   } else {
-    $('#content').html(shortCodePrompt($('#content')[0], {
-      submitUrl: '/wiki/replace/' + node_id
-    }));
+    // $('#content').html(shortCodePrompt($('#content')[0], {
+    //   submitUrl: '/wiki/replace/' + node_id
+    // }));
     postProcessContent();
     addDeepLinks($('#content'));
   }

diff --git a/app/models/doc_result.rb b/app/models/doc_result.rb
@@ -1,13 +1,15 @@
 # A DocResult is an individual return item for a document (web page) search
 class DocResult
-  attr_accessor :doc_id, :doc_type, :doc_url, :doc_title, :doc_score, :latitude, :longitude, :blurred, :category
+  attr_accessor :doc_id, :doc_type, :doc_url, :doc_title, :doc_score, :latitude, :longitude, :blurred, :category, :doc_author, :doc_image_url
 
   def initialize(args = {})
     @doc_id = args[:doc_id]
     @doc_type = args[:doc_type]
     @doc_url = args[:doc_url]
     @doc_title = args[:doc_title]
     @doc_score = args[:doc_score]
+    @doc_author = args[:doc_author]
+    @doc_image_url = args[:doc_image_url]
     @latitude = args[:latitude]
     @longitude = args[:longitude]
     @blurred = args[:blurred]

diff --git a/app/services/search_service.rb b/app/services/search_service.rb
@@ -154,7 +154,7 @@ def tagNearbyNodes(coordinates, tag, period = { "from" => nil, "to" => nil }, so
     else
       items.order(Arel.sql("created #{order_direction}"))
            .limit(limit)
-            end
+    end
   end
 
   # Search nearby people with respect to given latitude, longitute and tags

diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -176,6 +176,9 @@
 
 <%= render partial: "layouts/signupLoginModal" %>
 
+  <script type="text/javascript" src="/lib/leaflet-environmental-layers/example/lib/glify.js"></script>
+
+
 <style>
   .profile-icon{
       cursor:pointer;

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -98,15 +98,15 @@
      background: #BABABA;
     }
 
-  </style>
+    .leaflet-popup-content {
+      width: 800px !important;
+    }
 
-  <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
-  <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
-  <script src="https://cdn.jsdelivr.net/npm/leaflet-search@2.4.0/dist/leaflet-search.min.js"></script>
-  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/leaflet-search@2.4.0/dist/leaflet-search.min.css">
+  </style>  
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/bootstrap-slider.js"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/css/bootstrap-slider.min.css" />
+
   </head>
 
   <body>

diff --git a/app/views/map/_inlineLeaflet.html.erb b/app/views/map/_inlineLeaflet.html.erb
@@ -8,6 +8,9 @@
     #postOnMap<%= unique_id %> {
       margin-top: 5px;
     }
+    .leaflet-popup-content {
+      width: auto !important;
+    }
   </style>
 
   <div class="leaflet-map" id="map<%= unique_id %>"></div>
@@ -19,10 +22,13 @@
 <script>
     var bounds = new L.LatLngBounds(new L.LatLng(84.67351257 , -172.96875) , new L.LatLng(-54.36775852 , 178.59375)) ;
 
-    var map<%= unique_id %> = L.map('map<%= unique_id %>' , {
-        maxBounds: bounds ,
-        maxBoundsViscosity: 0.75
-    }).setView([<%= lat %>,<%= lon %>], <%= lat.to_s.length.to_i %> + 6);
+    var map<%= unique_id %> = L.map('map<%= unique_id %>', {
+      maxBounds: bounds ,
+      maxBoundsViscosity: 0.75,
+      fullscreenControl: true,
+      fullscreenControlOptions: {
+        position: 'topleft'
+    }}).setView([<%= lat %>,<%= lon %>], <%= lat.to_s.length.to_i %> + 6);
 
     var button<%= unique_id %> = document.getElementById('postOnMap<%= unique_id %>');
 
@@ -37,7 +43,7 @@
     var map_lat = <%= lat %> ;
     var map_lon = <%= lon %> ;
     var primary_layers = "<%= layers.to_s %>";
-    var main_layer = "<%= mainLayer.to_s %>"
+    var main_layer = "<%= mainLayer.to_s %>";
 
     setupInlineLEL(map<%= unique_id %> , primary_layers, main_layer, markers_hash<%= unique_id %>) ;
 

diff --git a/app/views/map/_mapDependencies.html.erb b/app/views/map/_mapDependencies.html.erb
@@ -1,14 +1,21 @@
 <%= stylesheet_link_tag "/lib/leaflet/dist/leaflet.css" %>
+<%= stylesheet_link_tag "/lib/leaflet.fullscreen/Control.FullScreen.css" %>
+
 <%= stylesheet_link_tag "/lib/leaflet-environmental-layers/dist/LeafletEnvironmentalLayers.css" %>
+
 <%= javascript_include_tag('/lib/leaflet-environmental-layers/dist/LeafletEnvironmentalLayers.js') %>
 <%= javascript_include_tag('/lib/leaflet-environmental-layers/src/windRoseLayer.js') %>
 <%= javascript_include_tag('/lib/leaflet-fullhash/leaflet-fullHash.js') %>
 
 <%= javascript_include_tag('https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js') %>
 <%= javascript_include_tag('https://unpkg.com/esri-leaflet-renderers@2.0.6') %>
 
-<%= javascript_include_tag('https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js') %>
-<%= stylesheet_link_tag "https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css" %>
-
 <%= javascript_include_tag('/lib/leaflet-spin/example/spin/dist/spin.min.js') %>
 <%= javascript_include_tag('/lib/leaflet-spin/example/leaflet.spin.min.js') %>
+
+<%= javascript_include_tag('/lib/leaflet.fullscreen/Control.FullScreen.js') %>
+
+<%= javascript_include_tag('https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js') %>
+
+<%= javascript_include_tag('/lib/leaflet-environmental-layers/example/lib/glify.js') %>
+
diff --git a/app/views/map/_plainInlineLeaflet.html.erb b/app/views/map/_plainInlineLeaflet.html.erb
@@ -7,6 +7,9 @@
   #postOnMap<%= unique_id %> {
     margin-top: 5px;
   }
+  .leaflet-popup-content {
+    width: auto !important;
+  }
   </style>
   <div class="leaflet-map" id="map<%= unique_id %>"></div>
 
@@ -17,10 +20,13 @@
   <script>
     var bounds = new L.LatLngBounds(new L.LatLng(84.67351257 , -172.96875) , new L.LatLng(-54.36775852 , 178.59375)) ;
 
-    var map<%= unique_id %> = L.map('map<%= unique_id %>' , {
+    var map<%= unique_id %> = L.map('map<%= unique_id %>', {
       maxBounds: bounds ,
-      maxBoundsViscosity: 0.75
-    }).setView([<%= lat %>,<%= lon %>], <%= lat.to_s.length.to_i %> + 6);
+      maxBoundsViscosity: 0.75,
+      fullscreenControl: true,
+      fullscreenControlOptions: {
+        position: 'topleft'
+    }}).setView([<%= lat %>,<%= lon %>], <%= lat.to_s.length.to_i %> + 6);
 
     var button<%= unique_id %> = document.getElementById('postOnMap<%= unique_id %>');
 
@@ -42,87 +48,16 @@
 
     setupLEL(map<%= unique_id %> , 0) ;
 
-    map<%= unique_id %>.on('zoomend' , function () {
-       var NWlat = map<%= unique_id %>.getBounds().getNorthWest().lat ;
-       var NWlng = map<%= unique_id %>.getBounds().getNorthWest().lng ;
-       var SElat = map<%= unique_id %>.getBounds().getSouthEast().lat ;
-       var SElng = map<%= unique_id %>.getBounds().getSouthEast().lng ;
-
-       map<%= unique_id %>.spin(true) ;
-       map_tagname = null ;
-       <% if (defined? tagname != nil and tagname.nil? == false) %>
-          map_tagname = "<%= tagname %>" ;
-       <% end %>
-
-       if(map_tagname == null) {
-        taglocation_url = "/api/srch/taglocations?nwlat=" + NWlat + "&selat=" + SElat + "&nwlng=" + NWlng + "&selng=" + SElng ; 
-
-       } else { 
-        taglocation_url = "/api/srch/taglocations?nwlat=" + NWlat + "&selat=" + SElat + "&nwlng=" + NWlng + "&selng=" + SElng + "&tag=" + map_tagname ;
-       }
-
-       $.getJSON(taglocation_url , function (data) {
-           var layerGroup = L.layerGroup();
-
-           if (!!data.items) {
-               for (i = 0; i < data.items.length; i++) {
-                   var url = data.items[i].doc_url;
-                   var title = data.items[i].doc_title;
-                   var default_url = PLmarker_default();
-                   var mid = data.items[i].doc_id ;
-                   var m = L.marker([data.items[i].latitude, data.items[i].longitude], {icon: default_url}).bindPopup("<a href=" + url + ">" + title + "</a>") ;
-
-                   if(markers_hash<%= unique_id %>.has(mid) === false){
-                       m.addTo(map<%= unique_id %>).bindPopup("<a href=" + url + ">" + title + "</a>") ;
-                       markers_hash<%= unique_id %>.set(mid , m) ;
-                   }
-
-               }
-           }
-           map<%= unique_id %>.spin(false) ;
-       });
-
-   }) ;
-
-   map<%= unique_id %>.on('moveend' , function () {
-       var NWlat = map<%= unique_id %>.getBounds().getNorthWest().lat ;
-       var NWlng = map<%= unique_id %>.getBounds().getNorthWest().lng ;
-       var SElat = map<%= unique_id %>.getBounds().getSouthEast().lat ;
-       var SElng = map<%= unique_id %>.getBounds().getSouthEast().lng ;
-
-       map<%= unique_id %>.spin(true) ;
-       map_tagname = null ;
-       <% if (defined? tagname != nil and tagname.nil? == false) %>
+     <% if (defined? tagname != nil and tagname.nil? == false) %>
           map_tagname = "<%= tagname %>" ;
-       <% end %>
-
-        if(map_tagname == null) {
-        taglocation_url = "/api/srch/taglocations?nwlat=" + NWlat + "&selat=" + SElat + "&nwlng=" + NWlng + "&selng=" + SElng ; 
-
-       } else { 
-        taglocation_url = "/api/srch/taglocations?nwlat=" + NWlat + "&selat=" + SElat + "&nwlng=" + NWlng + "&selng=" + SElng + "&tag=" + map_tagname ;
-       }
-
-         $.getJSON(taglocation_url , function (data) {
-           var layerGroup = L.layerGroup();
-
-           if (!!data.items) {
-               for (i = 0; i < data.items.length; i++) {
-                   var url = data.items[i].doc_url;
-                   var title = data.items[i].doc_title;
-                   var default_url = PLmarker_default();
-                   var mid = data.items[i].doc_id ;
-                   var m = L.marker([data.items[i].latitude, data.items[i].longitude], {icon: default_url}).bindPopup("<a href=" + url + ">" + title + "</a>") ;
+     <% end %>
 
-                   if(markers_hash<%= unique_id %>.has(mid) === false){
-                       m.addTo(map<%= unique_id %>).bindPopup("<a href=" + url + ">" + title + "</a>") ;
-                       markers_hash<%= unique_id %>.set(mid , m) ;
-                   }
+     map<%= unique_id %>.on('zoomend' , function () {
+        contentLayerParser(map<%= unique_id %>, markers_hash<%= unique_id %>, map_tagname);
+    }) ;
 
-               }
-           }
-           map<%= unique_id %>.spin(false) ;
-       });
-   }) ;
+    map<%= unique_id %>.on('moveend' , function () {
+        contentLayerParser(map<%= unique_id %>, markers_hash<%= unique_id %>, map_tagname);
+    }) ;
 
   </script>
diff --git a/package.json b/package.json
@@ -40,11 +40,12 @@
     "jquery-validation": "^1.19.1",
     "jsdiff": "components/jsdiff#~3.4.0",
     "junction": "theleagueof/junction#*",
-    "leaflet": "^0.7.3",
-    "leaflet-environmental-layers": "git://github.com/publiclab/leaflet-environmental-layers#fkl",
+    "leaflet": "^1.5.1",
+    "leaflet-environmental-layers": "^2.0.5",
     "leaflet-blurred-location": "^1.3.0",
     "leaflet-fullhash": "github:sagarpreet-chadha/leaflet-fullHash",
     "leaflet-spin": "1.1.0",
+    "leaflet.fullscreen": "1.6.0",
     "marked": "^0.7.0",
     "megamark": "~3.3.0",
     "moment": "~> 2.24.0",