diff options
| -rw-r--r-- | src/components/widgets/Map.astro | 97 |
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> |