2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T616e,"use client"; import "maplibre-gl/dist/maplibre-gl.css"; import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ComponentProps, type ReactNode } from "react"; import { createPortal } from "react-dom"; import type { GeoJSONSource, LayerSpecification, Map as MlMap, Marker as MlMarker, Popup as MlPopup } from "maplibre-gl"; import { cn } from "@/lib/utils"; import { MapMarkerPin, MapPopupCard, MapSkeleton } from "./map-parts"; import { MapStaticFallback } from "./map-static"; import { arcLine, buildStyle, pointAt, resolvePalette, routeMetrics, type MapPalette, type MapScheme } from "./map-theme"; import type { MapClusterPoint, MapGeometry, MapMarkerData, Pos } from "./map-types"; export type { MapScheme } from "./map-theme"; export { DEMO_STYLE_URL } from "./map-theme"; export * from "./map-types"; export { MapMarkerPin, MapPopupCard, MapSchemeSwitch, MapSkeleton } from "./map-parts"; export { MapStaticFallback } from "./map-static"; type MapModule = typeof import("maplibre-gl"); export type MapSurfaceProps = Omit, "children" | "defaultValue" | "onChange"> & MapGeometry & { /** Initial camera. Changing it later flies the camera there. */ center?: Pos; zoom?: number; /** Southwest and northeast corners. Wins over center and zoom, and stays right at any container size. */ bounds?: [Pos, Pos]; /** Fit the camera to the markers (and refit when the set of markers changes). */ fit?: boolean; /** Selected marker id (controlled). */ value?: string | null; defaultValue?: string | null; onValueChange?: (value: string | null) => void; /** Move the camera to a marker when it is selected. */ flyToSelected?: boolean; /** Zoom to use when flying to a selected marker. Omit to keep the current zoom and only pan. */ selectZoom?: number; /** Highest zoom `fit` may reach. Lower it where the tiles have nothing to draw at city scale. */ fitMaxZoom?: number; /** `system` follows the page theme. A different explicit scheme uses a fixed Kobra neutral palette. */ colorScheme?: "system" | MapScheme; /** `auto` picks the static fallback without WebGL or with `prefers-reduced-data`. `static` forces it. */ mode?: "auto" | "map" | "static"; /** Hold the skeleton, for example while a store list loads. */ loading?: boolean; /** Ctrl or two-finger gestures so the map never traps page scroll. */ cooperativeGestures?: boolean; renderPopup?: (marker: MapMarkerData, close: () => void) => ReactNode; /** Escape hatch to the underlying MapLibre map once it has loaded. */ onMapReady?: (map: MlMap) => void; /** 0 to 1 along the track, about four times a second. */ onTrackProgress?: (fraction: number) => void; /** * URL of `maplibre-gl-worker.mjs`. A bundled build cannot resolve the worker beside its chunk, so by default * it loads the matching version from jsDelivr. Host it from `public/` for production and pass the path here. */ workerUrl?: string; /** Controls laid over the map (scheme switch, legend). */ children?: ReactNode; }; const WORLD: Pos = [-96.5, 38.6]; const subscribeNone = () => () => {}; let engineCache: "map" | "static" | undefined; function detectEngine(): "map" | "static" { return (engineCache ??= probeEngine()); } function probeEngine(): "map" | "static" { try { const c = document.createElement("canvas"); const gl = c.getContext("webgl2") || c.getContext("webgl"); if (!gl) return "static"; gl.getExtension("WEBGL_lose_context")?.loseContext(); if (window.matchMedia("(prefers-reduced-data: reduce)").matches) return "static"; return "map"; } catch { return "static"; } } function alpha(rgba: string, a: number) { return rgba.replace(/[\d.]+\)$/, `${a})`); } const EMPTY = { type: "FeatureCollection", features: [] } as const; function addOverlays(map: MlMap, p: MapPalette) { const sources = ["zones", "routes", "arcs", "heat", "track"]; for (const s of sources) map.addSource(`kc-${s}`, { type: "geojson", data: EMPTY as never }); map.addSource("kc-cluster", { type: "geojson", data: EMPTY as never, cluster: true, clusterRadius: 48, clusterMaxZoom: 11 }); const layers: LayerSpecification[] = [ { id: "kc-zones-fill", type: "fill", source: "kc-zones", paint: { "fill-color": p.success, "fill-opacity": 0.14 } }, { id: "kc-zones-line", type: "line", source: "kc-zones", paint: { "line-color": p.success, "line-width": 1.25, "line-dasharray": [2, 2] } }, { id: "kc-heat", type: "heatmap", source: "kc-heat", paint: { "heatmap-weight": ["coalesce", ["get", "weight"], 0.5], "heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 2, 0.45, 10, 1.6], "heatmap-radius": ["interpolate", ["linear"], ["zoom"], 2, 14, 6, 26, 11, 48], "heatmap-opacity": 0.85, "heatmap-color": ["interpolate", ["linear"], ["heatmap-density"], 0, alpha(p.warning, 0), 0.3, alpha(p.warning, 0.3), 0.65, alpha(p.warning, 0.8), 1, alpha(p.error, 0.9)], }, }, { id: "kc-arcs", type: "line", source: "kc-arcs", layout: { "line-cap": "round" }, paint: { "line-color": p.primary, "line-opacity": 0.65, "line-width": 1.5 } }, { id: "kc-routes-casing", type: "line", source: "kc-routes", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": p.ocean, "line-width": 6, "line-opacity": 0.9 } }, { id: "kc-routes", type: "line", source: "kc-routes", filter: ["!=", ["get", "dashed"], true], layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": p.info, "line-width": 3 }, }, { id: "kc-routes-dashed", type: "line", source: "kc-routes", filter: ["==", ["get", "dashed"], true], layout: { "line-join": "round" }, paint: { "line-color": p.info, "line-width": 3, "line-dasharray": [1.5, 1.5] }, }, { id: "kc-track-trail", type: "line", source: "kc-track", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": p.info, "line-width": 4 } }, { id: "kc-clusters", type: "circle", source: "kc-cluster", filter: ["has", "point_count"], paint: { "circle-color": p.primary, "circle-radius": ["step", ["get", "point_count"], 15, 10, 19, 30, 24], "circle-stroke-width": 3, "circle-stroke-color": alpha(p.primary, 0.22), }, }, { id: "kc-cluster-count", type: "symbol", source: "kc-cluster", filter: ["has", "point_count"], layout: { "text-field": ["get", "point_count_abbreviated"], "text-font": ["Open Sans Semibold"], "text-size": 12, "text-allow-overlap": true }, paint: { "text-color": p.primaryFg }, }, { id: "kc-points", type: "circle", source: "kc-cluster", filter: ["!", ["has", "point_count"]], paint: { "circle-color": p.primary, "circle-radius": 4.5, "circle-stroke-width": 2, "circle-stroke-color": p.ocean }, }, ]; for (const l of layers) map.addLayer(l); } function paintPalette(map: MlMap, p: MapPalette) { const set = (id: string, prop: string, value: unknown) => { if (map.getLayer(id)) map.setPaintProperty(id, prop as never, value as never); }; set("background", "background-color", p.ocean); set("countries-fill", "fill-color", p.land); set("countries-boundary", "line-color", p.line); set("coastline", "line-color", p.line); set("geolines", "line-color", p.line); set("countries-label", "text-color", p.label); set("countries-label", "text-halo-color", p.halo); set("kc-zones-fill", "fill-color", p.success); set("kc-zones-line", "line-color", p.success); set("kc-heat", "heatmap-color", ["interpolate", ["linear"], ["heatmap-density"], 0, alpha(p.warning, 0), 0.3, alpha(p.warning, 0.3), 0.65, alpha(p.warning, 0.8), 1, alpha(p.error, 0.9)]); set("kc-arcs", "line-color", p.primary); set("kc-routes-casing", "line-color", p.ocean); set("kc-routes", "line-color", p.info); set("kc-routes-dashed", "line-color", p.info); set("kc-track-trail", "line-color", p.info); set("kc-clusters", "circle-color", p.primary); set("kc-clusters", "circle-stroke-color", alpha(p.primary, 0.22)); set("kc-cluster-count", "text-color", p.primaryFg); set("kc-points", "circle-color", p.primary); set("kc-points", "circle-stroke-color", p.ocean); } function setData(map: MlMap, id: string, features: unknown[]) { (map.getSource(`kc-${id}`) as GeoJSONSource | undefined)?.setData({ type: "FeatureCollection", features } as never); } /* * MapLibre's stylesheet is unlayered, so it beats Tailwind's layered utilities at any specificity. * Overrides of its own elements therefore need `!`. */ const POPUP_CLASS = "[&_.maplibregl-popup-content]:bg-transparent! [&_.maplibregl-popup-content]:p-0! [&_.maplibregl-popup-content]:shadow-none! [&_.maplibregl-popup-content]:rounded-none! [&_.maplibregl-popup-tip]:hidden!"; const ATTRIB_CLASS = "[&_.maplibregl-ctrl-attrib.maplibregl-compact]:bg-popover/90! [&_.maplibregl-ctrl-attrib]:text-muted-foreground! [&_.maplibregl-ctrl-attrib_a]:text-inherit! dark:[&_.maplibregl-ctrl-attrib-button]:invert [&_.maplibregl-canvas]:outline-none"; export function MapSurface({ markers, routes, arcs, zones, heat, clusters, track, center = WORLD, zoom = 3.1, bounds, fit = false, value, defaultValue = null, onValueChange, flyToSelected = true, selectZoom, fitMaxZoom = 12, colorScheme = "system", mode = "auto", loading = false, cooperativeGestures = true, renderPopup, onMapReady, onTrackProgress, workerUrl, children, className, ...rest }: MapSurfaceProps) { const rootRef = useRef(null); const hostRef = useRef(null); const mapRef = useRef(null); const mlRef = useRef(null); const markerRefs = useRef(new Map()); const popupRef = useRef(null); const [mapReady, setMapReady] = useState(false); const [failed, setFailed] = useState(false); const [markerEls, setMarkerEls] = useState<{ id: string; el: HTMLDivElement }[]>([]); const [popupEl, setPopupEl] = useState(null); const [pageDark, setPageDark] = useState(false); const [inner, setInner] = useState(defaultValue); const [near, setNear] = useState(false); const detected = useSyncExternalStore(subscribeNone, detectEngine, () => "pending" as const); const engine = mode === "static" ? "static" : failed ? "static" : mode === "map" && detected !== "pending" ? "map" : detected; const active = engine === "map" && near; const selected = value !== undefined ? value : inner; const select = useCallback( (id: string | null) => { if (value === undefined) setInner(id); onValueChange?.(id); }, [value, onValueChange], ); const selectRef = useRef(select); const pageScheme: MapScheme = pageDark ? "dark" : "light"; const scheme: MapScheme = colorScheme === "system" ? pageScheme : colorScheme; const schemeRef = useRef({ scheme, pageScheme }); const geometry = useMemo( () => ({ markers, routes, arcs, zones, heat, clusters, track }), [markers, routes, arcs, zones, heat, clusters, track], ); const geometryRef = useRef(geometry); useEffect(() => { selectRef.current = select; schemeRef.current = { scheme, pageScheme }; geometryRef.current = geometry; }); // Follow the page theme: `.dark` on any ancestor, including . useEffect(() => { const read = () => setPageDark(Boolean(rootRef.current?.closest(".dark"))); read(); const mo = new MutationObserver(read); const opts = { attributes: true, attributeFilter: ["class", "data-theme", "data-brand"] }; mo.observe(document.documentElement, opts); mo.observe(document.body, opts); return () => mo.disconnect(); }, []); // Defer creating a WebGL context until the surface is near the viewport (pages can hold many maps). useEffect(() => { const root = rootRef.current; if (!root) return; const io = new IntersectionObserver(([entry]) => entry.isIntersecting && setNear(true), { rootMargin: "240px" }); io.observe(root); return () => io.disconnect(); }, []); // Create the map once, client only. MapLibre is dynamic-imported so SSR never touches it. useEffect(() => { if (!active) return; let canceled = false; let ro: ResizeObserver | undefined; const markersMap = markerRefs.current; (async () => { let ml: MapModule; try { ml = await import("maplibre-gl"); } catch { if (!canceled) setFailed(true); return; } if (canceled || !hostRef.current || !rootRef.current) return; mlRef.current = ml; // The worker ships with the block under public/vendor (copied from maplibre-gl/dist); override with workerUrl. ml.setWorkerUrl(workerUrl ?? "/vendor/maplibre-gl-worker.mjs"); const { scheme: s, pageScheme: ps } = schemeRef.current; const palette = resolvePalette(rootRef.current, s, ps); let map: MlMap; try { map = new ml.Map({ container: hostRef.current, style: buildStyle(palette), ...(bounds ? { bounds, fitBoundsOptions: { padding: 24, animate: false } } : { center, zoom }), attributionControl: { compact: true }, cooperativeGestures, dragRotate: false, pitchWithRotate: false, fadeDuration: 0, }); } catch { setFailed(true); return; } mapRef.current = map; map.touchZoomRotate.disableRotation(); map.on("load", () => { if (canceled) return; addOverlays(map, palette); map.on("click", "kc-clusters", async (e) => { const f = map.queryRenderedFeatures(e.point, { layers: ["kc-clusters"] })[0]; if (!f) return; const src = map.getSource("kc-cluster") as GeoJSONSource; const z = await src.getClusterExpansionZoom(f.properties.cluster_id as number); map.easeTo({ center: (f.geometry as unknown as { coordinates: Pos }).coordinates, zoom: z + 0.25 }); }); map.on("mouseenter", "kc-clusters", () => (map.getCanvas().style.cursor = "pointer")); map.on("mouseleave", "kc-clusters", () => (map.getCanvas().style.cursor = "")); map.on("click", (e) => { // A click that lands on empty map clears the selection (marker clicks are DOM buttons, not map clicks). const hit = map.queryRenderedFeatures(e.point, { layers: ["kc-clusters"] }); if (!hit.length) selectRef.current(null); }); setMapReady(true); onMapReady?.(map); }); map.on("error", (e) => { // WebGL context creation can fail after construction on locked-down browsers. const msg = String((e as unknown as { error?: Error }).error?.message ?? ""); if (/webgl|context/i.test(msg)) setFailed(true); }); let raf = 0; ro = new ResizeObserver(() => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => map.resize()); }); ro.observe(hostRef.current); })(); return () => { canceled = true; ro?.disconnect(); markersMap.forEach(({ marker }) => marker.remove()); markersMap.clear(); popupRef.current?.remove(); popupRef.current = null; mapRef.current?.remove(); mapRef.current = null; setMapReady(false); setMarkerEls([]); }; // The map is created once per engine; later camera and data changes have their own effects. // eslint-disable-next-line react-hooks/exhaustive-deps }, [active]); // Theme the style and overlay layers from the live Kobra tokens. useEffect(() => { const map = mapRef.current; if (!mapReady || !map || !rootRef.current) return; paintPalette(map, resolvePalette(rootRef.current, scheme, pageScheme)); }, [mapReady, scheme, pageScheme]); // Overlay data. useEffect(() => { const map = mapRef.current; if (!mapReady || !map) return; setData(map, "zones", (zones ?? []).map((z) => ({ type: "Feature", properties: { id: z.id }, geometry: { type: "Polygon", coordinates: [z.ring] } }))); setData(map, "routes", (routes ?? []).map((r) => ({ type: "Feature", properties: { id: r.id, dashed: Boolean(r.dashed) }, geometry: { type: "LineString", coordinates: r.coords } }))); setData(map, "arcs", (arcs ?? []).map((a) => ({ type: "Feature", properties: { id: a.id }, geometry: { type: "LineString", coordinates: arcLine(a.from, a.to) } }))); setData(map, "heat", (heat ?? []).map((h) => ({ type: "Feature", properties: { weight: h.weight ?? 0.5 }, geometry: { type: "Point", coordinates: h.coords } }))); setData(map, "cluster", (clusters ?? []).map((c: MapClusterPoint) => ({ type: "Feature", properties: { id: c.id }, geometry: { type: "Point", coordinates: c.coords } }))); }, [mapReady, zones, routes, arcs, heat, clusters]); // Markers: DOM elements owned by MapLibre, content rendered by React through portals. useEffect(() => { const map = mapRef.current; const ml = mlRef.current; if (!mapReady || !map || !ml) return; const refs = markerRefs.current; const next = new Set((markers ?? []).map((m) => m.id)); for (const [id, entry] of refs) { if (!next.has(id)) { entry.marker.remove(); refs.delete(id); } } for (const m of markers ?? []) { const existing = refs.get(m.id); if (existing) { existing.marker.setLngLat(m.coords); } else { const el = document.createElement("div"); const marker = new ml.Marker({ element: el, anchor: "center" }).setLngLat(m.coords).addTo(map); refs.set(m.id, { marker, el }); } } setMarkerEls([...refs.entries()].map(([id, { el }]) => ({ id, el }))); }, [mapReady, markers]); useEffect(() => { markerRefs.current.forEach(({ el }, id) => { el.style.zIndex = id === selected ? "2" : "1"; }); }, [selected, markerEls]); // Fit to the markers when asked, and refit when the set changes. const markerKey = (markers ?? []).map((m) => m.id).join("|"); useEffect(() => { const map = mapRef.current; const ml = mlRef.current; if (!mapReady || !map || !ml || !fit || !markers?.length) return; const bounds = new ml.LngLatBounds(); markers.forEach((m) => bounds.extend(m.coords)); map.fitBounds(bounds, { padding: 72, maxZoom: fitMaxZoom, duration: 700 }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [mapReady, fit, markerKey]); // Camera changes from props. const viewKey = bounds ? bounds.flat().join(",") : `${center[0]},${center[1]},${zoom}`; const firstView = useRef(true); useEffect(() => { const map = mapRef.current; if (!mapReady || !map) return; if (firstView.current) { firstView.current = false; return; } if (fit) return; if (bounds) map.fitBounds(bounds, { padding: 24, duration: 900 }); else map.flyTo({ center, zoom, duration: 900 }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [mapReady, viewKey]); // Popup on the selected marker. const selectedMarker = markers?.find((m) => m.id === selected) ?? null; const selectedId = selectedMarker?.id; useEffect(() => { const map = mapRef.current; const ml = mlRef.current; if (!mapReady || !map || !ml || !selectedMarker) return; const el = document.createElement("div"); let closing = false; const popup = new ml.Popup({ closeButton: false, closeOnClick: false, offset: [0, -22], maxWidth: "none", className: `${POPUP_CLASS} z-10!`, focusAfterOpen: false }) .setLngLat(selectedMarker.coords) .setDOMContent(el) .addTo(map); popupRef.current = popup; setPopupEl(el); popup.on("close", () => { if (!closing) selectRef.current(null); }); if (flyToSelected) map.flyTo({ center: selectedMarker.coords, zoom: selectZoom ?? map.getZoom(), duration: 800 }); return () => { closing = true; popup.remove(); setPopupEl(null); }; // Re-run only when the selected id changes, not when marker objects are recreated. // eslint-disable-next-line react-hooks/exhaustive-deps }, [mapReady, selectedId, flyToSelected, selectZoom]); // Live tracking: a marker that moves along a route. No React state per frame. const trackKey = track ? `${track.route.length}:${track.durationMs ?? 40000}:${track.follow ? 1 : 0}` : ""; useEffect(() => { const map = mapRef.current; const ml = mlRef.current; const t = geometryRef.current.track; const root = rootRef.current; if (!mapReady || !map || !ml || !t || !root) return; const route = t.route; const metrics = routeMetrics(route); const duration = t.durationMs ?? 40000; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const el = document.createElement("div"); el.className = "relative grid size-6 place-items-center"; el.setAttribute("role", "img"); el.setAttribute("aria-label", t.label ?? "Live position"); el.innerHTML = ''; const marker = new ml.Marker({ element: el, anchor: "center" }).setLngLat(route[0]).addTo(map); let elapsed = 0; let last = 0; let lastTrail = 0; let lastReport = 0; let raf = 0; let timer = 0; let visible = true; const apply = (now: number) => { const f = (elapsed / duration) % 1; const { pos, index } = pointAt(route, metrics, f); marker.setLngLat(pos); if (now - lastTrail > 120) { lastTrail = now; setData(map, "track", [{ type: "Feature", properties: {}, geometry: { type: "LineString", coordinates: [...route.slice(0, index), pos] } }]); if (t.follow) map.easeTo({ center: pos, duration: 160, easing: (x) => x }); } if (now - lastReport > 250) { lastReport = now; onTrackProgress?.(f); } }; const frame = (now: number) => { elapsed += Math.min(now - (last || now), 100); last = now; apply(now); raf = requestAnimationFrame(frame); }; const start = () => { if (reduced) { if (!timer) timer = window.setInterval(() => { elapsed += duration / 24; apply(performance.now() + 1000); }, 1500); } else if (!raf) { last = 0; raf = requestAnimationFrame(frame); } }; const stop = () => { cancelAnimationFrame(raf); raf = 0; window.clearInterval(timer); timer = 0; }; const sync = () => (visible && !document.hidden ? start() : stop()); const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; sync(); }); io.observe(root); document.addEventListener("visibilitychange", sync); apply(performance.now() + 1000); sync(); return () => { stop(); io.disconnect(); document.removeEventListener("visibilitychange", sync); marker.remove(); setData(map, "track", []); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [mapReady, trackKey]); const close = useCallback(() => select(null), [select]); const popupNode = selectedMarker ? (renderPopup ? renderPopup(selectedMarker, close) : ) : null; const showSkeleton = loading || (engine === "pending" as string) || (engine === "map" && !mapReady); return (

{engine === "map" ? (

) : null} {engine === "static" ? ( renderPopup(m, close) : undefined} /> ) : null} {markerEls.map(({ id, el }) => { const m = markers?.find((x) => x.id === id); return m ? createPortal(, el, id) : null; })} {popupEl && popupNode ? createPortal(popupNode, popupEl) : null} {children ?

{children}

: null}

); } 31:T1957,"use client"; import { IconMoon, IconSun, IconX } from "@tabler/icons-react"; import type { ComponentProps, ReactNode } from "react"; import { Button } from "@/components/ui/button"; import { Skeleton } from "@/components/ui/skeleton"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; import type { MapMarkerData, MapMarkerStatus } from "./map-types"; import type { MapScheme } from "./map-theme"; const TONE: Record = { open: "bg-success", closing: "bg-warning", closed: "bg-muted-foreground", default: "bg-primary", }; const STATUS_LABEL: Record = { open: "Open now", closing: "Closing soon", closed: "Closed" }; /** One pin. Anchored to the map by a MapLibre marker; also used by the static fallback. */ export function MapMarkerPin({ marker, selected, onSelect, className, ...props }: Omit, "onSelect"> & { marker: MapMarkerData; selected?: boolean; onSelect?: (id: string) => void; }) { return ( ); } /** The card shown on a selected marker. Sits on the Kobra popover surface (hairline ring, popover fill, soft shadow). */ export function MapPopupCard({ marker, onClose, children, className, }: { marker: MapMarkerData; onClose?: () => void; children?: ReactNode; className?: string; }) { return (

{marker.label}

{marker.description ?

{marker.description}

: null}

{onClose ? ( ) : null} {marker.status || marker.details?.length ? (

{STATUS_LABEL[marker.status]}
{line}

) : null} {children ?

{children}

: null}

); } /** Loading state: faint grid, ghost pins, a pill. Fades out when the map reports `load`. */ export function MapSkeleton({ className, visible = true }: { className?: string; visible?: boolean }) { return (

{[ "start-[22%] top-[30%]", "start-[48%] top-[52%]", "start-[68%] top-[26%]", "start-[34%] top-[68%]", "start-[78%] top-[62%]", ].map((pos) => ( ))}

Loading map

); } /** Light or dark map style. Pass `value` and `onValueChange` from the same state as `MapSurface colorScheme`. */ export function MapSchemeSwitch({ value, onValueChange, className, }: { value: MapScheme; onValueChange: (value: MapScheme) => void; className?: string; }) { return ( { const pick = next[0] as MapScheme | undefined; if (pick) onValueChange(pick); }} variant="outline" size="sm" spacing={0} aria-label="Map style" data-slot="map-scheme-switch" className={cn("rounded-lg bg-popover shadow-sm", className)} > ); } 32:T2024,"use client"; import { IconMapOff } from "@tabler/icons-react"; import type { ReactNode } from "react"; import { cn } from "@/lib/utils"; import { MapMarkerPin, MapPopupCard } from "./map-parts"; import { arcLine } from "./map-theme"; import type { MapGeometry, MapMarkerData, Pos } from "./map-types"; type Bounds = { minX: number; maxX: number; minY: number; maxY: number }; function boundsOf(g: MapGeometry): Bounds | null { const pts: Pos[] = []; g.markers?.forEach((m) => pts.push(m.coords)); g.routes?.forEach((r) => pts.push(...r.coords)); g.arcs?.forEach((a) => pts.push(a.from, a.to)); g.zones?.forEach((z) => pts.push(...z.ring)); g.heat?.forEach((h) => pts.push(h.coords)); g.clusters?.forEach((c) => pts.push(c.coords)); if (g.track) pts.push(...g.track.route); if (!pts.length) return null; const xs = pts.map((p) => p[0]); const ys = pts.map((p) => p[1]); const minX = Math.min(...xs); const maxX = Math.max(...xs); const minY = Math.min(...ys); const maxY = Math.max(...ys); const padX = Math.max((maxX - minX) * 0.08, 0.02); const padY = Math.max((maxY - minY) * 0.08, 0.02); return { minX: minX - padX, maxX: maxX + padX, minY: minY - padY, maxY: maxY + padY }; } /** Pick a graticule step that gives about five lines across the extent. */ function niceStep(extent: number) { const raw = extent / 5; const steps = [0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 10, 20]; return steps.find((s) => s >= raw) ?? 20; } /** * Flat fallback for no WebGL or `prefers-reduced-data`: a grid, simple equirectangular projection * (longitude scaled by cos of the middle latitude), pins as real buttons. No tiles, no network. */ export function MapStaticFallback({ geometry, selected, onSelect, renderPopup, note = "Static map. Interactive tiles are off on this device.", className, }: { geometry: MapGeometry; selected: string | null; onSelect: (id: string | null) => void; renderPopup?: (marker: MapMarkerData) => ReactNode; note?: string; className?: string; }) { const b = boundsOf(geometry); const selectedMarker = geometry.markers?.find((m) => m.id === selected); if (!b) { return (

No locations to show.

); } const midLat = ((b.minY + b.maxY) / 2) * (Math.PI / 180); const k = Math.cos(midLat); const w = (b.maxX - b.minX) * k; const h = b.maxY - b.minY; const aspect = w / h; const px = (x: number) => ((x - b.minX) / (b.maxX - b.minX)) * 100; const py = (y: number) => (1 - (y - b.minY) / (b.maxY - b.minY)) * 100; const line = (pts: Pos[]) => pts.map((p) => `${px(p[0]).toFixed(2)},${py(p[1]).toFixed(2)}`).join(" "); const stepX = niceStep(b.maxX - b.minX); const stepY = niceStep(b.maxY - b.minY); const vLines: number[] = []; const hLines: number[] = []; for (let x = Math.ceil(b.minX / stepX) * stepX; x < b.maxX; x += stepX) vLines.push(x); for (let y = Math.ceil(b.minY / stepY) * stepY; y < b.maxY; y += stepY) hLines.push(y); // Coarse clusters: bucket points into a 10 by 10 grid, show a count bubble for buckets of two or more. const buckets = new Map(); for (const c of geometry.clusters ?? []) { const gx = Math.floor(px(c.coords[0]) / 10); const gy = Math.floor(py(c.coords[1]) / 10); const key = `${gx}:${gy}`; const cur = buckets.get(key) ?? { x: 0, y: 0, n: 0 }; buckets.set(key, { x: cur.x + px(c.coords[0]), y: cur.y + py(c.coords[1]), n: cur.n + 1 }); } return (

{geometry.heat?.map((hp, i) => ( ))} {[...buckets.entries()].map(([key, v]) => v.n > 1 ? ( {v.n} ) : ( ), )} {geometry.markers?.map((m) => ( ))} {geometry.track ? ( ) : null}

{note}

{selectedMarker ? (

{renderPopup ? renderPopup(selectedMarker) : onSelect(null)} />}

) : null}

); } 33:T1a77,import type { StyleSpecification } from "maplibre-gl"; /** Free MapLibre demo style: world countries only, no API key. We reuse its tile and glyph endpoints and restyle with Kobra tokens. */ export const DEMO_STYLE_URL = "https://demotiles.maplibre.org/style.json"; const TILES_URL = "https://demotiles.maplibre.org/tiles/tiles.json"; const GLYPHS_URL = "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf"; export type MapScheme = "light" | "dark"; export type MapPalette = { ocean: string; land: string; line: string; label: string; halo: string; primary: string; primaryFg: string; info: string; success: string; warning: string; error: string; }; /** Which Kobra token feeds each map color. Read from the live container so brand themes carry through. */ const TOKENS: Record = { ocean: "--background", land: "--muted", line: "--muted-foreground", label: "--muted-foreground", halo: "--background", primary: "--primary", primaryFg: "--primary-foreground", info: "--info", success: "--success", warning: "--warning", error: "--error", }; /* * A canvas cannot read CSS variables, so a forced scheme that differs from the page theme needs its own * values. These mirror the Kobra neutral tokens (`:root` and `.dark` in globals.css). Used only then. */ const FIXED: Record = { light: { ocean: "oklch(1 0 0)", land: "oklch(0.97 0 0)", line: "oklch(0.556 0 0)", label: "oklch(0.556 0 0)", halo: "oklch(1 0 0)", primary: "oklch(0.205 0 0)", primaryFg: "oklch(0.985 0 0)", info: "oklch(0.5 0.17 255)", success: "oklch(0.5 0.13 152)", warning: "oklch(0.5 0.14 70)", error: "oklch(0.5 0.21 27.3)", }, dark: { ocean: "oklch(0.145 0 0)", land: "oklch(0.269 0 0)", line: "oklch(0.708 0 0)", label: "oklch(0.708 0 0)", halo: "oklch(0.145 0 0)", primary: "oklch(0.922 0 0)", primaryFg: "oklch(0.205 0 0)", info: "oklch(0.704 0.15 255)", success: "oklch(0.704 0.15 152)", warning: "oklch(0.704 0.15 75)", error: "oklch(0.704 0.191 22.216)", }, }; let probe: CanvasRenderingContext2D | null = null; /** Any CSS color (oklch, hex, color-mix result) to an `rgba()` string MapLibre can parse. */ export function toRgba(css: string): string { if (typeof document === "undefined") return css; if (!probe) { const canvas = document.createElement("canvas"); canvas.width = canvas.height = 1; probe = canvas.getContext("2d", { willReadFrequently: true }); } if (!probe) return css; probe.clearRect(0, 0, 1, 1); probe.fillStyle = "#000"; probe.fillStyle = css; probe.fillRect(0, 0, 1, 1); const [r, g, b, a] = probe.getImageData(0, 0, 1, 1).data; return `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(3)})`; } export function resolvePalette(el: HTMLElement, scheme: MapScheme, pageScheme: MapScheme): MapPalette { const source = scheme === pageScheme ? null : FIXED[scheme]; const cs = getComputedStyle(el); const out = {} as MapPalette; for (const key of Object.keys(TOKENS) as (keyof MapPalette)[]) { const raw = source ? source[key] : cs.getPropertyValue(TOKENS[key]).trim() || FIXED[scheme][key]; out[key] = toRgba(raw); } return out; } /** Base style: the demo tiles, flattened to the Kobra neutral look. */ export function buildStyle(p: MapPalette): StyleSpecification { return { version: 8, glyphs: GLYPHS_URL, sources: { maplibre: { type: "vector", url: TILES_URL } }, layers: [ { id: "background", type: "background", paint: { "background-color": p.ocean } }, { id: "countries-fill", type: "fill", source: "maplibre", "source-layer": "countries", paint: { "fill-color": p.land } }, { id: "countries-boundary", type: "line", source: "maplibre", "source-layer": "countries", paint: { "line-color": p.line, "line-opacity": 0.35, "line-width": ["interpolate", ["linear"], ["zoom"], 1, 0.5, 6, 1, 14, 2] }, }, { id: "coastline", type: "line", source: "maplibre", "source-layer": "countries", layout: { "line-cap": "round", "line-join": "round" }, paint: { "line-color": p.line, "line-opacity": 0.55, "line-width": ["interpolate", ["linear"], ["zoom"], 0, 0.6, 6, 1.2, 14, 2] }, }, { id: "geolines", type: "line", source: "maplibre", "source-layer": "geolines", filter: ["!=", ["get", "name"], "International Date Line"], paint: { "line-color": p.line, "line-opacity": 0.18, "line-dasharray": [3, 3], "line-width": 1 }, }, { id: "countries-label", type: "symbol", source: "maplibre", "source-layer": "centroids", layout: { "text-font": ["Open Sans Semibold"], "text-size": ["interpolate", ["linear"], ["zoom"], 2, 10, 4, 12, 6, 15], "text-field": ["step", ["zoom"], ["get", "ABBREV"], 4, ["get", "NAME"]], "text-max-width": 10, }, paint: { "text-color": p.label, "text-halo-color": p.halo, "text-halo-width": 1.2 }, }, ], }; } /* ------------------------------ geometry helpers ------------------------------ */ export type Pos = [number, number]; /** Curved great-circle-ish arc: a quadratic bezier lifted perpendicular to the chord. */ export function arcLine(from: Pos, to: Pos, steps = 64, lift = 0.12): Pos[] { const mx = (from[0] + to[0]) / 2; const my = (from[1] + to[1]) / 2; const dx = to[0] - from[0]; const dy = to[1] - from[1]; const cx = mx - dy * lift; const cy = my + dx * lift * 0.6; const out: Pos[] = []; for (let i = 0; i <= steps; i++) { const t = i / steps; const u = 1 - t; out.push([u * u * from[0] + 2 * u * t * cx + t * t * to[0], u * u * from[1] + 2 * u * t * cy + t * t * to[1]]); } return out; } /** Cumulative flat distances (degrees, longitude scaled) so a marker can move at an even pace. */ export function routeMetrics(route: Pos[]) { const cum = [0]; for (let i = 1; i < route.length; i++) { const midLat = ((route[i][1] + route[i - 1][1]) / 2) * (Math.PI / 180); const dx = (route[i][0] - route[i - 1][0]) * Math.cos(midLat); const dy = route[i][1] - route[i - 1][1]; cum.push(cum[i - 1] + Math.hypot(dx, dy)); } return { cum, total: cum[cum.length - 1] || 1 }; } export function pointAt(route: Pos[], metrics: { cum: number[]; total: number }, fraction: number): { pos: Pos; index: number } { const target = Math.min(Math.max(fraction, 0), 1) * metrics.total; let i = 1; while (i < metrics.cum.length - 1 && metrics.cum[i] < target) i++; const span = metrics.cum[i] - metrics.cum[i - 1] || 1; const t = (target - metrics.cum[i - 1]) / span; const a = route[i - 1]; const b = route[i]; return { pos: [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t], index: i }; } 34:T47e,export type Pos = [number, number]; export type MapMarkerStatus = "open" | "closing" | "closed"; export type MapMarkerData = { id: string; coords: Pos; label: string; description?: string; /** Extra lines under the description, like hours or a phone number. */ details?: string[]; status?: MapMarkerStatus; }; export type MapRouteData = { id: string; coords: Pos[]; label?: string; dashed?: boolean }; export type MapArcData = { id: string; from: Pos; to: Pos; label?: string }; export type MapZoneData = { id: string; ring: Pos[]; label?: string }; export type MapHeatData = { coords: Pos; weight?: number }; export type MapClusterPoint = { id: string; coords: Pos }; /** A vehicle that moves along `route` on a loop. */ export type MapTrack = { route: Pos[]; label?: string; /** Time for one full lap. Default 40 seconds. */ durationMs?: number; /** Keep the camera on the vehicle. */ follow?: boolean; }; export type MapGeometry = { markers?: MapMarkerData[]; routes?: MapRouteData[]; arcs?: MapArcData[]; zones?: MapZoneData[]; heat?: MapHeatData[]; clusters?: MapClusterPoint[]; track?: MapTrack; }; 35:T165c,"use client"; import { IconSearch } from "@tabler/icons-react"; import { useMemo, useState } from "react"; import { Input } from "@/components/ui/input"; import { ScrollArea } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; import { MapSurface, type MapSurfaceProps } from "./map-surface"; import type { MapMarkerData, MapMarkerStatus, Pos } from "./map-types"; export type StoreLocatorItem = { id: string; name: string; city: string; region: string; address: string; hours: string; phone: string; status: MapMarkerStatus; coords: Pos; }; const STATUS: Record = { open: { label: "Open now", dot: "bg-success" }, closing: { label: "Closing soon", dot: "bg-warning" }, closed: { label: "Closed", dot: "bg-muted-foreground" }, }; export type StoreLocatorProps = Pick & { stores: StoreLocatorItem[]; /** City filter chips. Omit to hide them. */ cities?: readonly string[]; className?: string; }; /** Side list plus map. Picking a store focuses the map; picking a pin highlights the row. */ export function StoreLocator({ stores, cities, value, defaultValue = null, onValueChange, className, ...mapProps }: StoreLocatorProps) { const [query, setQuery] = useState(""); const [city, setCity] = useState(null); const [inner, setInner] = useState(defaultValue); const selected = value !== undefined ? value : inner; const select = (id: string | null) => { if (value === undefined) setInner(id); onValueChange?.(id); }; const filtered = useMemo(() => { const q = query.trim().toLowerCase(); return stores.filter((s) => (!city || s.city === city) && (!q || `${s.name} ${s.address} ${s.city}`.toLowerCase().includes(q))); }, [stores, query, city]); const markers = useMemo( () => filtered.map((s) => ({ id: s.id, coords: s.coords, label: s.name, description: `${s.address}, ${s.city}, ${s.region}`, details: [s.hours, s.phone], status: s.status, })), [filtered], ); return (

setQuery(e.target.value)} placeholder="Search stores" aria-label="Search stores" className="ps-8" />

{cities?.length ? (

{[null, ...cities].map((c) => ( ))}

) : null}

{filtered.length} {filtered.length === 1 ? "store" : "stores"}

{filtered.length ? (

) : (

No stores match

Try a different city or clear the search.

)}

); } 36:T1177,"use client"; import { useMemo, useState } from "react"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { arcs as arcFixtures, circlePolygon, conusBounds, heatScatter, texasBounds, routes as routeFixtures, scatter, storeCities, stores, zones as zoneFixtures, } from "../_fixtures-c"; import { MapSchemeSwitch, MapSurface, type MapMarkerData, type MapScheme } from "./map-surface"; import { StoreLocator } from "./store-locator"; const markers: MapMarkerData[] = stores.map((s) => ({ id: s.id, coords: s.coords, label: s.name, description: `${s.address}, ${s.city}, ${s.region}`, details: [s.hours, s.phone], status: s.status, })); const tall = "aspect-auto h-80 md:h-[26rem]"; export function MapSurfaceDemo() { const [selected, setSelected] = useState("atx-bluff"); const [scheme, setScheme] = useState("light"); const [progress, setProgress] = useState(0); const clusterPoints = useMemo(() => scatter.map((p) => ({ id: p.id, coords: p.coords })), []); const heatPoints = useMemo(() => heatScatter.map((p) => ({ coords: p.coords, weight: p.weight })), []); const zoneData = useMemo(() => zoneFixtures.map((z) => ({ id: z.id, label: z.label, ring: circlePolygon(z.center, z.radiusKm) })), []); const arcData = useMemo(() => arcFixtures.map((a) => ({ id: a.id, label: a.label, from: a.from, to: a.to })), []); const track = useMemo(() => ({ route: routeFixtures[0].coords, label: "Truck 14", durationMs: 30000 }), []); const bkStores = useMemo(() => markers.filter((m) => m.id.startsWith("bk-")), []); const freightStops = useMemo(() => markers.filter((m) => ["pdx-alder", "atx-bluff"].includes(m.id)), []); return (

Selected: {selected ?? "none"}

["pdx-alder", "atx-bluff", "chi-loop", "bk-linden"].includes(m.id))} bounds={conusBounds} /> m.id.startsWith("atx-"))} bounds={texasBounds} />

