tabler/shared/components/demo/Map.astro

---
// Mapbox GL map. Access token from the MAPBOX_KEY environment variable (.env or
// the host's settings), never from the source. Renders nothing unless
// maps[mapId] exists; without a token the container renders but the map is not
// initialised (Mapbox GL throws on a missing token).
import maps from '@data/maps.json';
import CaptureScript from '../CaptureScript.astro';

interface Props {
	/** Key into the maps data */
	mapId: string;
	ratio?: string;
}

const { mapId, ratio } = Astro.props;

const mapboxKey = import.meta.env.MAPBOX_KEY ?? process.env.MAPBOX_KEY ?? '';

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' : ''}`} role="img" aria-label={data.title ?? 'Map'} />
			</div>
		</div>
	)
}
{
	data && mapboxKey && (
		<CaptureScript>
			<!-- BEGIN MAP -->
			<script is:inline define:vars={{ 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>
			<!-- END MAP -->
		</CaptureScript>
	)
}