Improve map panning and popup consistency: updated handleClick logic, fixed image size, truncated seller name

Author: Frankdevlopes

src/components/shared/map/Map.tsx

@@ -135,25 +135,38 @@ const Map = ({
   // Function to handle marker click
   const handleMarkerClick = (sellerCoordinates: LatLngTuple) => {
     if (!mapRef.current) return;
-
+  
     const map = mapRef.current;
     const currentZoom = map.getZoom();
-
-    // Set the view to the seller's coordinates
-    map.setView(sellerCoordinates, currentZoom, { animate: true });
-    // Get the position of the clicked marker
+    const maxZoom = map.getMaxZoom();
+    
+    // Check if zoom & pan have already been applied
+    const hasZoomed = mapRef.current?.getContainer().dataset.zoomApplied === "true";
+    
+    if (hasZoomed) return; // Prevent further zoom & pan on second click
+  
+    // Apply zoom increase only once
+    const targetZoom = Math.min(currentZoom + 3, maxZoom); 
+    const zoomLevel = targetZoom;
+  
+    // Convert marker lat/lng to pixel position
     const markerPoint = map.latLngToContainerPoint(sellerCoordinates);
-     // Get the width and height of the map container
-    const mapSize = map.getSize();
-    const mapWidth = mapSize.x;
-    const mapHeight = mapSize.y;
-    // Calculate the offsets to center the marker in the map view
-    const panOffset = L.point(mapWidth / 2 - markerPoint.x, mapHeight / 2 - markerPoint.y);
-
-    // Pan the map by the calculated offset
-    map.panBy(panOffset, { animate: false }); // Disable animation to make the movement instant
+  
+    // Adjust popup position: move **left (-X) and UP (-Y)**
+    const offsetX = -3;  // Slight left shift
+    const offsetY = 28;  // Moves UP instead of down
+    const panOffset = L.point(offsetX, offsetY);
+  
+    // Calculate new center position based on offset
+    const newCenter = map.containerPointToLatLng(markerPoint.subtract(panOffset));
+  
+    // Apply view changes **only once**
+    map.setView(newCenter, zoomLevel, { animate: false });
+  
+    // Mark zoom as applied (prevents further zooming & movement)
+    mapRef.current.getContainer().dataset.zoomApplied = "true";
   };
-
+  
   useEffect(() => {
     if (mapRef.current) {
       fetchInitialCoordinates();  // Fetch sellers when map is ready

src/components/shared/map/MapMarkerPopup.tsx

@@ -16,6 +16,13 @@ const MapMarkerPopup = ({ seller }: { seller: any }) => {
       ? seller.image
       : '/images/logo.svg';
 
+ const truncateChars = (text: string, maxChars: number): string => {
+        return text.length > maxChars ? text.slice(0, maxChars) + '...' : text;
+      };
+      
+      
+
+
   const translateSellerCategory = (category: string): string => {
     switch (category) {
       case 'activeSeller':
@@ -35,26 +42,45 @@ const MapMarkerPopup = ({ seller }: { seller: any }) => {
     <div style={{ position: 'relative', zIndex: 20, padding: '10px' }}>
       {/* Seller name and type - Close with a small gap */}
       <div style={{ textAlign: 'center', marginBottom: '5px' }}>
-        <h2 style={{ fontWeight: 'bold', fontSize: '18px', marginBottom: '2px' }}>
-          {seller.name}
-        </h2>
+      <h2
+  style={{
+    fontWeight: 'bold',
+    fontSize: '15px',
+    marginBottom: '2px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  }}
+>
+  {truncateChars(seller.name, 12)} {/* Adjust limit as needed */}
+</h2>
+
+
+
         {seller.seller_type && (
-          <p style={{ fontSize: '14px', color: '#6B7280', marginTop: '0px', marginBottom: '4px' }}>
-            {translateSellerCategory(seller.seller_type)}
-          </p>
+         <p style={{ fontSize: '14px', color: '#6B7280', marginTop: '0px', marginBottom: '4px' }}>
+  {translateSellerCategory(seller.seller_type)}
+</p>
+
         )}
       </div>
 
       {/* Seller image - Close to seller type */}
-      <div style={{ textAlign: 'center', marginBottom: '5px' }}>
-        <Image
-          src={imageUrl}
-          alt="Seller Image"
-          width={150}
-          height={50}
-          style={{ borderRadius: '0px', objectFit: 'cover', display: 'block', margin: '0 auto' }}
-        />
-      </div>
+      <div style={{ width: '150px', height: '70px', overflow: 'hidden', margin: '0 auto', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+  <Image
+    src={imageUrl}
+    alt="Seller Image"
+    width={imageUrl === '/images/logo.svg' ? 80 : 150}
+    height={imageUrl === '/images/logo.svg' ? 40 : 70}
+    style={{
+      objectFit: imageUrl === '/images/logo.svg' ? 'contain' : 'cover',
+      width: imageUrl === '/images/logo.svg' ? '80px' : '100%',
+      height: imageUrl === '/images/logo.svg' ? '40px' : '100%',
+    }}
+  />
+</div>
+
+
 
       {/* Trust-o-meter Label - Close to image */}
       <p style={{ textAlign: 'center', fontWeight: 'bold', fontSize: '14px', marginBottom: '2px' }}>