Dotted Map

1<script lang="ts">
2	import { createMap } from "piri";
3	import { cn } from "$UTILS$.js";
4 
5	interface Marker extends Record<string, unknown> {
6		lat: number;
7		lng: number;
8		size?: number;
9	}
10 
11	interface Props {
12		width?: number;
13		height?: number;
14		mapSamples?: number;
15		markers?: Marker[];
16		dotColor?: string;
17		markerColor?: string;
18		dotRadius?: number;
19		stagger?: boolean;
20		class?: string;
21		style?: string;
22	}
23 
24	let {
25		width = 150,
26		height = 75,
27		mapSamples = 5000,
28		markers = [],
29		markerColor = "#FF6900",
30		dotColor = "currentColor",
31		dotRadius = 0.2,
32		stagger = true,
33		class: className,
34		style,
35	}: Props = $props();
36 
37	let map = $derived(
38		createMap({
39			width,
40			height,
41			mapSamples,
42			radius: dotRadius,
43			grid: stagger ? "diagonal" : "vertical",
44		})
45	);
46 
47	let points = $derived(map.points);
48	let processedMarkers = $derived(
49		map.addMarkers(markers) as Array<{ x: number; y: number; size?: number }>
50	);
51</script>
52 
53<svg
54	viewBox="0 0 {width} {height}"
55	class={cn("text-gray-500 dark:text-gray-500", className)}
56	style="width: 100%; height: 100%; {style || ''}"
57>
58	{#each points as point}
59		<circle cx={point.x} cy={point.y} r={dotRadius} fill={dotColor} />
60	{/each}
61	{#each processedMarkers as marker}
62		<circle cx={marker.x} cy={marker.y} r={marker.size ?? dotRadius} fill={markerColor} />
63	{/each}
64</svg>