📦 NEW: going well

1 files changed, 105 insertions, 13 deletions

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);
+    });
   });
 }