feat: fix map scroll

1 files changed, 44 insertions, 53 deletions

diff --git a/src/components/widgets/Map.astro b/src/components/widgets/Map.astro
index ec36669..6c04220 100644
--- a/src/components/widgets/Map.astro
+++ b/src/components/widgets/Map.astro
@@ -24,8 +24,8 @@ const coordinates = {
   lon: lon,
 };
 
-// Create map URL with proper coordinates and disabled scroll wheel zoom
-const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${coordinates.lon - 0.01},${coordinates.lat - 0.01},${coordinates.lon + 0.01},${coordinates.lat + 0.01}&layer=mapnik&marker=${coordinates.lat},${coordinates.lon}&scrollWheelZoom=false`;
+// Create map URL with proper coordinates
+const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${coordinates.lon - 0.01},${coordinates.lat - 0.01},${coordinates.lon + 0.01},${coordinates.lat + 0.01}&layer=mapnik&marker=${coordinates.lat},${coordinates.lon}`;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
@@ -33,7 +33,7 @@ const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${coordinat
 
   <div class="mx-auto max-w-7xl p-4 md:px-8">
     <div class="relative overflow-hidden rounded-lg shadow-xl dark:shadow-none dark:border dark:border-slate-600">
-      <div class="relative" id="map-container">
+      <div class="map-container relative" id="map-container">
         <iframe
           width="100%"
           height={height}
@@ -45,62 +45,26 @@ const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${coordinat
           title="Mapa lokalizacji CustomWorks"
           class="w-full"
           id="map-iframe"
+          style="pointer-events: none;"
         >
         </iframe>
+        <div class="overlay absolute top-0 left-0 w-full h-full bg-white/50 dark:bg-slate-800/50 z-10 cursor-pointer flex items-center justify-center" id="map-overlay">
+          <div class="text-center p-6 bg-white dark:bg-slate-800 rounded-lg shadow-lg">
+            <div class="text-2xl mb-2">🗺️</div>
+            <p class="text-slate-700 dark:text-slate-300 font-medium">Kliknij, aby włączyć mapę</p>
+            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Click to enable map</p>
+          </div>
+        </div>
         <script>
-          // Disable scroll wheel zoom on the map iframe
           document.addEventListener('DOMContentLoaded', function () {
-            const mapContainer = document.getElementById('map-container');
+            const overlay = document.getElementById('map-overlay');
             const mapIframe = document.getElementById('map-iframe');
 
-            if (mapContainer && mapIframe) {
-              // Prevent scroll wheel events from reaching the iframe
-              mapContainer.addEventListener(
-                'wheel',
-                function (e) {
-                  e.preventDefault();
-                  e.stopPropagation();
-                },
-                { passive: false }
-              );
-
-              // Also prevent touch events that might cause zoom
-              mapContainer.addEventListener(
-                'touchstart',
-                function (e) {
-                  // Only prevent if it's a pinch gesture (multiple touches)
-                  if (e.touches.length > 1) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }
-                },
-                { passive: false }
-              );
-
-              // Prevent pinch zoom
-              mapContainer.addEventListener(
-                'gesturestart',
-                function (e) {
-                  e.preventDefault();
-                },
-                { passive: false }
-              );
-
-              mapContainer.addEventListener(
-                'gesturechange',
-                function (e) {
-                  e.preventDefault();
-                },
-                { passive: false }
-              );
-
-              mapContainer.addEventListener(
-                'gestureend',
-                function (e) {
-                  e.preventDefault();
-                },
-                { passive: false }
-              );
+            if (overlay && mapIframe) {
+              overlay.addEventListener('click', function() {
+                this.style.display = 'none';
+                mapIframe.style.pointerEvents = 'auto';
+              });
             }
           });
         </script>
@@ -118,3 +82,30 @@ const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${coordinat
     </div>
   </div>
 </WidgetWrapper>
+
+<style>
+  .map-container {
+    position: relative;
+  }
+  
+  .overlay {
+    position: absolute;
+    top: 0; 
+    left: 0;
+    width: 100%; 
+    height: 100%;
+    background: rgba(255, 255, 255, 0.5);
+    z-index: 10;
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+  }
+  
+  .overlay:hover {
+    opacity: 0.8;
+  }
+  
+  /* Dark mode overlay */
+  .dark .overlay {
+    background: rgba(30, 41, 59, 0.5);
+  }
+</style>