1 files changed, 86 insertions, 64 deletions

diff --git a/src/main.js b/src/main.js
index c8e7122..19716e6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,41 +1,20 @@
 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);
 
+// Elements
+const polygonSelect = document.querySelector(".polygon");
+const rectangleSelect = document.querySelector(".rectangle");
+
 let markers = [];
+let map;
 
 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({}),
-// ]);
-
-let map;
-
 const initialPolygonCoords = [
   { lat: 51.555519, lng: -0.215208 },
   { lat: 51.526021, lng: -0.021665 },
@@ -52,13 +31,12 @@ const london_bounds = {
 };
 
 function removeMarkers() {
-  console.log("hi");
   for (let i = 0; i < markers.length; i++) {
     markers[i].setMap(null);
   }
 }
 
-async function initMap() {
+async function initMap(shape) {
   const position = { lat: 51.508616, lng: -0.125319 };
 
   const { Map, Polygon, Rectangle, InfoWindow } =
@@ -80,52 +58,96 @@ async function initMap() {
     },
   });
 
-  const rectangle = new Rectangle({
-    bounds: london_bounds,
-    editable: true,
-    draggable: true,
-  });
-
-  rectangle.setMap(map);
-
-  rectangle.addListener("bounds_changed", async function () {
+  function handleBoundsChange(activeShape) {
+    console.log("happening");
     removeMarkers();
-    const { south, west, north, east } = rectangle.getBounds()?.toJSON();
+    const { south, west, north, east } = activeShape.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,
+    function debounce(func, delay) {
+      let timer;
+      return function (...args) {
+        const context = this;
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          func.apply(context, args);
+        }, delay);
+      };
+    }
+
+    async function getSearch() {
+      const res = await client.searchSingleIndex({
+        indexName: INDEX_NAME,
+        searchParams: {
+          ...algolia_params,
+          insideBoundingBox: [algolia_bounds],
+          attributesToRetrieve: ["_geoloc", "name"],
         },
       });
 
-      const window = new InfoWindow({
-        content: hit.name,
-      });
+      res.hits.forEach((hit) => {
+        const marker = new AdvancedMarkerElement({
+          map: map,
+          position: {
+            lat: hit._geoloc.lat,
+            lng: hit._geoloc.lng,
+          },
+        });
 
-      marker.addListener("click", function () {
-        window.open({
-          anchor: marker,
-          map,
+        const window = new InfoWindow({
+          content: hit.name,
         });
+
+        marker.addListener("click", function () {
+          window.open({
+            anchor: marker,
+            map,
+          });
+        });
+
+        markers.push(marker);
       });
+    }
 
-      markers.push(marker);
+    const doAll = debounce(getSearch, 500);
+    doAll();
+  }
+
+  if (shape === "rectangular") {
+    console.log("doing");
+    const rectangle = new Rectangle({
+      bounds: london_bounds,
+      editable: true,
+      draggable: true,
     });
-  });
+
+    rectangle.setMap(map);
+    rectangle.addListener("bounds_changed", handleBoundsChange(rectangle));
+  } else if (shape === "polygonular") {
+    const polygon = new Polygon({
+      paths: initialPolygonCoords,
+      strokeColor: "#FF0000",
+      strokeOpacity: 0.8,
+      strokeWeight: 2,
+      fillColor: "#FF0000",
+      fillOpacity: 0.35,
+      editable: true,
+      draggable: true,
+    });
+
+    polygon.setMap(map);
+    polygon.addListener("bounds_changed", handleBoundsChange(polygon));
+  }
 }
 
-initMap();
+[rectangleSelect, polygonSelect].forEach((el) => {
+  el.addEventListener("click", function (e) {
+    if (e.target.classList.contains("rectangle")) {
+      initMap("rectangular");
+    } else {
+      initMap("polygonular");
+    }
+  });
+});
+
+initMap("rectangular");