Add search control to LEL's basic usage #369 Commit (#404)

* Update AllLayers.js * Update unearthing-pvd.html * Update oneLinerCodeExample.html
publiclab · Mar 24, 2020 · bfe2008 · bfe2008
1 parent 229050b
commit bfe2008
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/example/oneLinerCodeExample.html b/example/oneLinerCodeExample.html
@@ -53,6 +53,9 @@
     <!-- Set the size and position of the map on your page in your own css files -->
     <link rel="stylesheet" href="styles.css">
 
+  <script src="../node_modules/leaflet-google-places-autocomplete/src/js/leaflet-gplaces-autocomplete.js"></script>
+  <link rel="stylesheet" href="../node_modules/leaflet-google-places-autocomplete/src/css/leaflet-gplaces-autocomplete.css">
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOLUQngEmJv0_zcG1xkGq-CXIPpLQY8iQ&libraries=places"></script>
   </head>
 
   <body>

diff --git a/example/unearthing-pvd.html b/example/unearthing-pvd.html
@@ -40,6 +40,9 @@
   <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
   <link rel="stylesheet" href="styles.css">
 
+  <script src="../node_modules/leaflet-google-places-autocomplete/src/js/leaflet-gplaces-autocomplete.js"></script>
+  <link rel="stylesheet" href="../node_modules/leaflet-google-places-autocomplete/src/css/leaflet-gplaces-autocomplete.css">
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOLUQngEmJv0_zcG1xkGq-CXIPpLQY8iQ&libraries=places"></script>
   </head>
 
   <body>

diff --git a/src/AllLayers.js b/src/AllLayers.js
@@ -216,6 +216,15 @@ L.LayerGroup.environmentalLayers = L.LayerGroup.extend(
           }
         }
       } // or turn on nothing
+    // Collapsible search control
+      new L.Control.GPlaceAutocomplete({
+        position: 'topleft',
+        collapsed_mode: true,
+        callback: function(place){
+          var loc = place.geometry.location;
+          map.setView( [loc.lat(), loc.lng()], 18);
+        }
+      }).addTo(map);
     },
 
     onRemove: function(map) {},