📦 NEW: going well

3 files changed, 116 insertions, 13 deletions

diff --git a/README.md b/README.md
index 1461165..30b0f30 100644
--- a/README.md
+++ b/README.md
@@ -10,8 +10,16 @@ Current searches for pubs in the UK are a bit rubbish. This takes inspiration fr
 2. Google sucked at this, so used Wyre api
 3. Uploaded to Algolia
 4. Limite the map to London using restriction
+5. Draw a rectangle
+6. Listen to rectangle resize events
+7. Query Algolia with the bounds
+8. Limit response fields, we only really need the geoloc
+9. Remove all markers when looking the markers
 
 ## To do:
 
 [x] Get all pubs using an API
 [] Replace null values for lat,lon with real data
+[] Change search client to just
+[] Don't return \_highlightResult?
+[] Run search on first load
diff --git a/index.html b/index.html
index 14b3160..d645716 100644
--- a/index.html
+++ b/index.html
@@ -61,6 +61,9 @@
         </div>
       </div>
     </main>
+
+    <div id="searchbox"></div>
+    <div id="hits"></div>
     <!-- prettier-ignore -->
     <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
           ({key: "AIzaSyCtS6CiOrG95FhroSUdDJJokItndcMkrgc", v: "weekly"});</script>
diff --git a/src/main.js b/src/main.js
index 91d53e5..c8e7122 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,20 +1,72 @@
+import { algoliasearch } from "algoliasearch";
+import { info } from "autoprefixer";
+import instantsearch from "instantsearch.js";
+import { searchBox, hits, configure } from "instantsearch.js/es/widgets";
 const MAPS_KEY = "AIzaSyCtS6CiOrG95FhroSUdDJJokItndcMkrgc";
+const ALGOLIA_KEY = "9fb3db0222f7b5aef0e2b30791ee6201";
+const INDEX_NAME = "pubfinder";
+const client = algoliasearch("YSWWVAX5RB", ALGOLIA_KEY);
+
+let markers = [];
+
+const algolia_params = {
+  hitsPerPage: 1000,
+};
+
+// const search = instantsearch({
+//   indexName: INDEX_NAME,
+//   searchClient,
+//   // onStateChange({ uiState, setUiState }) {
+//   //   setUiState(uiState);
+//   // },
+//   // probably want to set initial search state depending on the rectangle coords
+// });
+
+// cons
+
+// search.addWidgets([
+//   searchBox({
+//     container: "#searchbox",
+//   }),
+//   hits({
+//     container: "#hits",
+//   }),
+//   configure({}),
+// ]);
 
-// Initialize and add the map
 let map;
 
+const initialPolygonCoords = [
+  { lat: 51.555519, lng: -0.215208 },
+  { lat: 51.526021, lng: -0.021665 },
+  { lat: 51.454394, lng: -0.014601 },
+  { lat: 51.425103, lng: -0.145876 },
+  { lat: 51.514498, lng: -0.257455 },
+];
+
+const london_bounds = {
+  north: 51.532,
+  south: 51.478,
+  east: -0.072,
+  west: -0.16,
+};
+
+function removeMarkers() {
+  console.log("hi");
+  for (let i = 0; i < markers.length; i++) {
+    markers[i].setMap(null);
+  }
+}
+
 async function initMap() {
-  // The location of Uluru
   const position = { lat: 51.508616, lng: -0.125319 };
-  // Request needed libraries.
 
-  //@ts-ignore
-  const { Map } = await google.maps.importLibrary("maps");
+  const { Map, Polygon, Rectangle, InfoWindow } =
+    await google.maps.importLibrary("maps");
   const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
 
-  // The map, centered at Uluru
   map = new Map(document.getElementById("map"), {
-    zoom: 7,
+    zoom: 4,
     center: position,
     mapId: "DEMO_MAP_ID",
     restriction: {
@@ -24,15 +76,55 @@ async function initMap() {
         west: -0.51,
         east: 0.23,
       },
-      //   strictBounds: true,
+      strictBounds: true,
     },
   });
 
-  // The marker, positioned at Uluru
-  const marker = new AdvancedMarkerElement({
-    map: map,
-    position: position,
-    title: "Uluru",
+  const rectangle = new Rectangle({
+    bounds: london_bounds,
+    editable: true,
+    draggable: true,
+  });
+
+  rectangle.setMap(map);
+
+  rectangle.addListener("bounds_changed", async function () {
+    removeMarkers();
+    const { south, west, north, east } = rectangle.getBounds()?.toJSON();
+    const algolia_bounds = [north, east, south, west];
+
+    const res = await client.searchSingleIndex({
+      indexName: INDEX_NAME,
+      searchParams: {
+        ...algolia_params,
+        insideBoundingBox: [algolia_bounds],
+        attributesToRetrieve: ["_geoloc", "name"],
+      },
+    });
+
+    res.hits.forEach((hit) => {
+      console.log("hitting again");
+      const marker = new AdvancedMarkerElement({
+        map: map,
+        position: {
+          lat: hit._geoloc.lat,
+          lng: hit._geoloc.lng,
+        },
+      });
+
+      const window = new InfoWindow({
+        content: hit.name,
+      });
+
+      marker.addListener("click", function () {
+        window.open({
+          anchor: marker,
+          map,
+        });
+      });
+
+      markers.push(marker);
+    });
   });
 }