around location

3 files changed, 37 insertions, 17 deletions

diff --git a/README.md b/README.md
index d18358c..d1cadd6 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,6 @@ Current searches for pubs in the UK are a bit rubbish. This takes inspiration fr
 
 ## To do:
 
-[x] Get all pubs using an API [] Init map all one function [] City of London is missing [] Replace null values for lat,lon with real data [] Change search client to just [] Don't return \_highlightResult? [] Run search on first load [] Clear listeners [] remove duplication of search requests when selecting shape [] shape construction should probably be in data controller [] bundle all remove markers, query and result render into one function
+[x] Get all pubs using an API [] Init map all one function [] City of London is missing [] Replace null values for lat,lon with real data [] Change search client to just [] Don't return \_highlightResult? [] Run search on first load [] Clear listeners [] remove duplication of search requests when selecting shape [] shape construction should probably be in data controller [] bundle all remove markers, query and result render into one function [] maxmapspace and initialrectbounds are the wrong way around [] Sort out generatemap arguments
 
 ![alt text](image.png)
diff --git a/index.html b/index.html
index e2cc7af..888e54d 100644
--- a/index.html
+++ b/index.html
@@ -56,7 +56,14 @@
           <span class="select--polygon">Polygon</span>
         </div>
 
-        <div>Try around your <span class="select--ip">location</span> instead</div>
+        <div>
+          Try around your
+          <span class="select--ip relative"
+            >location<span
+              class="ip-loader hidden animate-ping h-2 w-2 bg-blue-500 rounded-full absolute top-0 -right-2"
+            ></span
+          ></span>
+        </div>
       </div>
     </header>
 
diff --git a/src/refactor.js b/src/refactor.js
index d4e50a7..e68d2d9 100644
--- a/src/refactor.js
+++ b/src/refactor.js
@@ -43,10 +43,15 @@ const dataController = (function () {
         geoParam = {
           insideBoundingBox: [bounds],
         };
-      } else {
+      } else if (shape === 'polygon') {
         geoParam = {
           insidePolygon: [bounds],
         };
+      } else {
+        geoParam = {
+          aroundLatLng: bounds,
+          // aroundRadius: 1000,
+        };
       }
 
       const res = await client.searchSingleIndex({
@@ -74,14 +79,16 @@ const interfaceController = (function () {
     selectRect: '.select--rectangle',
     selectPoly: '.select--polygon',
     ip: '.select--ip',
+    ipLoader: '.ip-loader',
     hits: '#hits',
     searchBar: '#searchbar',
   };
 
-  const generateMap = async function (bounds, position, maxSpace, initialPolygonBounds, currentShape) {
+  const generateMap = async function (bounds, position, maxSpace, initialPolygonBounds, currentShape, zoom = 12) {
+    console.log(bounds, position, maxSpace, initialPolygonBounds, currentShape, zoom);
     const { Map, Polygon, Rectangle } = await google.maps.importLibrary('maps');
     map = new Map(document.getElementById('map'), {
-      zoom: 9,
+      zoom,
       center: position,
       mapId: 'pub_map',
       restriction: {
@@ -96,7 +103,8 @@ const interfaceController = (function () {
         editable: true,
         draggable: true,
       });
-    } else {
+      shape.setMap(map);
+    } else if (currentShape === 'polygon') {
       shape = new Polygon({
         paths: initialPolygonBounds,
         strokeColor: '#FF0000',
@@ -108,8 +116,8 @@ const interfaceController = (function () {
         draggable: true,
         geodesic: true,
       });
+      shape.setMap(map);
     }
-    shape.setMap(map);
   };
 
   return {
@@ -198,7 +206,7 @@ const controller = (function (dataCTRL, uiCTRL) {
   const initialPolygonBounds = dataCTRL.initialPolygonBounds; // Polygon bound
 
   const initialSetup = async function () {
-    await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle');
+    await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12);
 
     const searchResults = await dataCTRL.getSearchResults('', 'rectangle', [
       rectBounds.north,
@@ -258,7 +266,7 @@ const controller = (function (dataCTRL, uiCTRL) {
 
   const setupShapeSelectListeners = async function () {
     $(DOM.selectRect).addEventListener('click', async () => {
-      await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle');
+      await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12);
       const searchResults = await dataCTRL.getSearchResults(dataCTRL.getCurrentQuery(), 'rectangle', [
         rectBounds.north,
         rectBounds.east,
@@ -271,7 +279,7 @@ const controller = (function (dataCTRL, uiCTRL) {
     });
 
     $(DOM.selectPoly).addEventListener('click', async () => {
-      await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'polygon');
+      await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'polygon', 12);
       const translatedPolyBounds = initialPolygonBounds.flatMap(({ lat, lng }) => [lat, lng]);
       const searchResults = await dataCTRL.getSearchResults(
         dataCTRL.getCurrentQuery(),
@@ -284,14 +292,19 @@ const controller = (function (dataCTRL, uiCTRL) {
     });
 
     $(DOM.ip).addEventListener('click', async () => {
-      const res = await client.searchSingleIndex({
-        indexName: INDEX_NAME,
-        searchParams: {
-          aroundLatLngViaIP: true,
-          aroundRadius: 1000,
-        },
+      $(DOM.ipLoader).classList.replace('hidden', 'inline-block');
+      navigator.geolocation.getCurrentPosition(async (pos) => {
+        const position = { lat: pos.coords.latitude, lng: pos.coords.longitude };
+        await uiCTRL.initMap('', position, rectBounds, '', 'ip', 10);
+        const searchResults = await dataCTRL.getSearchResults(
+          dataCTRL.getCurrentQuery(),
+          'ip',
+          `${pos.coords.latitude}, ${pos.coords.longitude}`
+        );
+        await uiCTRL.embedSearchResults(searchResults.hits);
+        uiCTRL.updateHitsList(searchResults.hits);
+        $(DOM.ipLoader).classList.replace('inline-block', 'hidden');
       });
-      console.log(res);
     }),
       $(DOM.searchBar).addEventListener('input', async (e) => {
         const q = dataCTRL.getCurrentQuery();