mirror of
https://github.com/tabler/tabler.git
synced 2026-08-30 13:51:28 +04:00
78 lines
2.1 KiB
Plaintext
78 lines
2.1 KiB
Plaintext
---
|
|
// The Mapbox GL init <script> is captured via {% capture_script %} in Liquid, so it
|
|
// is registered with addPageScript synchronously here. We mirror the development
|
|
// build, which wraps 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 { addPageScript } from '@shared/lib/page-scripts';
|
|
import InlineScript from '@shared/components/InlineScript.astro';
|
|
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 Record<string, MapData>)[mapId];
|
|
|
|
let script = '';
|
|
if (data) {
|
|
const style = data.style ?? 'streets-v11';
|
|
const zoom = data.zoom ?? 13;
|
|
const centerJs = data.center
|
|
? `center: [${data.center[1]}, ${data.center[0]}],`
|
|
: `center: [13.404900, 52.518827],`;
|
|
const markersJs = (data.markers ?? [])
|
|
.map(
|
|
(marker) =>
|
|
`\n\t\t\tnew mapboxgl.Marker({ color: "var(--tblr-primary)" }).setLngLat([${marker.center[1]}, ${marker.center[0]}]).addTo(map);\n`,
|
|
)
|
|
.join('');
|
|
|
|
script = `<script>
|
|
window.tabler_map = window.tabler_map || {};
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
mapboxgl.accessToken = '${site.mapboxKey}';
|
|
var map = new mapboxgl.Map({
|
|
container: 'map-${mapId}',
|
|
style: 'mapbox://styles/mapbox/${style}',
|
|
zoom: ${zoom},
|
|
${centerJs}
|
|
});
|
|
${markersJs}
|
|
window.tabler_map["map-${mapId}"] = map;
|
|
});
|
|
</script>`;
|
|
|
|
addPageScript(script);
|
|
}
|
|
|
|
const ratioClass = data?.ratio ?? ratio ?? '16x9';
|
|
---
|
|
|
|
{
|
|
data && (
|
|
<div class={`ratio ratio-${ratioClass}`}>
|
|
<div>
|
|
<div id={`map-${mapId}`} class={`w-100 h-100${data.card ? ' rounded' : ''}`} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
{data && <InlineScript code={script} />}
|