[WIP] Adding Search bar to Maps . #2582 (#2585)

* Added CDN links for Map search Feature * Searching via User name
publiclab · Apr 6, 2018 · 35aeac4 · 35aeac4
1 parent 9795328
commit 35aeac4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -58,6 +58,8 @@
 
   <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">
   </head>
 
   <body>

diff --git a/app/views/map/_peopleLeaflet.html.erb b/app/views/map/_peopleLeaflet.html.erb
@@ -12,17 +12,36 @@
 	<% end %>
 
   <script>
-	var map<%= unique_id %> = L.map('map<%= unique_id %>').on('load', onMapLoad).setView([<%= lat %>,<%= lon %>], 2);
- 	L.tileLayer("//a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png").addTo(map<%= unique_id %>);
- 	function onMapLoad(e){
-     	$.getJSON("/api/srch/peoplelocations?srchString=100" , function(data){
- 			if (!!data.items){
- 				for (i = 0; i < data.items.length ; i++) { 
- 					var url = data.items[i].docUrl ;
- 					var title = data.items[i].docTitle ;
-   					L.marker([data.items[i].latitude , data.items[i].longitude]).addTo(map<%= unique_id %>).bindPopup("<a href=" +  url + ">" + title + "</a>") ;
-				}
- 			}
- 		});
-	}
+   var map<%= unique_id %> = L.map('map<%= unique_id %>').on('load', onMapLoad).setView([<%= lat %>,<%= lon %>], 2);
+   L.tileLayer("//a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png").addTo(map<%= unique_id %>);
+   var searchLayer<%= unique_id %> = L.layerGroup().addTo(map<%= unique_id %>);
+    // add the search bar to the map
+   var controlSearch<%= unique_id %> = new L.Control.Search({
+      position:'topright',    // where do you want the search bar?
+      layer: searchLayer<%= unique_id %>,  // name of the layer
+      initial: false,
+      minLength: 1,
+      textErr: 'Person not found' , 
+      zoom: 11,        // set zoom to found location when searched
+      marker: false,
+      textPlaceholder: 'search people' // placeholder while nothing is searched
+    });
+   map<%= unique_id %>.addControl(controlSearch<%= unique_id %>);
+    /*
+    controlSearch<%= unique_id %>.on('search:collapsed', function(e) {
+    map<%= unique_id %>.setView([<%= lat %>,<%= lon %>], 2);
+    })
+    */
+   function onMapLoad(e){
+     $.getJSON("/api/srch/peoplelocations?srchString=100" , function(data){
+       if (!!data.items){
+         for (i = 0; i < data.items.length ; i++) { 
+ 	   var url = data.items[i].docUrl ;
+ 	   var title = data.items[i].docTitle ;
+   	   var m = L.marker([data.items[i].latitude , data.items[i].longitude], {title: title} ).bindPopup("<a href=" +  url + ">" + title + "</a>") ;
+   	   searchLayer<%= unique_id %>.addLayer(m) ; 
+	  }
+        }
+     });
+    }
   </script>