Truck 14 is {Math.round(progress * 100)}% along the route from Portland to Austin.

); } export default MapSurfaceDemo; 37:Tac1,import type { BlockMeta } from "../../../lib/block-meta"; export const mapSurfaceMeta: BlockMeta = { slug: "map-surface", title: "Map surface", description: "MapLibre map on the free demo tiles, restyled with Kobra tokens: markers, popups, clusters, routes, arcs, zones, heatmap, store locator, live tracking, light and dark, skeleton, and a static fallback.", group: "data", kobraDeps: ["button", "input", "scroll-area", "skeleton", "toggle-group"], files: [ "public/vendor/maplibre-gl-worker.mjs", "public/vendor/maplibre-gl-shared.mjs", "blocks/data/map-surface/map-surface.tsx", "blocks/data/map-surface/map-parts.tsx", "blocks/data/map-surface/map-static.tsx", "blocks/data/map-surface/map-theme.ts", "blocks/data/map-surface/map-types.ts", "blocks/data/map-surface/store-locator.tsx", ], props: [ { name: "markers", type: "MapMarkerData[]", description: "Pins. Each opens a popup when selected." }, { name: "routes", type: "MapRouteData[]", description: "Polylines; `dashed` for planned legs." }, { name: "arcs", type: "MapArcData[]", description: "Curved lines between two points." }, { name: "zones", type: "MapZoneData[]", description: "Closed rings drawn as coverage areas." }, { name: "heat", type: "MapHeatData[]", description: "Weighted points for a density heatmap." }, { name: "clusters", type: "MapClusterPoint[]", description: "Dense points grouped into count bubbles; click zooms in." }, { name: "track", type: "MapTrack", description: "A vehicle looping along a route. Pauses offscreen; steps once every 1.5s with reduced motion." }, { name: "center / zoom", type: "[lng, lat] / number", default: "continental US", description: "Camera. Changing them flies there." }, { name: "fit", type: "boolean", default: "false", description: "Fit the camera to the markers and refit when they change." }, { name: "value / defaultValue / onValueChange", type: "string | null", description: "Selected marker id." }, { name: "colorScheme", type: "'system' | 'light' | 'dark'", default: "'system'", description: "System follows the page theme through live Kobra tokens." }, { name: "mode", type: "'auto' | 'map' | 'static'", default: "'auto'", description: "Auto falls back to the SVG overview without WebGL or with prefers-reduced-data." }, { name: "loading", type: "boolean", default: "false", description: "Hold the skeleton." }, { name: "renderPopup", type: "(marker, close) => ReactNode", description: "Replace the default popup card." }, { name: "onMapReady", type: "(map: maplibregl.Map) => void", description: "Escape hatch to the MapLibre instance." }, ], tags: ["map", "maplibre", "locator", "geo"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#data","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Data display"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Map surface"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Map surface"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"MapLibre map on the free demo tiles, restyled with Kobra tokens: markers, popups, clusters, routes, arcs, zones, heatmap, store locator, live tracking, light and dark, skeleton, and a static fallback."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"map-surface","group":"data","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/data/map-surface/map-surface.tsx","code":"$30"},{"path":"blocks/data/map-surface/map-parts.tsx","code":"$31"},{"path":"blocks/data/map-surface/map-static.tsx","code":"$32"},{"path":"blocks/data/map-surface/map-theme.ts","code":"$33"},{"path":"blocks/data/map-surface/map-types.ts","code":"$34"},{"path":"blocks/data/map-surface/store-locator.tsx","code":"$35"},{"path":"blocks/data/map-surface/demo.tsx","code":"$36"},{"path":"blocks/data/map-surface/meta.ts","code":"$37"}]}],"props":"$L38"}],"$L39"]}]