Fixed map centering based on screen-width.

Author: cledantec

experiment-7/assets/css/style.css

@@ -136,8 +136,6 @@ body {
   left: 0;
   width: 100vw;
   height: 100vh;
-  /* margin-top: calc(-100vh / 2 + 300px);
-  margin-left: calc(-100vw / 2 + 300px); */
   background: transparent !important;
 }
 
@@ -187,24 +185,17 @@ body {
   }
 
   #chat-section-right {
-    /* width: 30%; */
     width: 50%;
-    height: 80vh;
+    height: 560px;
     flex-direction: column;
   }
 
   #chat-section-left {
-    /* width: 30%;
-    height: 80vh;
-    overflow-y: auto;
-    flex-direction: column; */
     display: none;
   }
 
   #map-section {
-    /* width: 50%; */
     width: 45%;
-    /* height: 80vh; */
   }
 
   #category-pie-chart {
@@ -226,14 +217,6 @@ body {
   padding: 0 0 15px;
   height: 40vh;
   width: 100%;
-  /* border-radius: var(--border-radius-medium);
-  border: 1px solid var(--highlight);
-  box-shadow: var(--shadow-inner); */
-  /* border-radius: var(--border-radius-medium);
-border-bottom: 1px solid var(--highlight);
-border-left: 1px solid var(--highlight);
-border-right: 1px solid var(--highlight); */
-
 }
 
 .chat-messages-wrapper {
@@ -282,14 +265,10 @@ border-right: 1px solid var(--highlight); */
 }
 
 .chat-input-container {
-  /* position: absolute;
-bottom: 0;
-z-index: 1000; */
   width: 100%;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
   background-color: rgba(250, 250, 250, .9);
-  /* border-top: 1px dotted var(--highlight); */
   padding: var(--spacing-small);
 }
 
@@ -337,8 +316,7 @@ z-index: 1000; */
 
 .chat-content-container {
   border-top: none;
-  background: transparent;
-  /* border-radius: var(--border-radius-medium); */
+  background-color: rgba(250, 250, 250, .9);
   border-bottom-left-radius: var(--border-radius-medium);
   border-bottom-right-radius: var(--border-radius-medium);
   border: 1px solid var(--highlight);
@@ -359,9 +337,9 @@ z-index: 1000; */
 .chat-tab {
   padding: 10px;
   cursor: pointer;
+  color: #999;
   background-color: rgba(235, 235, 235, 0.7);
   border-bottom: 1px solid var(--highlight);
-  /* margin-bottom: -1px; */
   transition: all 0.2s ease;
 }
 
@@ -384,6 +362,7 @@ z-index: 1000; */
 }
 
 .chat-tab.active {
+  color: #000;
   background-color: rgba(250, 250, 250, .9);
   border-bottom: 3px solid white;
   font-weight: bold;

experiment-7/assets/js/app-script.js

@@ -19,7 +19,8 @@
     config: {
       mapbox: {
         token: window.MAPBOX_TOKEN,
-        initialCenter: [-71.07601, 42.28988],
+        // initialCenter: [-71.07601, 42.28988],
+        initialCenter: [-71.07, 42.29],
         backgroundInitialZoom: 12,
         magnifiedInitialZoom: 13
       },
@@ -107,6 +108,23 @@
         this.setupEventHandlers(beforeMap, afterMap);
       },
 
+      adjustMapCenter() {
+        const referenceDiv = document.getElementById('map-section');
+        console.log('Getting reference div');
+        if (window.innerWidth > 768) {
+          console.log('Need to recenter map');
+          const shiftX = referenceDiv.offsetWidth / 3;
+          console.log('Shift by: ' + shiftX);
+          const currentCenter = beforeMap.getCenter();
+          const point = beforeMap.project(currentCenter);
+          point.x += shiftX;
+
+          const newCenter = beforeMap.unproject(point);
+
+          beforeMap.setCenter(newCenter);
+        }
+      },
+
       /**
        * Set up map event handlers
        * @param {Object} beforeMap 
@@ -155,6 +173,7 @@
               console.log('Initial background map data applied');
             }
           }
+          this.adjustMapCenter();
         });
         beforeMap.on('moveend', () => this.handleMapMoveEnd(beforeMap, afterMap));
       },
@@ -745,7 +764,7 @@
       );
 
       function tryUpdateMap(attempts = 0) {
-        if (attempts >= 5) {
+        if (attempts >= 10) {
           console.error("Failed to update map after multiple attempts");
           return;
         }
@@ -843,19 +862,19 @@ window.clientside = {
   ...window.clientside,
   scrollChat: function(messages, containerId) {
     if (!messages) return {};
-    
+
     // Get the container
     const container = document.getElementById(containerId);
     if (!container) return {};
-    
+
     // Force immediate scroll to bottom
     container.scrollTop = container.scrollHeight;
-    
+
     // Also scroll after a short delay to ensure all content is rendered
     setTimeout(() => {
       container.scrollTop = container.scrollHeight;
     }, 100);
-    
+
     return {};
   }
 };