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
|
---
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">
<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="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>
|
