tabler/shared/ui/Map.astro

---
// Port of shared/includes/ui/map.html.
// The Mapbox GL init <script> renders directly here (no more page-scripts registry),
// wrapping the instance in window.tabler_map.
// The access token comes from site data (site.mapboxKey).
// Renders nothing unless maps[mapId] exists (Liquid: {% if data %}).
import maps from '@data/maps.json';
import site from '@data/site.json';

interface Props {
	/** map-id param in ui/map.html — key into the maps data */
	mapId: string;
	ratio?: string;
}

const { mapId, ratio } = Astro.props;

type MapData = {
	title?: string;
	ratio?: string;
	card?: boolean;
	style?: string;
	zoom?: number;
	center?: [number, number];
	markers?: { name?: string; center: [number, number] }[];
};

const data = (maps as unknown as Record<string, MapData>)[mapId];

const mapContainerId = `map-${mapId}`;
const style = data ? (data.style ?? 'streets-v11') : undefined;
const zoom = data?.zoom ?? 13;
const center = data?.center ? [data.center[1], data.center[0]] : [13.4049, 52.518827];
const markers = (data?.markers ?? []).map((marker) => [marker.center[1], marker.center[0]]);

const ratioClass = data?.ratio ?? ratio ?? '16x9';
---

{
	data && (
		<div class={`ratio ratio-${ratioClass}`}>
			<div>
				<div id={mapContainerId} class={`w-100 h-100${data.card ? ' rounded' : ''}`} />
			</div>
		</div>
	)
}
{
	data && (
		<Fragment>
		<Fragment set:html={'<!-- BEGIN MAP -->'} />
		<script define:vars={{ mapboxKey: site.mapboxKey, mapContainerId, style, zoom, center, markers }}>
			window.tabler_map ??= {};

			function initMap() {
				mapboxgl.accessToken = mapboxKey;
				const map = new mapboxgl.Map({
					container: mapContainerId,
					style: `mapbox://styles/mapbox/${style}`,
					zoom,
					center,
				});

				markers.forEach((coords) => {
					new mapboxgl.Marker({ color: 'var(--tblr-primary)' }).setLngLat(coords).addTo(map);
				});

				window.tabler_map[mapContainerId] = map;
			}

			document.readyState !== 'loading' ? initMap() : document.addEventListener('DOMContentLoaded', initMap, { once: true });
		</script>
		<Fragment set:html={'<!-- END MAP -->'} />
		</Fragment>
	)
}