1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
---
import type { Map as Props } from '~/types';
import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
const {
title = '',
subtitle = '',
tagline = '',
location = '',
height = 400,
lat = 53.1234,
lon = 18.0123,
id,
isDark = false,
classes = {},
bg = await Astro.slots.render('bg'),
} = Astro.props;
// Use provided coordinates or default to Bydgoszcz, Miedzyń
const coordinates = {
lat: lat,
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`;
---
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
<Headline title={title} subtitle={subtitle} tagline={tagline} />
<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">
<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)}`}
target="_blank"
rel="noopener noreferrer"
class="bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 px-3 py-2 rounded-md text-sm font-medium shadow-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors duration-200"
>
Otwórz w OpenStreetMap
</a>
</div>
</div>
</div>
</WidgetWrapper>
|
