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
|
---
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
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}>
<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="map-container 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"
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>
document.addEventListener('DOMContentLoaded', function () {
const overlay = document.getElementById('map-overlay');
const mapIframe = document.getElementById('map-iframe');
if (overlay && mapIframe) {
overlay.addEventListener('click', function() {
this.style.display = 'none';
mapIframe.style.pointerEvents = 'auto';
});
}
});
</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>
<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>
|
