feat(precision): add useDeviceLocation option (#210)

This will ask and use the browser geolocation API.

Author: vvo

docs/source/documentation.html.md.erb

@@ -238,6 +238,26 @@ If using the authenticated API, the API key to use.
     </tr>
     <tr>
 <td markdown="1">
+<div class="api-entry" id="api-options-useDeviceLocation"><code>useDeviceLocation</code></div>
+
+Type: **boolean**
+</td>
+<td markdown="1">
+Ask and use the device location.
+</td>
+    </tr>
+    <tr>
+<td markdown="1">
+<div class="api-entry" id="api-options-computeQueryParams"><code>computeQueryParams</code></div>
+
+Type: **object**
+</td>
+<td markdown="1">
+Allows you to override computed query parameters sent to the [Algolia Places REST API](rest.html).
+</td>
+    </tr>
+    <tr>
+<td markdown="1">
 <div class="api-entry" id="api-options-clientOptions"><code>clientOptions</code></div>
 
 Type: **object**
@@ -519,7 +539,7 @@ If you're already using instantsearch.js, you can use Algolia Places out of the
 widget will do a search of places using Algolia Places and when an adress is selected, it
 will update the geolocation point of the instantsearch.js search.
 
-You can include it using a link tag: 
+You can include it using a link tag:
 
 ```html
 <%= javascript_include_tag config[:places_instantsearch_widget_cdn_url] %>

docs/source/javascripts/index.js

@@ -3,7 +3,8 @@
 
 const $input = document.querySelector('#landing-demo');
 const placesAutocomplete = places({
-  container: $input
+  container: $input,
+  useDeviceLocation: true
 });
 $input.style.opacity = 1; // we initially hide the input to avoid size flickering
 

src/createAutocompleteSource.js

@@ -11,6 +11,8 @@ export default function createAutocompleteSource({
   aroundLatLngViaIP,
   countries,
   formatInputValue,
+  computeQueryParams = params => params,
+  useDeviceLocation = false,
   language = navigator.language.split('-')[0],
   onHits = () => {},
   type
@@ -39,11 +41,19 @@ export default function createAutocompleteSource({
     defaultQueryParams.aroundRadius = aroundRadius;
   }
 
+  let userCoords;
+  if (useDeviceLocation) {
+    navigator.geolocation.watchPosition(
+      ({coords}) => userCoords = `${coords.latitude},${coords.longitude}`
+    );
+  }
+
   return (query, cb) => placesClient
-      .search({
+      .search(computeQueryParams({
         ...defaultQueryParams,
+        [userCoords ? 'aroundLatLng' : undefined]: userCoords,
         query
-      })
+      }))
       .then(
         content => {
           const hits = content.hits.map((hit, hitIndex) => {