fixed positioning

2 files changed, 20 insertions, 5 deletions

diff --git a/src/index.css b/src/index.css
index 57ac450..08ab90b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,11 +9,14 @@
 } */
 
 #map {
-  height: 100%;
-  height: calc(100dvh - (64px + 288px));
+  height: 100dvh;
   width: 100%;
 }
 
+.bottom--hide {
+  bottom: -14rem;
+}
+
 .gm-style-mtc-bbw {
   display: none;
 }
@@ -84,3 +87,9 @@ body {
   stroke-miterlimit: 10;
   stroke-dasharray: 4, 3;
 }
+
+.bar {
+  height: 20px;
+  width: 200px;
+  background-color: red;
+}
diff --git a/src/main.js b/src/main.js
index ac19077..ceeeb52 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,7 +28,7 @@ const dataController = (function () {
     { lat: 51.493989, lng: -0.085187 },
   ];
 
-  const centralPosition = { lat: 51.508616, lng: -0.125319 };
+  const centralPosition = { lat: 51.476, lng: -0.11 };
 
   return {
     initialRectBounds,
@@ -74,6 +74,8 @@ const interfaceController = (function () {
     hits: '#hits',
     searchBar: '#searchbar',
     pubCount: '.pub-count',
+    toggle: '#toggle',
+    bottom: '#bottom',
   };
 
   const generateMap = async function (bounds, position, maxSpace, initialPolygonBounds, currentShape, zoom = 12) {
@@ -224,7 +226,7 @@ const controller = (function (dataCTRL, uiCTRL) {
   const initialPolygonBounds = dataCTRL.initialPolygonBounds; // Polygon bounds
 
   const initialSetup = async function () {
-    await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12);
+    await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12.5);
 
     const searchResults = await dataCTRL.getSearchResults(
       '',
@@ -285,7 +287,7 @@ const controller = (function (dataCTRL, uiCTRL) {
 
   const setupEventListeners = async function () {
     $(DOM.selectRect).addEventListener('click', async () => {
-      await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12);
+      await uiCTRL.initMap(rectBounds, centralPoint, mapBounds, initialPolygonBounds, 'rectangle', 12.5);
       const searchResults = await dataCTRL.getSearchResults(
         dataCTRL.getCurrentQuery(),
         'rectangle',
@@ -326,6 +328,10 @@ const controller = (function (dataCTRL, uiCTRL) {
       await uiCTRL.embedSearchResults(searchResults.hits);
       uiCTRL.updateHitsList(searchResults.hits);
     });
+
+    $(DOM.toggle).addEventListener('click', () => {
+      $(DOM.bottom).classList.toggle('bottom--hide');
+    });
   };
 
   return {