Fix scroll

1 files changed, 74 insertions, 14 deletions

diff --git a/src/components/widgets/Map.astro b/src/components/widgets/Map.astro
index 76d81a4..ec36669 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
-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}`;
+// 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`;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
@@ -33,18 +33,78 @@ 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">
-      <iframe
-        width="100%"
-        height={height}
-        frameborder="0"
-        scrolling="no"
-        marginheight="0"
-        marginwidth="0"
-        src={mapUrl}
-        title="Mapa lokalizacji CustomWorks"
-        class="w-full"
-      >
-      </iframe>
+      <div class="relative" id="map-container">
+        <iframe
+          width="100%"
+          height={height}
+          frameborder="0"
+          scrolling="no"
+          marginheight="0"
+          marginwidth="0"
+          src={mapUrl}
+          title="Mapa lokalizacji CustomWorks"
+          class="w-full"
+          id="map-iframe"
+        >
+        </iframe>
+        <script>
+          // Disable scroll wheel zoom on the map iframe
+          document.addEventListener('DOMContentLoaded', function () {
+            const mapContainer = document.getElementById('map-container');
+            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 }
+              );
+            }
+          });
+        </script>
+      </div>
       <div class="absolute bottom-4 right-4">
         <a
           href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(location)}`}